Framer Update, Forms

Framer Update: Forms

Benjamin

16:32

36K views

Jun 20, 2024

About this lesson

We’re incredibly excited to introduce Forms. Enjoy 10+ input types and a uniquely freeform editing experience. Design your own inputs, focus states, checked states, loading states, success states, and so much more. Send your data via email, connect to Google Sheets, or set-up your own custom Webhook. Forms in Framer are secure too, with spam protection, rate limiting, and a fallback email. We think you’ll love it. https://framer.com/updates/forms

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and this is forms 0:04in framer there's a lot to cover so 0:08let's get right into it to add new forms 0:11head over to the insert panel navigate 0:14to the form section here you'll find 0:17input components for email signups our 0:20traditional embeds and right on top our 0:23new form Builder I'll drag and drop this 0:26onto my page to add our first new form 0:30and out of the box you get three inputs 0:33ready for you to customize name email 0:36and location a text input an email input 0:40and a select control let's have a look 0:43at the structure first within the forms 0:45you get a bunch of labels these labels 0:49are just stacks and they serve to 0:51connect the text layer within to the 0:53matching input this is great for 0:56accessibility and it also means people 0:58can click the label to Focus the input 1:01next let's start customizing I'll select 1:04the name input and let's first update 1:06the color I'll set it to 1:10Black then let's customize the type 1:15face I'll pick a custom type 1:18[Music]1:25face then let's change the fill color to 1:29white 1:32and then I'll go ahead and remove the 1:34border and replace it with some stacked 1:37Shadows I'll speed up this section but 1:40the summary is I'm adding three shadows 1:43one as a solid outline one as a solid 1:46drop shadow and one as a soft drop 1:49shadow all right and this is what we 1:52have so far just some lightweight 1:56customization and let's do the same to 1:59the lay 2:00I'll select the text layer here and I'll 2:02be sure to give it the same custom type 2:05face and now that we've customized this 2:08first input how do we bring over these 2:11styles to the other inputs a simple way 2:14is to right click and copy the style and 2:19I'll often use the keyboard shortcut for 2:22this which you can find in the 2:25menu and then we can paste this style 2:28onto the other 2:32inputs and I'll do the same for the text 2:35layers using the keyboard shortcuts and 2:39finally the select control as well by 2:42making all these elements directly 2:45selectable on a canvas we've achieved a 2:48uniquely flexible editing experience for 2:51example to split up our name input I'll 2:54select the label command D to duplicate 2:58double click on the text label and write 3:01first and last 3:03name then I'll click on the first input 3:07and I'll update a few properties here 3:10the name is what we'll see in the data 3:12later when you submit I'll update the 3:16placeholder and I'll make this input 3:18required then I'll select this input and 3:21I'll do the same thing 3:24here and now if we want to change the 3:27layout and bring these on the same line 3:30I'll select both and I'll wrap them in a 3:34[Music]3:37stack then I'll quickly set overflow to 3:40visible to ensure it doesn't clip our 3:42shadows and I'll change the 3:45direction I'll also update the Gap and 3:48just like that we've adjusted the design 3:51of our form and I can maybe select the 3:54form and make it a bit wider to give our 3:57inputs a bit more room 4:00so forms in framer are easy to customize 4:04and uniquely flexible when it comes to 4:06making them your own now I'll go back to 4:08our simpler version to talk about Focus 4:12States very similar to hover effects and 4:16loop effects we can select our input and 4:19add a focus effect this allows us to 4:22customize the focus state with some 4:25lightweight styling like fill border and 4:28Shadow here I'm swapping the default 4:31border with a shadow with a one pixel 4:34spread and a blue color replacing the 4:37Shadows we designed earlier and using 4:40the copy and paste style shortcuts I can 4:43bring over these Focus effects to the 4:46email and location inputs and instead of 4:49copy and pasting Styles I can also multi 4:52select all of these 4:54inputs and for example add a transition 4:57to our Focus effect and there we go now 5:02before we give this a preview let's 5:04quickly cover the submit 5:09button the submit button is just a 5:12normal component with variance and you 5:15can map these variants to the form State 5:19using this UI here now let's doubleclick 5:23on the button to start customizing here 5:26we can see all of the variants and by 5:28default we give all of the variants you 5:31might need for your form and here we can 5:34make a few edits I'd like a bit of a 5:36darker color and I'll update the hover 5:39State as well then I'll select the text 5:42labels in the default success and error 5:46variants and I'll set them to the same 5:49custom type face we've been using in our 5:52form this time using a medium weight and 5:56if you would like you could customize 5:58everything within the these variants 6:01down to the actual spinner which is just 6:04a conic gradient with a loop effect for 6:07now I'll go back to the homepage and see 6:10how this looks in 6:12context I think we're almost there maybe 6:15I'd like to go back and add a subtle 6:18Shadow to the 6:21button and I think we're good to go so 6:23let's give this our very first 6:27preview here we can see our Focus States 6:31our text color that we changed from the 6:33placeholder color our custom 6:38fonts and our select control which we'll 6:42talk about more later on in the video 6:45now we've customized our simple form but 6:47it doesn't do anything yet when you hit 6:50submit so let's talk about 6:55connectivity sending your form data 6:58somewhere is incredible ly easy with the 7:01form selected head over to the form 7:04properties and here we can pick between 7:07sending an email using a web hook or 7:10sending our data to a Google sheet I'll 7:14go with email first and here we can 7:17customize the email details like the 7:20email recipient the email name the 7:24subject and even the email body which is 7:28some copy proceed reading the form data 7:31that's pretty much all we need to do so 7:34let's go back to the preview here fill 7:37in our form again and then see what 7:42happens this time I'll hit submit and we 7:45can also see the loading and thank you 7:48states of our button and would you look 7:50at that I've got mail this is the email 7:53framer will send me anytime I get a 7:56submission on a form on my site 7:59with all of the messaging customizable 8:02and the data presented in a need list we 8:06support multiple destinations so you can 8:08send your data to multiple places at 8:11once but for now let's remove email and 8:15have a look at connecting it to Google 8:18Sheets I'm then presented with this 8:20simple pop out where we can connect it 8:23to a sheet and we can define a fallback 8:26email so we can let you know when their 8:29services stop working so let's hit 8:32connect and start the authentication 8:35flow if you have multiple accounts first 8:37you have to pick one of your Google 8:39accounts then you might have to sign in 8:43and finally give us access so we can 8:46send the data to a Google sheet then 8:49back in framer we can now hit add to 8:52create a new sheet which we can give a 8:55name here I'll just call it demo and 8:58then hit create create and that's all 9:01there is to it now let's give our form a 9:05preview fill it out 9:09again and then have a look at the Google 9:13sheet there's an easy way to access our 9:17sheet right from within framer I can 9:20reselect the 9:22form open the pop out and then clicking 9:26here will open the sheet and low and 9:29behold there's our submission data 9:32automatically added to our Google sheet 9:35ready for us to export or connect to 9:38other third-party services so that's how 9:41you can connect to Google Sheets next 9:45let's talk about different input 9:48types when you select a form you get a 9:51plus icon right here on the canvas and 9:53clicking it allows you to easily add new 9:56inputs to your forms for example we 9:59could add a checkbox to this 10:02form or a radio group while there are 10:06four highlevel options in this menu the 10:09generic input option supports many 10:11different types of inputs right from 10:14within the property panel and each input 10:17type has a unique set of properties you 10:20can access by clicking on the input 10:22header like the select control where you 10:26get an array of options allowing you to 10:28design your drop- down menus for example 10:32I can quickly add two more cities I need 10:36a value that's for the data and then a 10:39visual title that will appear in the 10:43menu and then we can even add a little 10:46line to act as a separator allowing us 10:49to create grouped 10:54menus or the checkbox which also has a 10:58few unique proper propes like a checked 11:00State and a checked effect which is very 11:05similar to the radio group with the 11:08biggest exception being that all radio 11:11elements need to have a shared name 11:13value so all of these input types are 11:16similarly customizable and flexible they 11:20all have a focus State and inputs like 11:24checkbox and radio also get a checked 11:27State let's have a look at a few more 11:30examples of these different types of 11:33inputs we also support date and time 11:36inputs which you can access through the 11:39type dropdown on any generic input we've 11:43ensured these get consistent 11:44placeholders across various browsers and 11:48we give them a nice default icon inputs 11:51like date and time are useful for events 11:54or any type of scheduling and booking 12:00next is the select control we already 12:03took a look at this one but this is a 12:06more realistic example of how it could 12:08be implemented in a custom 12:14form next up another example of a radio 12:18group what's especially useful here is 12:21that the labels are also just text 12:23layers and they will be clickable out of 12:26the box this also applies to checkboxes 12:29and you can even add inline links here 12:32with complete support for link Styles 12:35color styles and text Styles next up 12:38let's have a look at one of my favorite 12:40form features component support you can 12:43select any label containing the text 12:46layer and an input and turn it into a 12:49reusable component this not only allows 12:52you to use variables it also allows you 12:55to design your own focus and blur States 12:59here I've designed a custom Focus state 13:02with a placeholder that animates into a 13:05label just using a single text layer and 13:08by selecting the input and dragging from 13:11the interaction connector we can Define 13:14our own focus and blur State and switch 13:17to Any Given variant we can even take 13:21into account whether or not a user has 13:23typed in the input or in other words 13:26does this input have a value or or not 13:29so on Focus I'll switch to the second 13:33variant and this is where things get 13:35interesting because on blur we only want 13:38to switch to the third variant when the 13:41user has typed in the input so when the 13:44value is set otherwise we simply want to 13:47switch back to the default variant so on 13:51blur when the value is empty three 13:54interactions three variants let's go 13:57ahead and give this a preview 14:00now when we focus the input we switch to 14:04the focus variant and our placeholder 14:07animates into a label and if we unfocus 14:11or blur the input after having typed in 14:15the input we properly switch to the 14:18third variant ensuring the value and the 14:21placeholder never overlap so you can use 14:24components to design your own 14:26interactive States next let's talk about 14:29what you can do after having 14:31successfully submitted a form here I've 14:34designed a custom thank you page with a 14:37few simple appear effects I can use the 14:39form to automatically redirect to this 14:42page after a successful submission with 14:45the form selected head over to the 14:47property panel and you'll find a 14:49redirect property here you can select 14:52any one of your pages I'll select the 14:55thanks page and that's all there is to 14:58it 14:59now when we fill out the form we will be 15:03automatically redirected to the thank 15:06you 15:08[Music]15:14page and there we go this gives you a 15:17lot of control but what if you wanted to 15:20just update the form itself we have an 15:22option for this as well now by default 15:25we'll update the button state but you 15:27can also turn your entire form into a 15:30component and then use variance and 15:34interactions to switch to a different 15:37state on submit so here I've removed the 15:41redirect and I can select my form and by 15:44dragging the interaction connector I can 15:46tell the form on success switch to my 15:50second variant in which I've just hidden 15:53all of the inputs and designed a custom 15:55thank you 15:57state so so now when we fill out the 16:00form we'll stay right here on this page 16:04but our form will instantly hide and 16:07instead we'll switch to our custom 16:10variant and that's pretty much it for 16:13this video we're super excited to share 16:15forms with you thank you so much for 16:18watching and stay tuned for more updates 16:22coming soon

TeachesForm Inputs

Also coversAppear Effect Color Styles Component Variants Components Form States Hover & Press Keyboard Shortcuts Links Loop Effect Redirects SEO Audit Stacks Submit Actions Text Styles Transitions & Easing Typography Variables

Watch on YouTube ↗

‹ Introducing: Framer Forms

Creating your first form in Framer ›