Forms
Creating your first form in Framer
Creating your first form in Framer
Creating your first form in Framer
Joseph
·
10:59
·
108K views
·
About this lesson
The new Form Builder brings fully functional, interactive forms natively to Framer, without the need for any third party components or integrations. In this tutorial Joseph shows you how easy it is to build a form, style it, and publish it to the web without writing a single line of code.
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=0s Intro
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=21s Adding the Form Builder
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=35s Anatomy and layout
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=134s Input Categories
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=175s Text Input Types
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=292s Styling
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=350s Adding a Focus State
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=439s The Submit button component
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=495s Form States
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=517s Setting up a Success Redirect
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=536s Choosing Where to Send Submissions
https://www.youtube.com/watch?v=0uX6fJuVcmo&t=617s Wrap up
🌞 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:00the new form Builder brings fully0:01functional interactive forms natively to0:04framer without the need for any0:06third-party components or Integrations0:09in this tutorial I'll show you just how0:10easy it is to build a form style it and0:13publish it to the web without writing a0:15single line of0:20code to add a form we can head to the0:23insert menu go down to forms grab the0:27new form Builder and drag it onto the0:29canvas0:30boom we've got a default form to start0:32customizing let's take a look at the0:34anatomy of this thing one of the coolest0:36things about forms and framer is that0:38they aren't some rigid code component0:41they're completely free form no pun0:43intended which means you can lay them0:45out and style them with complete Freedom0:48at the top level we get a frame for the0:50entire form which comes with a vertical0:53stack layout applied by default which0:55makes a lot of sense this Frame also has0:57a few special settings for what happens0:59when a vis submits the form which we'll1:02talk about later on but besides that1:03this is a regular stack that we can1:05resize or reposition change the Gap1:09padding or even add fills borders and1:13shadows but we'll style this a little1:15bit later on within the parent frame for1:17the form we have a set of frames each1:19called label that group each input with1:22a text box again these labels are just1:25regular frames but you can probably tell1:27by the icon on the layer list that these1:28are a little bit special1:30the icon comes from the fact that in the1:32accessibility section of the properties1:34panel this frame has a tag called label1:37applied to it in addition to helping1:39with accessibility and SEO this label1:41element is also what makes the text1:43layer within it clickable to focus the1:45matching input element on that note1:48within each label frame we have a text1:50box and the input itself want to know1:53what's special about this text box1:55nothing it's just a text box do what you1:58want with it but I do recommend keeping2:00it where it is for the sake of2:01accessibility and SEO just know it's a2:04regular text box the input layer is2:07where the magic happens it also works a2:09lot like a regular frame but this is the2:12most special element we've looked at so2:14far before we dig into its properties2:16the first thing to know is that this is2:18one of four different categories of2:20input this happens to be a text input2:22but there's also select which is a drop-2:25down menu of options we set checkbox to2:28toggle one or multiple options on or off2:31and radio to choose a single item from a2:33group of options each category of input2:36has its own properties you can customize2:39but let's get back to this text input2:41because there's more to it than meets2:42the eye these inputs actually have2:44browser native validation to make sure2:46visitors add properly formatted text we2:49can tell the browser what to expect by2:51choosing an appropriate type for each2:53input we can choose between text for a2:56single line of text like a name text2:59area for multiple lines or even3:00paragraphs of text email which will3:03validate the format of an email address3:05and prompt mobile browsers to adjust the3:07keyboard number which validates that the3:10text is a number and prompts mobile3:12browsers to switch to a keyboard with3:14number Keys phone which will switch3:16mobile browsers to a phone keypad much3:19easier to type on URL which also prompts3:22mobile browsers to adjust the keyboard3:24date which will provide the browser's3:26native date picker and time which will3:29provide the browser's native time picker3:31I'll keep this first option set to text3:33for visitors to type their own name next3:36we have the name of the input which3:38determines how the submitted data should3:40be labeled when we receive it but before3:42you start making up crazy words because3:44you think you're the only one that will3:45see it the name of the input also helps3:47the browser figure out what info should3:50autofill if it's enabled we can also3:53edit the placeholder text that appears3:54before a visitors typed anything decide3:57if this field is required and add quite3:59a few other properties from the plus4:01button for our purposes we're going to4:03want a couple more inputs so I'll select4:05the frame for the entire form and click4:08the blue plus button at the bottom I'll4:11choose to add another text input this4:13one will be to write the body of the4:14message so let's change the text in this4:17little text box to say4:19message then we got to change the input4:21type to text4:22area change the name to4:25message and for the placeholder text4:28I'll just put hey4:30great another form field ready to go4:32let's go ahead and add one last input a4:35checkbox to allow folks to opt into4:37receiving our newsletter and what do you4:40know the default text is exactly what we4:42needed what are the odds of that while4:44we're at it we don't need this location4:47input so I'll grab that whole label4:49frame and press delete looking good now4:52we're ready to start playing around with4:54the style of things let's start with the4:56frame for the entire form I'm going to4:58give it a fill and create a super subtle5:01gradient from 8% gray to 6% gray next5:07I'll round these Corners to a radius of5:08about 20 cool now on to the input Fields5:12themselves the key takeaway here is that5:15you style these just like you'd style5:17anything else it's really just a hybrid5:18of a text box and a frame with a couple5:21small nuances one of which is that we5:23have two different text colors the first5:27is for the text that a visitor actually5:29types which I'll change to White so it5:31stands out and the second is the color5:34of the placeholder text which I'll keep5:36diminished slightly with a 60% gray I'll5:39also remove the5:40border and set the fill to white at a5:43super low5:44opacity that's pretty much what I'm5:46going for for when this field is5:48unfocused but we can also change the5:50effect of how the field looks when it's5:52clicked on and focused I'll click effect5:55and start by adding a fill that's super5:58dark blue6:00then tweak the Border color slightly to6:02match that same Hue of6:05blue then get a little crazy by adding a6:08shadow to create a little glow around6:09the6:11field I'll choose My Brightest6:14blue set the X and Y to zero to keep the6:17glow centered crank the blur way up to6:2130 and knock the spread down to -106:25there we go nice soft subtle glow the6:28last thing is adding a transition so6:30this glow can come in smoothly the6:32defaults are fine let's preview6:35it awesome we get the border and the6:38Beautiful glow fading in on focus and6:40fading away when we click away you can6:43get even more crazy with focus and6:45defocus states and interactions by6:46turning inputs into components but we'll6:49save all that for a different tutorial6:51so we've got the style of our first6:53input dialed in do we really want to do6:55it over again for these other two I6:58don't think so we you can right click7:00the finished one hover over copy and7:02choose copy style then shift click the7:06other7:06inputs right click hover over paste and7:10choose paste style done deal let's give7:13it a7:15preview7:17beautiful the last piece of the form is7:19the submit button which is already a7:20component right out of the box which we7:22can press enter to go in and edit within7:26the component you'll find Hover and7:27press States as well as VAR variants to7:29reflect the status of the form you can7:32Le these Styles as they are or style7:33them however you'd like I'll give the7:36primary variant a blue fill which7:39Cascades down to the other variants7:41except the hover and press States since7:43those already have a color override I'll7:45make hover a darker7:47blue and the Press State the darkest7:50blue cool the loading State already has7:53this sweet little animated spinner I'm7:55going to leave these alone and head down7:57to the error state8:00I'll change the fill to a nice solid8:04red and fix this text contrast by8:07changing it to a super light8:10pink there we go I'm happy with how each8:12of these looks let's head back to the8:14homepage if we scroll down the8:16properties for the submit button8:17component you'll see it has a special8:19section where we can map each state of8:22the form to one of the variants we were8:24just looking at by default loading and8:26success are already here and already8:28mapped and from the plus button you can8:31choose to add error and disabled States8:34and map them to the appropriate variant8:36on the topic of a successfully submitted8:38form we also have the option to redirect8:40the visitor to a specific page like a8:43thank you page let's select the top8:45level frame for this form head down to8:48redirect in the properties panel and in8:51my case I do have a little thank you8:52page to let visitors know that we'll get8:54back to them within 48 hours but we're8:57missing one crucial step deciding where9:00the submitted data actually goes with9:02the form frame still selected we get9:04three choices for where the submitted9:06data can be sent we can either pick one9:09or combine several we can choose email9:13which will send each submission directly9:15to our inbox web hook to connect with9:18third party services or populate data9:21directly to a Google sheet for my9:23purposes I'll keep it simple and choose9:25email then choose a name to display for9:27the sender9:29set the subject line for these9:31submissions and even add some body copy9:34with additional context simple as that9:36now each time the form gets submitted9:38we'll receive an email with all the info9:41forms also come with state-of-the-art9:43Spam protection that works its magic9:45quietly in the background behind the9:47scenes preventing unwanted messages from9:49Bots and crawlers let's publish and test9:52it out9:54publishing done open in the9:57browser Joseph10:00Josephs framer10:16docomo let's recap what goes into10:18setting up a custom form drop in the10:20form Builder delete what you don't need10:23add the inputs you do need set your10:26Field properties on the inspector adjust10:28the layout and style in to your liking10:30and choose where to send the data that's10:33it now head to framer and start creating10:36beautiful functional forms for your site10:43[Music]
More in this topic
7:52Form Input Variants and Validation in Framer
Forms18K views · 1 year ago
6:054 Ways to Update Form Status in Framer
Forms19K views · 1 year ago
2:11Creating Custom Form Submit Buttons in Framer
Forms18K views · 1 year ago
5:19Using Optional Form Input Properties in Framer
Forms13K views · 1 year ago
0:48Introducing: Framer Forms
Announcement93K views · 1 year ago
16:32Framer Update: Forms
Framer Update36K views · 1 year ago
5:04The Input Component
Forms18K views · 3 years ago