Your First Form in 3 Minutes

Open the plugin, drop in your fields, wire up a submit button. You'll have a working validated form before your coffee gets cold.

1Open Plugin2Sign In3Insert Form4Add Fields5Add Submit
1

Open the Plugin

No install required. Framer plugins launch instantly inside any project.

From Framer Marketplace

  1. Head to the Framer Marketplace
  2. Search for Form Kit and click Open Plugin
  3. Pick which project to use it in

From Inside Framer

  1. Click Plugins in the bottom toolbar
  2. Search "Form Kit"
  3. Click to open — it loads right in the sidebar
2

Sign In

You'll see the component grid right away. Click any component and you'll land on the sign-in screen.

New here?

Hit the Register tab, enter your email and password. You're in immediately — no verification email.

Prefer Google?

One click on Continue with Google. No password needed — just authorize and start building.

Already registered?

Log in on the Login tab. Your component grid loads instantly.

3

Insert a Framer Form

Form Kit fields live inside Framer's native Form element — that's where submission happens.

Before you start: Form Kit fields must be placed inside a native Framer Form. Fields outside the form won't submit.
  1. Open the Insert Menu (top-left "+" or press I)
  2. Navigate to Forms and drag a Form Builder onto your page
  3. Select Framer's default submit button and delete it — Form Kit Submit replaces it
4

Add Fields

Pick components from the plugin, then drag them inside your form.

  1. Open the Form Kit plugin (Plugins bar or Ctrl + Alt + L)
  2. Click any component in the grid to insert it onto the canvas
  3. Drag the component inside your Framer Form in the layers panel
  4. Select the field and configure it in the Properties Panel (right sidebar) — set the field name, label, placeholder, and validation
Rapid styling: Design one field, then Ctrl + Alt + C to copy its styles. Select another field and Ctrl + Alt + V to paste. All input, label, and error styling transfers in one go.
5

Add Form Kit Submit

The submit button validates every field before the form sends.

  1. In the plugin, find Submit and insert it
  2. Drag it inside your Framer Form (after your fields)
  3. Configure button text, loading state, and success/error messages in the Properties Panel
  4. Hit Preview (Ctrl + P) to test your form live

Form Kit Submit runs validation on all visible fields before Framer's native submission fires. If any field has errors, submission is blocked and users see inline messages exactly where the problem is.

What's next