Vigyata.AI
Is this your channel?

Design Custom Native Forms in Framer (NEW UPDATE)

890 views· 20 likes· 17:50· Jun 24, 2024

🛍️ Products Mentioned (1)

New form builder has just been released inside framer natively. This allows users to create fully functional forms without the need of any third party integration. In this video I show case how to build or create a form, customize it and collect data submitted by the form by email and google sheets. Topics of discussion in video: Intro: 00:00:00 Adding a form and looking at the structure of layers of form: 00:00:20 Different categories of input in forms: 00:02:10 Browser Validation and Types of Inputs: 00:02:25 Customizing form and adding inputs: 00:04:00 Customizing design of the form: 00:09:44 Collect data from submitted form in Email and Google Sheets: 00:14:00 Adding Redirection to Form: 00:16:08 Outro: 00:17:24 I walkthrough each step of new features of this new Form builder in Framer. What are different input types allowed and show case all possible variants. I also show case how to redirect to a thank you page or some other page when form is submitted. This is a very detailed step by step tutorial to creating forms in Framer natively and then customizing the form. I showcase how to design modern looking forms. If you have any questions leave in the comments sections and I will get back to you. Source file link: https://framer.com/projects/new?duplicate=kp9U3V1t28PKFXEkwJ2f Want to learn more about Framer? Subscribe to my channel. https://youtube.com/@AverageDesignDude Learn more tips and tricks on Framer on my Instagram channel below https://www.instagram.com/averagedesigndude/

About This Video

Framer just dropped a new native Form Builder, and in this video I walk you through building a fully functional custom form without any third‑party integrations or code. I start by inserting a form, then I break down the layer structure (the parent form frame, the label stacks, and the inputs) so you actually understand what you’re editing. From there, I run through the main input categories—text inputs, selects (dropdowns), checkboxes, and radio—plus the really handy native browser validation for things like email, number, phone, URL, date, and time. Then we get into the fun part: making it look modern. I show how I style labels and inputs (placeholder color, text color, focus border color), then copy/paste styles across fields so everything stays consistent. I also customize the checkbox colors to match my theme, and I tweak the submit button using Framer’s built-in component variants (default, hover, pressed, loading, success). Finally, I wire up actual form functionality: sending submissions to email, pushing data into Google Sheets, and redirecting users to a thank-you page after submit. End result: a clean, on-brand form that collects leads directly inside Framer.

Frequently Asked Questions

🎬 More from Average Design Dude