Create custom forms in Framer

Forms and Framer have had a somewhat limiting relationship in the past. Limited input fields, a handful of integrations, and a bit of a struggle to customise. But fret not! There's a brand new version of FramerForms in town, and today, I'm here to show you how you can create custom forms in Framer effortlessly.

1. Get FramerForms

Head over to framerforms.com and grab the latest version of FramerForms. This updated tool introduces a new dashboard and onboarding process, complete with a variety of templates to choose from. All you have to do is click copy!

2. Copy Component

Back in your Framer project, paste the copied component of your choosing. Ensure everything is within a frame, and add a submit button. Now you're ready to make it your own.

3. Form section

Make a frame around your form and create it as a section; name the section "Form". Click on your submit button and choose the section named "form".

4. Add Form Field

You can edit the type of form field by clicking on the form file and clicking type. Alternately copy and paste blocks from the dashboard. Customize the fields, set them as required if needed, and tweak the names and formats.

5. Styling

Customize the styling—change placeholders, colors, fonts, borders and add icons. FramerForms keeps the styling consistent, making it easy to create a cohesive design.

7. Submit Button

In the submit button component, paste the link where you want to send form data. For example, use a tool like Formspree for free form submissions. Customize the submit button styling, set redirects upon submission, and tailor it to your liking.

8. Customise Submit Button

Further customize the submit button—set redirects upon submission, style it to match your design preferences, and make it stand out.

Creating a custom form in Framer has never been this straightforward. Whether you need a complex multi-step form or an expanded contact form, FramerForms has you covered. Ready to try it for yourself? Head to framerforms.com and unleash the power of custom forms in Framer. 

Happy designing!

Ryan Hayward 🚀