Contact Forms

Protect your email address from spammers

You have to provide a way for people to contact you on your website, but putting your email address in plain-text is a huge mistake.

StaticKit has got you covered.

Step 1
Add a form with an email notification

{
  "forms": {
    "contact": {
      "name": "Contact Form",
      "fields": {
        "email": { "type": "email", "required": true },
        "message": { "type": "text", "required": true }
      },
      "actions": [
        { "type": "email", "to": "[email protected]" }
      ]
    }
  }
}

An example of a statickit.json file.

Step 2
Deploy to StaticKit

statickit deploy

Step 3
Design your interface

import { useForm } from '@statickit/react';

function ContactForm() {
  const [state, submit] = useForm({
    site: '0858b1a135b0',
    form: 'contact'
  });

  if (state.succeeded) {
    return (
      <div>Thank you for signing up!</div>
    )
  }

  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" name="email" required />

      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required></textarea>

      <button type="submit" disabled={state.submitting}>Send</button>
    </form>
  );
}

We have React and HTML client libraries.

Native React Support

Our useForm hook works great with Next.js, Gatsby, and other React environments.

Spam Protection

Our proprietary spam algorithm keeps bots away, without subjecting users to reCAPTCHA.

Validation Rules

Ensure invalid submissions don't slip through by setting rules on the server-side.

Storage & Exports

We store your form submissions for you so you can always reference them in the future.

Create your contact form.