Skip to main content

​
Send Form Submissions to Framer CMS

Turn form submissions into CMS entries in the same Framer project — useful for testimonials, job applications, directory listings, or anything you want to display back on your site.

​
Step 1 - Create a Framer API Key

The Forms Plugin uses Framer’s Server API to write entries into your collection.
  1. Open your project in Framer
  2. Go to Site Settings → General
  3. Generate a new API Key
  4. Copy the key
A Framer API key can edit, publish, and deploy the project it belongs to — it is far more powerful than a typical integration key. Treat it like a password, use a key scoped to this project only, and generate a new one if you ever remove the component from your site.

​
Step 2 - Copy Your Project URL

The integration needs to know which project to write to. Copy the project URL from your browser’s address bar while the project is open. It looks like:

​
Step 3 - Insert Framer CMS Component Into Your Form

Select your form in the Framer canvas and insert the Framer CMS component. The component connects your form to your CMS and automatically detects the form fields in your form layout.

​
Step 4 - Configure CMS Settings

After inserting the component, configure it in the properties panel.
  1. Select the Framer CMS Integration component in your form
  2. Open the properties panel on the right side
  3. Paste your API Key
  4. Paste your Project URL
  5. Enter the Collection name

​
Required Fields

  • API Key - The Framer API key created in Step 1.
  • Project URL - The project the entries are written to.
  • Collection - The collection entries are added to. Optional; defaults to Form Submissions.

​
Optional Fields

  • Slug From - The form fields joined to name each entry, in the order you list them. Click + to add a field. Leave empty to use the email address.
  • Join With - What goes between each slug field: Dash, Underscore, Dot, Comma, Space, None, or Custom.
  • Separator - Your own separator text. Only shown when Join With is set to Custom.
  • Always Unique - Add a random suffix to every slug. Off by default so slugs stay readable.
  • Add As Draft - When on, entries are added as drafts and excluded when you publish. When off, entries are ready to go live with your next publish.

​
How slugs are built

Values from your chosen fields are joined with your separator, then made URL-safe. Dashes and underscores survive into the slug. Commas, dots and spaces are not valid in a URL, so they become dashes — pick Dash or Underscore if you want the separator visible in the address. Empty fields drop out of the join, so an optional field left blank never leaves a dangling separator. Slugs are lower-cased, accents are stripped, repeated dashes collapse, and the result is trimmed to 80 characters. If nothing usable survives, the entry is named entry.
Framer requires every slug in a collection to be unique. With Always Unique off, the clean slug is used as-is and a short suffix is added only if that slug is already taken — so a second “Vivian Barker” is still saved, never dropped.

​
If the Collection Does Not Exist

You do not have to create the collection first. When you enter a collection name the plugin checks your project and tells you what it found: Missing fields are added to the collection for you, matched by name and created with the Type you set on the mapping — except Option, which cannot be created automatically because it needs its list of options. A mapping set to Option that targets a field which does not exist yet is created as Text instead. A collection you built yourself keeps its own field types and ordering; only fields that are genuinely missing are appended.

​
Step 5 - Configure Field Mapping

Map your form fields to CMS field names. Each row is a form field, the CMS field it writes to, and that field’s Type.
One mapping must target a CMS field named email. Without it the submission is not sent at all, and no error appears on the form. The email is always written to a field called email, which is created on the collection if it does not exist.

​
Example Mapping

​
Supported Types

Not supported: Collection Reference, Multi Collection Reference and Array fields. These need to point at another CMS item, which a form field cannot express. Values aimed at them are skipped.

​
Images and Files

Upload fields hand us a hosted URL, not the file itself, so that URL is what gets written to the CMS. The value must start with http:// or https:// — a relative path is skipped.
The Type you pick only matters when the field has to be created. If the field already exists in your collection, its own type always wins — so a mapping can never change or mis-describe a field you built yourself.
Keep your mapping to the fields you actually want to display — Framer limits how many custom fields a collection can hold.

​
Other things worth knowing

  • The collection’s title field is filled automatically from your slug source when no mapping claims it, so entries never show as untitled in the CMS list.
  • A mapping that targets the collection’s slug column is ignored. The slug is set from Slug From, not from a mapping.
  • If a missing field cannot be added, the entry is still saved with the fields that do exist, and the failure is recorded in the integration log.

​
When a value does not fit

A value that cannot be stored in its field — letters in a Number, an option that does not exist — is skipped, and the rest of the entry is still saved. Losing one field is better than losing the whole submission. Skipped values are recorded in the integration log with the reason.

​
Step 6 - Result

When a user submits the form, a new entry appears in your CMS collection straight away.
New entries appear in the CMS immediately, but your live site only shows them after you publish the project. This is the same behaviour as editing CMS content by hand.

​
Troubleshooting

​
Next Steps