How to Create and Add a Form to your Framer Website

Framer have just unveiled an exciting new addition to its platform: Native Forms.

This long-awaited new feature brings a robust set of tools for creating and customising interactive forms, offering users unprecedented flexibility and control over their design and functionality.

In this post we’re going to look at all these new updates and end with a video tutorial to learn how to add and customise forms on a Framer website.

The new Forms feature boasts over 10 input types, allowing designers to craft a truly unique and tailored user experience. With a freeform editing approach, users can now design their own inputs, focus states, checked states, loading states, success states, and much more. This level of customisation ensures that forms can be seamlessly integrated into any design system.

Input categories

Forms include four input categories: Text, Checkboxes, Radio Groups, and Select Controls. And within the Text category alone, there are eight different types available, including standard text, text area, email, number, phone, URL, date, and time inputs. This comprehensive range of options allows designers to create forms that can handle virtually any type of data collection scenario.

Data management

Users can also choose to send form data via email, connect directly to Google Sheets, or set up custom webhooks for more advanced integrations. Security has also been a key consideration, with built-in spam protection, rate limiting, and fallback email functionality to ensure that forms remain secure and reliable.

Form design & user experience

Framer has also introduced a range of features to enhance the user experience and streamline the form submission process. Designers can now customise email content - including recipient details, subject lines, and body text. Post-submission actions are also fully customisable, with options to redirect users, display overlays, or update the form or button states.

As part of this release, all standalone input components available within the Insert menu have all been refreshed, ensuring that users have access to the latest design elements across the platform.

With this comprehensive update, Framer continues to push the boundaries of what's possible in web design, offering a powerful and intuitive toolset for creating sophisticated and interactive forms that seamlessly blend design and function.

Watch the full tutorial to learn how to add a form to your Framer website: