The Basic Form Components: Webflow Forms Masterclass

what i'm just a grown man eating yogurt hello and welcome to another episode of webflow and code where i teach you the underlying code you're writing a webflow yes i'm still making webflow videos i've just been enjoying myself recently exploring pine grove which is a new tool that i've just been playing around with and learning i also started a podcast with my good friend chris adams where we talk about all things technology so those things have been kind of eating up my time recently as well as just being generally busy with client work this episode will be part of a series which um delves into everything to do with forms and it's been a series i've been meaning to do recently it's been quite popular on my channel discussing forms and kind of what they do and the workings behind them so today will be a introduction to the different form elements on webflow what you can do with them what the intended use for them is and then we'll be previewing the code and just taking a look and understanding what what the html actually means and i hope that the series will go right through to actually using the forms of javascript and then finishing off publishing to a back end whether it's php or whatever and kind of understanding what is actually happening when you submit a form so if that sounds exciting to you then hit the subscribe button because like i say this will be a series and if you want to be notified when the next episode comes out then you must hit the notification bell icon so sit back relax and enjoy the first in a series of forms [Music] before we start i just wanted to announce that this week's episode of that tech show is featuring joe krug that texture is my podcast which you can find more information about that tech dot show so the first things first here we have a form element a form block rather and what it contains is a form a success message and an error message and i got that through the component pane and you've got various different elements here so let's just start by looking at the raw form if i preview this and inspect the code what you'll see is that we have a form um of course and we have labels that label and an input and a submit button you can think of a form as kind of wrapping a data set so i've explained this in the past um you can have multiple forms on a page you can have multiple forms on a site it's it's wrapping a set of information that you want to send to the back end right and in the default case it's going to be web flow but like i say later on in the series we we're going to learn to kind of post it elsewhere and so the form represents a data set it could be i mean in this example it looks like a contact field it could be a sign up form for your email list any sort of set of data that you want to send to the back end you use a form if you have a different data set then i would advise you having a different form if say you've got a contact form and a sign up form for an email address on your website use different use two forms don't try and bundle them together don't try and do anything clever like that really a form is a set of data that's sort of self-contained in some ways so looking into the the markup of this form you can see that the form has a name and this will be something that the you know the um webflow's backend will register as obviously the name of the form now they've got an id here and some various other things this is just web flow adding things in really this is nothing um that is essential for for the markup of a form so it's just the name and the and the id then we have a label and once again these data w things are just junk that webflow ads that's doing things in this back end i'm just previewing this actually this could be removed in the in when you publish it so um but the important thing is on the label is this four attributes so this is so super super crucial and i think webflow does a terrible job at sort of communicating this and also enabling you to to do this because i've never been able to um achieve this but you every single form element needs a label this is an accessibility thing and the way it does that is that whatever text right now its name whatever um whatever label this belongs to the four attribute represents the id of the element that it's representing so in this case we've got form so there must be an input element with an id of name somewhere there's the id there and the important thing to remember that i i continue to say is there should only be one instance of an id on your page you should not not that you cannot because absolutely you can because again web flow's not doing a very good job at um communicating this there can only be one instance of an element no matter what it is of with an id of name on this page it can be elsewhere there can be an element with an id of name on another page but there cannot be another element with an id of name on this page that's why you can confidently say this 4 represents this id now the name attribute that is the the the labeling let's say of the data that's going to be sent to the front end so whatever is whatever the value is of this input element is going to be recognized as name and that's how we do that i think i think webflow does something slightly clever and actually take the actual text that you insert into the label um as the as the name um but what's really happening is the name attribute is is going to be sent there so once again yet we have a we have a label with a for of name which represents uh which reflects the id of this input element the name like i say is for the back end and we've got a max length here of two five six i mean that's just a default value and i don't believe you can actually change that inside of webflow but that's obviously an attribute you can do you can set a max length if you were to go to input element html if you to look at some documentation here documentation for the input element if we scroll down we can actually see we can see all the different types that it can be so it can be type let's just jump back here and pay reference to that this is type text so there can be type check box it could be type color it can be cut type date date time local and and you can see a representation of here's how it's going to make how it's going to render it could be a type file you can then you can actually add these in as attributes if you want them so you've got lots of different types here and then we look at the attributes we've got accept which hat which is for a type file so we're not really concerned with that right now but you know if it was um an input of alt uh with image then you can have an alt let's scroll down to well let's look at all we've got autocomplete focus uh disabled form which actually associates the form element to a form elsewhere on the page so actually that's new to me i actually only thought that was available on the submit button but it looks like you can you can have a form element anywhere on the page and with the form attribute you you can associate it with an id of the form scrolling through is it max length there's the one we saw minimum length i'm not going to go through all these but you can see that if you just type in html input you can see what it can be and what different types of attributes you can use on your input so jumping back in here then this is the default max length two four two five six and once again we have an input of type submit webflow doesn't have the idea of buttons actual button elements which is kind of strange because they're actually very very crucial for interactions on a website but it's perfectly okay to have an input of type submit and once again normally these data things are to do with webflow we're not really concerned with these data attributes but class is obviously something we're familiar with and the value is obviously the text that goes within there if you would if you needed to have some sort of html inside of um your input inside of your button then you would need to use a button um because you can only put text values inside of this button so you'd use a html element and you'd create a button and then then you can put in some graphics some icons some different text or whatever so that's the bare minimum kind of form there i don't think there's anything more to say on that um you can obviously change these uh waiting text you know button text you can obviously change all these things inside of the form so looking into the settings of a form i've gone over this in a previous episode but just to quickly run through of course you can add an id right now it's been given the id of form if we if i remember correctly you can show the state and this allows you just to play around with the different states so you can style them how how you'd like all this is doing is on submit webflow is hiding the form and showing either success or error but depending on these things there's nothing more to it than that you can see these rendered in the preview just as hidden elements the form name again giving it a form name where it redirects to and i would i would suggest watching my other video on the forms we kind of go into a little bit more detail around this and the different method types um and the actions and various things like that on the on the label you can't really do anything but on the input you can have a name and an id and a name and various things like that once again i've never been able to drag an input in and then drag a a form element in here so if i drag an input in here and then webflow tells me that it once i drag an input and then drag a label it should automatically associate those things so if i just preview that and have a little look i can almost guarantee so there's no four attribute on that and so i would i would need to say form uh four sorry field i mean i can change that to whatever i want but i would i would need to change the four attribute of the label to field but unfortunately it's a reserve name so i can't do that webflow sort it out what is going on there for again in my other video i explained what you can do if your design does not show the um doesn't it doesn't doesn't want to show for whatever reason the the labels now the video goes into that but long story short you can use the sr only class so that's the kind of default form let's just remove those there and now let's dig into the actual elements the different types of elements themselves and i can kind of explain them so an input type like we like i said the input type can be very very lots of different types um and you can even select those in in this plane is obviously equal to text when we look at the elements that are the types that are available um scrolling down text that's the default email which can only accept email and there's obviously plays into the form validation that happens password password is nothing more than a text field that obscures the the the actual letters into dots so example of that would be if we then preview this and go like this of course it's obscured but by simply changing the type to text we can see the password and that's all if you want to do some javascript that one you want to show and hide what the password is for whatever reason all you do is change the type to text toggle it between text and password so nothing more clever than that the phone number is an a new type of um input field because what we would in the old days what we what typically people would make the mistake of is actually if you want a telephone number you would put it as a number but what you'll see is is that again if we preview this you'll see the up and down kind of things here and you do some css to hide them when it was not necessary you you would have should have put a text plain text and then you can use the pattern pattern attribute which actually you can put in regular expressions to actually prevent or allow certain types if you only wanted numbers then you would do something like this you know and various things like that it's quite a clever way to to only rest to restrict what a user can actually put into the um to the input field and then finally we've got number which as i said well just to wrap up then so the phone is actually a new one called tell which obviously only accepts telephone numbers and their number is the number field and once again i would i would encourage you to you know search um well let's have a look at number for instance number you know i would encourage you to look into these and actually see what attributes are available for that input type you might actually find that there's some clever things you can do stepping for instance only allows you to add or remove plus 10 or 5 or 3 whatever take a look at the documentation because i think it's really really powerful what you can what you can do with that stuff as long as you know how to read the documentation that's it for the text element so let's dive into another input type and kind of just explain it so we've got a file upload which once again is just an input type of file right um this is like a paid for feature but i i don't know whether this is actually restricted but there's you could put an input type of file and have that you know play a part in your in your form um again it's just an element of input with type of file nothing more complex than that text area once again um is very very sim similar to an input field of type text just so you can have multiple lines and multiple columns so you don't really get much in the way of settings here but i encourage you to look at the documentation because i know there's a lot of things you can do with a text area oh it's a text area it's not an input type so there we go attributes you can auto capitalize you can auto complete auto correct auto focus columns disabled form max length all this stuff might allow you to enhance what you're doing with the the text area looking at the next form field now check box and radio i think these two kind of come as a pair because often people actually get quite confused with them so a check box is a set of elements so you can you you'll have multiple um check boxes as long as each of those check boxes have the same name so let's you know this is the default name of checkbox if i create multiple check boxes so as long as i have the name the same name of uh the same name they all belong together and they they get submitted as a of the name check box i mean that's a terrible name let's use a let's use a a realistic example here contact preferences for instance uh and if we change the name to contact preferences on both of these and then this one with also a name of contact preferences you could have email you could have postal or telephone or whatever and then this will get sent up as one sort of um entry in the database to say their contact preferences are checkboxes are good for multiple values of the same grouping of of elements radio buttons on the other hand are a set of elements where the user can only select one of the input type so a good example of this would be uh gender or something like that uh male female other and you know you might provide another one there for different types of genders that would be if you only only want the user to select one of that group of elements so you can make these look however you'd like an example of this where you might not know that it's an input would be a tabs component for instance where once you select one tab it shows the content of of the that represents that tab when you select the other tab it represents the content of that tab technically you could make that with pure html and css with zero javascript because the user can only select one item of those tabs at any one time and you can use a radio button to do that there's a website which i've seen that i can't find just just now actually shows you a bunch of components menus various things like that that they just use form elements with no javascript so it's quite clever what you can do but the important thing to remember is check boxes are multiple entries for a set of a set of data and then radio buttons are a single entry for a set of data looking at the re how the radio button is rendered taking a look at this so here they've wrapped the entire thing in a label and they've not used the for attribute which is also valid html so if you don't use the form attribute then make sure that you're wrapping your inputs within the within the label and it's of type radio so it's just an input once again of type radio and then they're linked all your radio buttons are linked with the same name so you must use the same name if and we can just demonstrate that real quick we've got two radio buttons here group name uh gender gender if we have a look at these but because they have the same name here and here it knows they belong together so we can only select one whereas here i can select multiple another thing to note about check boxes if you if you select on here and add an attribute to the check box the input the actual input itself you can tell it to automatically be checked so checked equals checked same with um check boxes has to be the actual input checked equals checked then when we publish that then you can pre-select them okay i guess a point to note is that if you want to you could make these required field but technically you're making it required by pre-selecting one value they can't then unselect that value so this is in theory creating a required field or required set of inputs just by saying one of them is checked jumping back into our fields a select box really there's not much there's not much to say about a select box you can obviously have multiple choices allowing multiple sets a different type of checkbox where you can obviously just select multiple examples if we take a look at how that's rendered it's just a select field and has a name and that's about it or an id if you're going to be using the field if you have a look at when we select allow multiple and how that changes the the select field if we look at the code then what you can see is uh there should be an attribute of multiple and that's all that is doing you're just adding a an attribute of multiple similarly now recaptchas i think this probably deserves its own episode episode but recaptures are a way of preventing bots um from submitting data into your form there's various different types i'm not quite sure what version webflow are using at the moment but it could be version two version three is actually a hidden bot that you don't see and it doesn't kind of clutter your page alternatively an option that i do is called a honeypot and what this does and you'll need to write your own javascript to handle the form which we'll hopefully get to in this series you have a hidden check box that is unchecked right in your javascript you prevent the submission of a form if this is checked so when you click submit so form on submit if this is unchecked so if checkbox is unchecked and i'm pseudo coding right now we get into this in another episode but i'm pseudo coding right now if this is unchecked then submit the form if it is checked then don't do anything the reason why that's effective against bots is that bots tend to want to fill out every single form element on the on the form page it just goes through them all and checks them all it's not 100 effective of course but what you might want to do is put something in it saying if you are a human ignore this checkbox so just in case a human does latch onto it or whatever then that they know to ignore that checkbox uh and you'd hide it with the sr only class which i'll link to in the card if you're interested in sr only and it's it's you know legitimate use cases then um this will be a perfect example for that so that's a honey pot and a way that you can defer bots from actually submitting the data on your page if you didn't want to use recapture or if recapture is confusing you i know you have to set it up with google and and register an application and all the rest of it so that's another way you can defer bots so finally we have a submit button which actually just an input of type submit as we've previously discussed and good thing is what we discovered earlier that actually all inputs can can have the form attribute and this this tends to suggest that you can have elements outside of your form and link to the submission of a form um from elsewhere on the page typically i would i've used that in the past of a submit button outside of the form when that button is clicked then you can use that so that's the only i guess nugget of information i can show on a submit button but in the context of webflow of course you can select the waiting text um and button text here if you did want to create your own button as i mentioned earlier you would need to go into your components here and not have any other submit buttons and just by the very fact that this is inside a form means that this button will be forever linked to your form and now in here you can put some svgs you know you can have other texts um and as long as it's of type equals submit then this will now submit that form so if we close that svg there now you can have graphics icons or or whatever in your in your um in your form and then if i preview you can see that if i click that then you'll get some um page valid uh form validation here so the last thing to note is you might want to watch my video on focus states i think having a focus state in your form is very very important so instead of explaining again here i'll direct you to my focus video where you can understand the importance of focus states in webflow so i hope this was useful episode 1 of this whistle stop tour of an introduction to forms if if you want me to go into any detail on any of those things i'll be happy to and include it in the next episode but in the next episode i think what we'll do is we'll start actually manipulating and listening to this form and and responding to this form with our own javascript so if you like this episode please hit the like button because that's the easiest way to let me know that you actually want more of this content and if you want to stay up to date with more episodes on forms and web flow then hit the subscribe button and generally this episode really is all about front end development and accessibility in particular so if you want to support the channel then you can support me over at patreon.com fake sam gregory and until next time happy no coding [Music] you

Channel: Samuel Gregory

Views: 550

Keywords: Webflow, HTML, CSS, JavaScript, Web, development, web, fundamentals, website, code, learn, coding, webflow, build, websites, nocode, no, codenocode, accessibility, seo, search, engine, optimisation, Basics, Learn, learning, html, web fundamentals, webflow masterclass

Id: 03gILCa0IMY

Length: 26min 8sec (1568 seconds)

Published: Wed Apr 21 2021