Creating Custom Forms
Build your own form.
Framer comes with a set of built-in form components, for example for Formspark, Typeform and HubSpot. But sometimes you need to build a specific form that posts to a custom backend.
Framer Code Components allow you to program arbitrary HTML and they are perfect to make custom forms. Once you have made one you can share and re-use it in any project.
For this exercise, let’s assume we want to build this basic HTML form:
https://gist.github.com/koenbok/30f0d0eea5e2e145d1822482d114bb83
In Framer go to the left panel and select Components → Code. Click the plus to create a new code component. We’re going to write this in basic React, because that’s what Framer uses:
https://gist.github.com/koenbok/8a71be59ef9aa63b7643461b0f8760ef
A few things to note here:
• The framerSupportedLayoutWidth tells Framer this is a fixed size component.
• The export is needed for Framer to pick up the component.
• The tags all have to be closed, it’s regular JSX.
Now if you go back to the canvas and drag the Form onto the canvas you’ll see:

It’s not pretty yet, but it totally works. You can now continue to style it. If you need to run some JavaScript on submit instead of a full POST you can just use a React handler: