Opt-In Forms

Stop fighting messy opt-in form markup

Your email marketing app gives you opt-in forms, but let’s be honest: they’re a pain to style, you don’t have much control over their behavior, and you’re never quite sure if you’re going to accidentally break them.

StaticKit makes gathering emails a breeze.

Step 1
Connect a form to your email marketing app

{
  "forms": {
    "newsletter": {
      "name": "Newsletter",
      "actions": [
        { "app": "mailchimp", "type": "addOrUpdateContact" }
      ]
    }
  }
}

An example of a statickit.json file.

Step 2
Authenticate your account

statickit secrets add mailchimp-api-key <...>

Step 3
Deploy to StaticKit

statickit deploy

Step 4
Design your interface

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

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

  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 />
      <button type="submit" disabled={state.submitting}>Notify me</button>
    </form>
  );
}

We have React and HTML client libraries.

Works great with

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.

Submission Storage

You can still gather email addresses even if you aren't ready for an email marketing app just yet.

Start gathering email subscribers.