Forms

Using Optional Form Input Properties in Framer

Using Optional Form Input Properties in Framer

Using Optional Form Input Properties in Framer

Joseph

·

5:19

·

13K views

·

Jul 8, 2024

About this lesson

We’ve taken a good look at the default properties for an input like the type, name, and placeholder — but there are quite a few optional properties that can really come in handy. I’m going to go a little bit out of order, but let’s take a look at how each optional input property works.

https://www.youtube.com/watch?v=k71GT-33IAA&t=0s Intro

https://www.youtube.com/watch?v=k71GT-33IAA&t=18s The Auto Fill Property

https://www.youtube.com/watch?v=k71GT-33IAA&t=41s The Auto Focus Property

https://www.youtube.com/watch?v=k71GT-33IAA&t=65s The Value Property

https://www.youtube.com/watch?v=k71GT-33IAA&t=119s The Step, Min, and Max Properties

https://www.youtube.com/watch?v=k71GT-33IAA&t=175s The Hidden Property

https://www.youtube.com/watch?v=k71GT-33IAA&t=230s Linking your CMS to a Hidden Value

https://www.youtube.com/watch?v=k71GT-33IAA&t=282s 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:00we've taken a good look at the default 0:01properties for an input like the type 0:03name and placeholder but there are quite 0:06a few optional properties that can 0:07really come in handy I'm going to go a 0:09little bit out of order but let's take a 0:11look at how each of the optional 0:13properties 0:14[Music]0:16works the first one on the list is 0:18AutoFill which gives some control over 0:21whether or not the browser or a password 0:23manager should try to autofill just be 0:26aware that every browser is different 0:28and eager to help their users to 0:29autofill the right info most browsers 0:32will look at some combination of the 0:33input type name and text label to figure 0:36out what info to autofill so keep an eye 0:39on how you're labeling things next we 0:41have autofocus which will focus the 0:44input immediately when the page loads as 0:46if the user clicked on it or tabbed to 0:48it this can be handy if the primary job 0:50to be done on the page is filling out a 0:52particular field since it'll save 0:54visitors a step just be careful if your 0:57form is below the fold because it could 0:59cause the page to suddenly jump down and 1:02make the visitor feel out of control 1:04while we can use a placeholder to give a 1:06visitor an example of what we expect 1:08them to type in a field the value of the 1:10field is still technically blank until 1:13something gets typed in sometimes rather 1:16than a placeholder we may want to give 1:18the user an actual default value super 1:22common example is a default order 1:25quantity this number field has a 1:27placeholder of one but again if the the 1:30visitor hit submit there's no actual 1:32data here so I can click the plus button 1:36choose 1:37value and set a value of one you'll 1:41notice the text color changed from Gray 1:42to White because this one isn't a 1:45placeholder it's real data as if the 1:47user typed it themselves and unlike a 1:49placeholder a default value can be 1:51incremented with the stepper controls on 1:53a number input on that note now is the 1:56perfect time to talk about the next set 1:58of properties with number inputs most 2:01browsers give us these stepper controls 2:03to increment the value up and down and 2:06by default the number increments or 2:09decrements by one this is where the step 2:12property comes in we can choose the size 2:14of the increments and make it a whole 2:17lot easier to step through larger values 2:19you'll notice that there's really no 2:21limit to how high or low the numbers can 2:23go you may be thinking well zero is the 2:26bottom but it's not number inputs 2:29actually support negative values so to 2:31impose some limits here we can add a Min 2:34or Max property I'll add a 2:37Min and leave it set to zero to prevent 2:40negative numbers if we preview this we 2:43can see we're all good technically 2:46typing a value can go outside the Min 2:49and max range but validation will kick 2:50in and let the user know that something 2:53needs 2:54fixing this last one is probably the 2:56most advanced of the bunch but you'll 2:58know if you need it sometimes we may 3:01want to add a bit of data to each form 3:03submission without the visitor having to 3:04see it or deal with it at all for 3:08example we might want to know which blog 3:10post the visitor was looking at when 3:12they signed up for our mailing list do 3:14we want to ask them to type the entire 3:16title of the blog post probably not so 3:19let's split this into two parts first 3:21we'll create an input and have it 3:23populate the blog title automatically 3:26second will hide the input and the user 3:29won't have to look at it think about it 3:31or Worse try to edit it I'll start by 3:35selecting the form and clicking the blue 3:38plus icon to add a new input then choose 3:42text I'll fix some of these 3:45properties then I'll add the value 3:47property so we have a place for the data 3:49to populate now here's where the magic 3:51happens since this is a CMS page we can 3:54set a variable for this property that 3:56populates automatically from whichever 3:59CMS item is being viewed I'll set the 4:02value to pull in the 4:03title and there we have it the same 4:06title that's being pulled into our 4:07heading at the top of the page is also 4:09being pulled into this form input now 4:13all we got to do is hide the input by 4:14clicking on the plus button and choosing 4:17hidden you'll notice there's still an 4:19extra Gap here but that's not from the 4:21input itself it's from the label frame 4:24around it to delete that label frame 4:26without deleting the input inside of it 4:27we can right click and choose choose 4:30remove stack there we go now when this 4:33form is submitted the data we receive 4:35will contain the title of the blog post 4:37being viewed when the visitor decided to 4:40join our mailing list that's it now you 4:43know how optional input properties like 4:45autofill and autofocus work how to add a 4:48default value to an input and how that's 4:51different from placeholder how step Min 4:54and Max works for number inputs and how 4:57hidden inputs can be combined with your 4:59CMS to get more info with each 5:02submission now head to framer and start 5:04using optional input properties with 5:06your forms

TeachesForm Inputs

Also coversCMS Pages / Dynamic Content Frames Min & Max Sizing Stacks Submit Actions Validation Variables

Watch on YouTube ↗

‹ Creating Custom Form Submit Buttons in Framer

The New Framer Marketplace ›

More in this topic

Form Input Variants and Validation in Framer

Form Input Variants and Validation in Framer

Forms18K views · 1 year ago

4 Ways to Update Form Status in Framer

4 Ways to Update Form Status in Framer

Forms19K views · 1 year ago

Creating Custom Form Submit Buttons in Framer

Creating Custom Form Submit Buttons in Framer

Forms18K views · 1 year ago

Introducing: Framer Forms

Introducing: Framer Forms

Announcement93K views · 1 year ago

Framer Update: Forms

Framer Update: Forms

Framer Update36K views · 1 year ago

Creating your first form in Framer

Creating your first form in Framer

Forms108K views · 1 year ago

The Input Component

The Input Component

Forms18K views · 3 years ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.