Advanced Form Elements: Webflow Forms Masterclass

hello and welcome to another episode of webflow and code where i teach you the underlying code you're writing in webflow today is episode number four of our webflow forms masterclass series and today we're going to be looking at more advanced form fields that you can only achieve using html embed element so if you want to learn more about advanced form fields then please stick around so if you haven't been caught up to date with the webflow forms masterclass series we've discussed the basic form elements that are given to you in webflow we've discussed multi-stage forms so forms on different pages each passing the value from one to the next and finally we've taken a look at conditional fields using javascript so if any of that interests you and you kind of want to get up to speed where we are today then i've got a playlist loaded onto my youtube channel where you can obviously follow all those and get up to date with things so if you're new here my name is samuel gregory and on this channel we talk all things front end development including no code and in particular accessibility so if any of that interests you then please do subscribe so without further ado let's jump into the code and start creating some advanced form fields so the first form field is actually quite important for accessibility it's the field set element and the complementary legend element and what these essentially do is that they group form fields together that are related to each other so for instance you might have four form fields for an address so first line of the address second line city postcode all that kind of stuff so you'd want to kind of group those together to tell an accessibility user that this group of elements are related to each other the downside with this element is that you can't use the native webflow form fields it's not the end of the world it's there's there's no difference if you use the same classes then make sure you put the same classes on your elements within the html but there is a slight downside to it so let's dive in and take a look at what that looks like and what we can do to kind of circumvent the the web flow issue that i just spoke about so here's a html embed um element inside of my form here and what we're just going to do is type field set and close that there so field set and the the field set needs a legend which is essentially the title for all these all these form fields so if we put a legend in here and then close it what we're going to do is create a um let's do let's do an address it's nice nice and easy so let's just type address into that form the field set legend and now here is where we create our elements so let's quickly nip through these so here we have our final kind of field set here and let's run through just a few things in case you haven't uh watched the previous episode so once again we've got our legend which essentially titles the entire group of elements and then we have a label for each one of these inputs which as you'll know from previous episodes you every input needs a label and you join them using the four attribute which links to the id so you'll always see the four and the id matching on all these things and the next thing to note is that the name is actually the sort of i guess title you give it on the back end how if you're submitting this to webflow how it will look in your submissions table kind of what's the name of this um what's the name of this value um and all we've got is line one line two city and zip code like i said so if we save this then you'll notice kind of the style of it here let's quickly publish that and so we can take a look at it in the browser so here we go here is our here's our kind of elements here so you can see the address there and each one of these has well exactly as you'd expect them so how are we going to make these kind of look a little bit better well again i'm not a designer i'm a developer but what i'm going to do is show you the techniques so you can apply your your designs to these so as as most of you should be doing is creating a star guide for all of the components and modules that are on your website and the variations the reason why you create the variations as well so selected and not selected is that if you ever go to clean up your classes in in the the panel here then because it's being used on the style guide page it when you click clean up it actually won't clean up those classes let's remove these they're probably all old and not being used anymore anyway so so in your style guide page um again i'm just going to mock it up here because there's no reason to create a new page just for the sake of it i mean a lot of this actually looks quite nice here so let's style this input in the way that we um would want to kind of style it so i've given it a full class of form input and we're just going to play around here with some colors and um and various things just to kind of make it look a little bit a little bit different so so here we have our form field very very basic i've removed the border i've made it sort of darker when you hover it when you're when it's active it becomes a little bit lighter and transitions that so taking a look at our inspect panel here we can see it's got two classes on it form input and w input the form input is obviously the one that i created the w input is one that web webflow is created and the default webflow design kind of looks okay so i'm probably going to take that class i mean let's take a look at what what that class actually does so it displays block gives it a width gives it a set height a bit of padding nothing crazy um but i'd like to keep that of course if we don't want to use a w input um class you don't have to but then you're missing out on a few of these things i mean let's remove that class just to see what it looks like and it probably yeah see it doesn't look so good so you're probably going to want to replicate the w input class to some capacity you know whether you take all of the styles or not but these are the two classes that i'm kind of interested in here so let's take those and add them into our code here's my inputs here so if i go class equals that let's copy that so it's easier to move so now we're starting to see how all of our sort of elements they sort of fall in line with each other so there you go there's the field set element and the complementary legend element let's take a look at the very very interesting data list element so a data list element actually you can think of it like an auto complete feature for a text input so if you were to say use an input field of fruits you know you can set a data list of all the different kind of fruits any number of different fruits that the user could put in that field and it presents them with a kind of pop-up or a drop-down menu of the sort of the closest um fruit that they might have typed so if they type a it would show a few different fruits in that belong with the letter a for instance you might think why would you use this when we have a select field well this gives them the opportunity to actually type whatever fruit they want in there you know we're helping them out by giving them suggestions but they they might think of a fruit that we actually don't have in our list so they're still able to choose the fruit of their liking we're not preventing them from doing that like a select box would so what does the data list look like keeping in our html embed element here let's insert a a label and say fruits okay and then four and then we just want to do an input of type text name fruit um id equals fruits um and let's keep give it the same sort of class that we have there so a data list looks like this it can go anywhere in the form field um but it's probably sensible to keep it in the obviously near the element that it's um it's referencing and inside of a data list we want to give it a set amount of options so we go option value apple banana um pair right let's just just do some three there so the way we link these now is that if we add the list property onto our input this list attribute needs to reference an id so we can't say let's say fruit here to make it uh singular and then the list is plural because this references an id and of course we know that um there can only be one instance of any id on the page so and then we give this an input of fruits so now these are linked to together we've got our fruits here now different browsers are going to render this differently so you're going to have to make sure you're you know you're happy with the way it looks across all the browsers and what you might do to modify the styling so that you can make it look the way you want but you can see an edge here i get a little drop down but if i click here i actually see my data list there i can completely ignore it and type my own fruit like i say dragon fruit and that's perfectly acceptable or if i start to type apple then you'll see that data list actually reduces and i'm able to select that and then submit my form so that's just about it for the data data list element it's actually really kind of handy and and it you can you can really create an intuitive user interface if you're if you're pre-thinking about what a user might select or uh popular things that a user might want to type into a text field and you can preempt that by being with the data list element so let's now look into output now output is a is a weird one um it doesn't really submit anything to the back end but it's kind of useful if you're building an interactive kind of website and the output simply is there to say what the output of one or more um fields so for this to work properly we actually have to write some javascript to to get it to work so what we have here is an example of what we're trying to do so we've got a we've got a text input here with a number in it and we've got a range slider here more on that next week um and here you can see the output element which is simply just giving the user some indication of what um is the output of the sum that i'm doing in javascript and when we change the slider you can see that the output is actually changing and we can make this into 30 and we're taking the value of this plusing the value of that and outputting there let's take a look at the html and see how this has been created so looking into our html embed element all we have is an input field two input fields and our output field right the first input field is of type range again more on that next week um and the initial value is 50 so we're setting the value um when the page actually loads and then we just have a plus there just in the middle this is actually isn't doing anything it's just this is just text and then the second input field is actually of type number so it's a text input field and the initial value is 10 like we saw and then we're creating an output field and the there's a couple of interesting things here so for this output field to understand and recognize um what two inputs is taking its total from it's a space separated list of ids so we have an id of a for that which you can see there and an id of b for that this can be actually one two or three inputs so this is taking a value from but you must remember this is we're still we're still have we still have to set the value um with javascript right and there's a reason why this is 60 is because 50 plus 10 is 60 so if the user does nothing then all of this kind of checks out we're actually taking the total of a and plus b and then we're getting 60. but because this is an interactive we need to use javascript so that if the any of these two change we then need to update this output to whatever that is the second important aspect of this output is the area live now we've briefly spoken about area roles on this channel and a real live is when something is changing do you want to announce that to the screen reader now there's two values that this can well two values that we're interested in taking we can have assertive or we can have polite now assertive as soon as this is updated um it will announce to the user that there's been an update on the web web page um with polite and this is it will wait until the user is idle after a few seconds of not doing anything then it will announce the uh the change um i would be hesitant to use assertive in this case because the update is happening you'll see now the update is happening relatively quickly so polite is probably the best way to go here so there's the there's the basic html markup let's now take a look at the the javascript and how that's created so taking a look at the javascript once again i'm using jquery in the um the below the body tag here and if this doesn't make sense to you then i'd suggest jquery or javascript video which i'll link up into the cards but if you're here and you're following the journey you'll probably be able to understand it but let's quickly walk through this so we're we're creating a variable or a constant named dollar form and we're using jquery to get an element with the id of email form which if you haven't guessed already which is the form we've got on our page so we're storing the result of that in a variable called form again the dollar being a convention to let me know this is jquery object there you go on i know so i've just done this uh without using jquery so at the top here we've got the jquery function um and the bottom here there's a nigeria crew function so let's go through the jquery run and then i can quickly go through the non-jquery one so once again i said that we have jquery object and the first item on that object is the raw form and we can access any elements any inputs with um ids just by naming that id after the dot here and we're actually getting the value so um this is the range slider so whatever value that is as the user moves that range slider we're getting that and because it returns a string we actually want to we want to actually make it into a number by using pars int and we're adding the element with the id or the form input with the id of b and we're getting the value of that so we're just plusing those two together basically i hope that kind of makes sense i'm a bit just getting a bit distracted by this um this square braces here so i'm just trying to simplify it right so we're adding the two inputs together this could be three inputs this could be this could be however many inputs you want to then show into that output and so finally on each input this function is firing finally we're getting the element with the id of result inside the form which if you remember it's actually the output element itself we gave that an id of result and we get we're set we're saying the value is equal to the total which is this constant here so that's by doing it with jquery without jquery just plain old javascript we use get element by id and we can get the email form and then we're adding the event listener input and then we're finding the function lots of similarities so far um and then so the total instead is that because we actually have the raw html element here we don't need to use the kind of square syntax up here um and then we can get directly get the the element with the id of a add that to the element of id and b make sure they're both numbers because you can't do maths on string of course and then we're setting the the result the element with the id the result the value equal to total hope that makes sense um let's comment this out so let's once again just run through what that's doing so we've got 50 because we know the initial value here is 50 in fact let's get our inspect panel if we take a look at that so we've got 50 and that's 10 uh with both those added up is 60. but as we change this we're not doing anything in the javascript to change the value here but you can rest assure that when it submits to the back end it will be the correct value um and then once again just demonstrating that actually we can just make that into any number and because we that that triggered an input event you can then see it live updating there there we go that's the output element um an interesting way just to create a bit more of an interactive form or or web page you might use this in a game or something like that so last but not least we're going to take a look at the opt group element right and this once again is something we can only achieve using the html embed element essentially it modifies the select input not the native webflow one but the one that we have to then write in our html embed element it groups the options that are available so let's just take a quick look at what that looks like so here we have a choose a car form element here and when we select the drop down you can see that we've got some separation of all the select inputs here so let's take a quick look at how that was created so this is what it would look like if we weren't using opt groups so just a standard select field how we add option opt groups or option groups is simply by wrapping the options that relate to that group in an ops group and then we label that with we give it a label with swedish cars german cars american cars whatever um and essentially that all that does is then group all the elements on the drop down as you can see there so again not not groundbreaking stuff here but just a way to create a bit more of an intuitive informative and accessible webflow form so if you enjoyed this episode then please do give it a like is the easiest way to let me know that you're enjoying this this series and if you're new to this series then make sure you hit subscribe because we have another couple of episodes lined up for the webflow forms master class so let me know in the comments any interesting ways you think you could use these elements and of course let me know if you have any questions or or you want me to clarify anything i i almost in the comments section so until next time happy no coding [Music] you

Channel: Samuel Gregory

Views: 385

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

Length: 20min 48sec (1248 seconds)

Published: Thu May 27 2021