Forms in Webflow: Getting the Most Out Of Them

hello and welcome to another episode of webflow and code where i teach you the underlying code you're writing in webflow today's episode is gonna be all about forms and some hidden aspects that you might not already know about so if you're excited about that then stick around [Music] i won't cover the basics of forms and webflow for that i will point you in the direction of webflow university what i'm looking to do in this episode is just cover some of the bases that i feel like they missed out on or some important points the webflow university kind of doesn't touch on and hopefully give you some more insight into into using forms and understanding actually what's going on so that you can be more creative and and and create do more interesting things with your form so let's cover the technicalities of a form if you're not really interested in that sort of stuff then i always leave chapter markers in each video so that you can kind of skip across to a section that you're more interested in a form is a way for users to send data from outside to your website or internet application it does this in two ways via get or via post and the difference is quite simple really a get request will send it via the url and you'll notice this in something like google uh if you go to google.com search um and and kind of search something you'll see in the url will place a question mark with a queue meaning query and then equals and then whatever that your query was what this is this is google sending itself a a get request via its search form and then the page and the and the code in the back end is then interpreting that uh query string in the in the back end and then producing the results before the page loads for google search to essentially work all it needs is is that and then each parameter is separated by an ampersand for the different types of information or different types of data with key value pairs and then this is great for kind of sharing state so for example if you're on an ecommerce site and you you're looking at a product and you select the size and the color uh what will what they'll often do is is write that quick write those selections or whatever to the query string uh in the url and then you can send that to your friend and when they visit that same url they'll be greeted with the same color and the same sort of styles because the code in the back end is reading those query strings and then modifying the page in order to sort of adhere to those those query string parameters it's important to say that those query string parameters are whatever the back end code expects it to be so you know in google's case it's q um in an e-commerce site it might be product and basic things like product or color so we can demonstrate this by if we have we've got our form here if we set the name to queue as an example um and we set the form to google slash search it's going to get because we want it to show up in the url whatever the value of this will be it will send it to google and navigate to that page and we hit enter and what we'll see is that there's our there's our query there so the other option is post and that is a much more secure way of sending data as it's not sending anything uh any information in the url once again the back end code needs to be written in a way where it's expecting a the data to be sent as a post just to demonstrate how a post could work as well so if we set this to post then we get to the page we inspect this element here and go to the network submit then you've got the fields of cue test dolphin false i wonder what that is that's probably something to do with security there's the data that we're sending via post so you can see how it's kind of hidden or not hidden but it's it's more secure kind of sent as a header as opposed to in the url of course you don't care about all this when it comes to web flow um webflow doesn't give you access or or any way to manipulate that back end code it's kind of taking care of everything for you but just so you know kind of what's going on it might give you a bit of context that's why i kind of explained it so with that out of the way let's get into the web flow concepts of forms and discuss those in a little bit more detail so a form is essentially wrapping a set of elements or inputs that denote a kind of block of content if you want two forms on a page for instance that's two separate uh blocks of content that you want us that you want to send you can't send both of them at the same time if you want those things then you need to wrap it in in just a single form and use that to send all the data that you you kind of want to receive on the back end i've seen instances where i've seen forms within forms i've seen instances where there's a form wrapping each uh element each input and this is all kind of incorrect usage of a form you just have one form that wraps all of your inputs inputs need labels this is kind of written into the core of uh web uh the w3c the what kind of web fundamentals and accessibility guidelines it inputs need labels i believe i mentioned this in the past um a label is kind of crucial for screen readers to understand kind of what what they're supposed to input into a form um i've seen examples where the label is removed and placeholders are are put there this it's it's okay it doesn't give um a clear indication of what's to go in the form and particularly when you kind of select and start typing you've you've already lost the context of what uh what you're supposed to be putting into the form so there's kind of some ux concerns as to why a placeholder isn't um ideal or just having a placeholder ideal if if admittedly it's a a lot cleaner you a ui without a label if you must have this if there's kind of you know no way of kind of getting around it or whatever then um if you check out my sr only class video i'll leave that in the in the card that'll kind of teach you how you can have a a label or a piece of context and that you can hide it visually off the screen but it still is still there and it still assists in the kind of accessibility and usability of a form webflow handles labels really terribly so i read from a webflow employee that webflow will link an input and a label when they're next to each other and i've never got that to work so what i always end up doing is creating a html embed element and you you link the two by using the id of the input you take that id and when you create a label you put the four tag there and there are some benefits uh to doing that as well when you've got a label you actually get free functionality of clicking the label and it kind of auto focuses on the element that's that's a way that some people actually expect to interact with the form so you you do get that kind of free functionality there kind of another tip or another kind of um gotcha when it comes to to forms particularly on mobile uh that webflow will webflow by default will set the size of the text of an input to 14. now accessibility guidelines say the minimum size for font should be 16 um but what's actually happening is that when you use your your form on mobile and you click on that input element it will actually zoom in to that input element and that's because the font size is too small if you set it to 16 then you won't get any of that zooming um sort of functionality or zooming kind of assistance it's there to help people because the font size is too small but like i say if it's 16 if you don't like that functionality then set it to 16 and it won't zoom in basically so another thing about forms as well is that forms require a submit button a single submit button so there are ways to kind of send form information through javascript um and what i see kind of on web development projects is that developers will bind click events to the button uh of you know of a form and it won't be a submit button and then they'll kind of send the data that way by by having a submit button this causes the form to submit because it recognizes there's a submit button there it causes the form to submit and if you're ever in a situation where you need to use javascript to send off informational data then i would suggest you bind that event to send the data to the submit event of the form rather than the click event of the button you're kind of again you're getting free functionality there when when you've got a submit button and you are responding to the the sort of submit event of the form that will enable the user to click enter which which often again i do you know for for a login if i'm logging in with my username and password i'll hit enter to actually submit that form um that way i don't have to move my mouse or click the submit button so again you're getting that free functionality because this is expected behavior of a form once again if you want me to kind of go into detail on submitting a form with javascript and the various implications of that then leave me a comment below and i can i can try and arrange making one so that's a few basic kind of technicalities of of a form and how to kind of lay out let's now go into the options that you get when you're when you're editing a form and what they kind of do and what you can do with them or what what's expected to be done with them so by clicking a form here there's nothing crazy um about the the the show the show state here all these are are some um you know they're they're just some elements with a class of w form done and w form um uh fail i think don't don't quote me on that one and on if a form is successful it just webflow will just show and hide depending on those sorts of things there's nothing really special about those there the form name is interesting so this will be the name of the form when it gets submitted to the webflow cms or the webflow back end uh the interesting thing about the form name is that you can actually use it to place a submit button outside of the form because the submit button needs to be in the form for it to work you can place a submit button outside the form um and by setting a form attribute on that input then you can you can then link it the form to it and then that for that button will then submit the form you might want to check can i use on that one uh last time i checked it wasn't widely compatible with a lot of browsers but things that might have changed and i would suggest you always check can i use when you're when you're using attributes and and css and things like that so yeah do check that out redirect url of course it's just where the page goes after there's a success you know they've given you example here it could go to a separate page or it could show and hide the success form um states the action is where you send your data and this is again where it gets a bit complex and and i'm happy to make a video on using your own kind of system to receive uh data but the action yet will be essentially a url that you can use to to where you want to send your data to now if there is no response from that website or that page to say that the data's been handled or whatever then it will actually navigate to that page whereas if there is a response then what it will do the webflow webflow will just again just show and hide the success and error message depending on what uh what message or what data is returned from that url that you've specified once again if you don't specify anything then it's just going to navigate to that page and and and give that page the data thing is with this is that in the past i've actually helped people um you know send data to a custom kind of back end that they've written i've had trouble with this that it's not working i guess i guess you probably have trouble with a lot of um you know you were kind of dependent upon webflow team not creating any bugs with anything but with this one yeah i've had trouble that if i've set something it won't actually send data to that um to that url uh so i've had to override it in the javascript as of right now as this video is being created this works so if i was to put a url in this it will actually navigate and send that data to that url so great stuff there but like i say i've had trouble with it in the past and then finally we have the method which is just quite simply a get or a post and it it kind of goes back to what we were talking about earlier when it comes to what type of how you want to be sending this data if you're not really sure then i would definitely say suggest that you use post but if you know what you're doing and you think get is more appropriate then by all means use get now let's dig into the anatomy of input elements firstly the id which of course is what i was referring to earlier that we set this id to link a label to it now it's important to remember if you're new to the channel and you haven't kind of been following uh the series then i've mentioned in the past that you're only supposed to have one instance of an id on the page so now we can't now have another id of name on this page you know if you want something uh similar or whatever then it will be name one or full name or something like that the the whole point is you have one instance of the id on the page that's the whole point of it so in the in the context of an input then this this actually allows us to link a form to a an input label to it then you've got the name this is how it's kind of sent in in the kind of back end um what it's labeled as in the back end um and then a placeholder of course is just the placeholder there but that wraps up just kind of everything i wanted to go over in this in this episode um there's still lots more to discuss when it comes to forms including security and things like that uh so let me know if you're keen for more form content in the comments below if you like this episode and want to hear more then i'd really appreciate uh subscribe i want to kind of get this channel monotonized and i can only do that with a certain amount of subscribers it really motivates me to make more content like this and if you want to be notified when a new episode gets released and of course hit the notification bell and until next time happy no coding you

Channel: Samuel Gregory

Views: 1,761

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: FNN0E82XWT0

Length: 15min 14sec (914 seconds)

Published: Thu Jan 21 2021