Creating Custom Forms

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:

function onSubmit() { // Do some things... }

<form onSubmit={onSubmit}> ...