Framer Custom HTML Form
Send a custom HTML form on a Framer site to your email
Last updated
To send a custom HTML form on a Framer site to your email, paste the form below into the HTML section of an Embed component. The form posts to https://api.staticforms.dev/submit with your form's API key, and Static Forms emails each submission to you. You write the fields yourself and need no backend. It works on the free plan.
1. Copy the form
Replace YOUR_API_KEY with the key from the General tab of your form in the app. The key is visible in the page, which is expected: the form API key cannot read submissions.
The visitor's email field becomes the reply-to address on the notification, and every other named field appears in the email, so add a phone or company field the same way. Change the styles in the <style> tag to match your site.
2. Add it to your Framer page
Insert an Embed component
Open the Insert menu, search for Embed, and drag the Embed component onto the canvas where the form should go.
Paste the form
Paste the code into the HTML section of the Embed component, then resize the component so the whole form fits.
Publish
Publish the site and open the live page. Framer's help notes that some embedded scripts need extra wrapping to work, so always test the form on the published site.
3. Test it
On the published page, send a message, then check that it arrives by email and is listed in the Inbox in the app.
Domain restriction
If you turn on domain restriction (Starter and up), send a test message from the published page. The Embed component may not send the request from your site's own domain, and a domain that is not on the list is rejected with a 403 that names it. Adding that domain lets every page on it submit, so you may prefer to leave domain restriction off for this form.
Framer's built-in forms
Framer also has its own form components. This guide is for when you want your own HTML form handled by Static Forms, with its spam filter, Inbox and integrations. CAPTCHA widgets and their field names are in the plain HTML guide.
Troubleshooting
| What you see | Why, and what to do |
|---|---|
| 401 "Invalid API key" | Check that the apiKey value matches the key on the form's General tab, with no extra spaces. |
| The form is cut off | Make the Embed component taller. |
| A field is missing from the email | Give the input a name attribute. |
| 403 "Submission rejected: Domain … is not in the allowed domains list", or "Unable to determine origin domain" | Domain restriction is on for the form, and the embed did not send the request from an allowed domain. See the domain restriction note above. |
| No email arrives | Check your spam folder, then the Inbox in the app: if the submission is listed, the problem is delivery. |
FAQ
Does this work on the free plan?
Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.
How do I keep spam out?
Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.
Is it safe to put the API key in my HTML?
Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard.
Do I need a Framer plugin or code component?
No. The form is plain HTML with a short script in an Embed component. It posts to https://api.staticforms.dev/submit and Static Forms receives the submission.
