In this episode, we take a look at how we can create a reactive Webflow form based on the input values of a form element.
Transcript
Hello and welcome to another episode of Webflow and Code where I teach you the underlying code you’re writing in Webflow yes I’ve had a haircut and yes I look handsome according to my dad.
Today we’re going to be looking at conditional fields inside forms as part of our Webflow forms masterclass series in this episode you’ll learn how to reveal form inputs and other elements based on selections and values from form fields.
[Music] Let’s take a look at here of the result of the form you’ll see that in my gender um radio fields here I can select male or female or other but when the user selects other I’m able to type in a value if I select male or female then it hides so the important thing here is to know that when the user chooses other they’re forced to fill in that form but if they select male or female they’re able to then submit that form with no problems.
In the second example we have a drop down here and depending on which value the user selects in the drop down we reveal a different element or a different input that relates to that selection and in the third example we take the value of an input and depending on what the user types will show another element so let’s take a look at this uh form well you’ll see that it’s just a basic Webflow form that’s going to submit to Webflow in the end but you could have it so that it submits to the next page like we took a look at in last week’s episode and if you haven’t checked the episode out then I suggest you do so.
But right now this is just going to submit to Webflow um and really we’re not taking a look at the form itself in here but if we take a look at our inputs then you’ll see that I have four uh three radio buttons right uh male, female and other taking a closer look at these fields knowing that this is a radio button field and again if you haven’t seen the first episode on basic form elements then I suggest you do so but you would have learned that our radio buttons to be part of the same group of elements so in this case it’s gender.
They all need to have the same name so you’ll see that they’ve got gender as the name um each of these uh yeah so each of these has gender as a name and then the the choice name here is that’s incorrect so we can just correct that one this one’s male female and then the value of this other one is other um really that can be whatever you want but it makes sense that it is it’s other and if we take a look at the input itself just a plain text field and I’ve got the name as as gender and actually this should be gender type here so that it submits under its own uh value on the on the Webflow backend.
It’s important to note that this is not a required field at this point and we’ll be changing it to a required field in JavaScript uh so that we can obtain that it’s necessary for the form to be submitted if this was required and the user did not select other then they would they wouldn’t be able to submit this form because it’s hidden off the screen and they wouldn’t really know um what is causing the issues so it’s not a required field so I guess the other thing to note here is that back to our in our styles.
I’ve got the input um hide sort of base class here which positions it absolute um off the side of the screen it puts the opacity at zero and transitions that opacity so that when I later down the line adds the class input show you can see as my input show combo cast I uh put set the position as static and bring the opacity up to 100% so when we add that class it will transition in and look sexy so let’s now take a look at the JavaScript that kind of makes all this magic work and kind of go through it line by line.
So it’s in the footer um it’s down the bottom of the body and you’ll see the first instance here is a basically an onload function for jcrew just to make sure that I’ve got jcrew loaded and that I’m going to be using it inside of that function so the first line here line three um I’m getting an element with an art with an id of gender type and if we go back to our um code here actually we need to be removing this class and you’ll see that we have the id that was created for us um is gender type and it is important to know the actual capitalization of the of the value here because we need to match those um.
Slight side track that if I was to create this is a new feature that I’ve noticed from Webflow if I create a an id here of gender type Webflow will actually notify me now that there’s another id on the page of gender type which is great and that’s actually to the html spec we can still create that id but at least we’re getting a warning from Webflow now anyway I digress our input has the id of gender type and looking at backed into our JavaScript we are getting that input element um that element with the id of gender type so that’s what that first line’s doing.
The second line is actually getting an element or a group of elements because that’s what jcrew does for us by using this dollar we’re getting a group of inputs that are type radio and with the name gender so we’re being very very specific here on what we’re actually um getting from from the uh from the page here and we’re storing that in a value a variable called radios with the dollar sign this is just a convention I like to use um it’s a it’s an important convention that actually lets me know that this is a j crew object and I can use jcrew functions on that object.
So, here we’ve got stored one or many uh well I know this is one and I know this is many so yeah you know spoiler alert there and so that’s what we’re getting there so now we’re getting our radio buttons and on the change event of those radio buttons we’re going to call this function right and now this value could be anything that you want or what’s that what’s…what’s useful to you so it could be on blur so that when um a user exits that um that that that input field or focus you know in this case this is a radio button so you don’t get the blur and focus but let’s say for example this will this is like a text field or something like that and you focus on that on that text field then you can fire this function based on that.
And it’s just a case of changing that this will make more sense in our kind of third um third example but just to let you know that..that this you you specify the function that you want to react to um in this first uh value the second one like I say is a function and this is the function that’s going to fire on each time any of these radio buttons change so um and we’ll demonstrate that just real quick and it gives us access to the event now this is important because you’ll see on line eight we’re actually getting the current target value and storing that in a..,in a variable called current value and let’s just see what happens.
I’m going to comment this code out just because um I don’t want to spoil the surprise as it were but let’s publish that and just have a look what that what those values are so when we select the first value here we get a value of male we get female and we get other female, male other so we actually have access to the value of those inputs and refresh the page jump back to our code so then we’re storing that value in in our variable called current value right.
So the next lines of code we’re going to look at so we’re getting our input which you remember is the actual text field um that we stored up in our variable here and we’re toggling the class input show now if you remember our input show class actually enabled us to see and it transitioned um the opacity um for us to be able to see that input so we’re we’re basically um toggling that cut that class if the current value equals other so in essence if this is true or false if it’s true then it adds this class if it’s false then it removes this class this is a toggle class function that jcrew gives us um and it’s just really useful because it can…it can help you write nice clean code.
Now we’re returning here so we’re not closing off with a semicolon as you see there this looks a bit confusing but bear with me so they don’t have a toggle attribute function unfortunately so we pass in the first value as required and the second value is a function which is what um jcrew allows us to do and we do a similar thing that we do here we fire this function and return if current value equals other and depending on this is true or false we’ll remove the um…we’ll remove the attribute required now this is the secret source for when if a…if a user selects other and doesn’t type anything into that input field it still gives them the warning but then when you quote when you click away from it and this function will fire again because the radio button value has changed once more.
It actually then removes that required function and then removes the input show so just saving that publishing so here’s our…there is our gender type input here and if we keep our eye on that if I select set mail you’ll see that nothing happens here if I select female nothing happens here but if I select other you’ll see that the input show class has been added the required field has the required attribute has been added and of course you can see that beautifully fade in there and then the user is able to type whatever it is that they want and obviously submit that into the Webflow back end.
Now let’s take a look at our second example which as you’ll remember if we select phone then the phone number input shows that when you select email…the email input shows and when you select carrier pigeon of course the carrier pigeon options show taking a look at the html of this page here a normal form again we’re not creating a multi-step form here I’ve just got a different page showing you just for our different examples so taking a look at in the form here we have our select field which gives us um four values please select one being the first which is the default uh phone email carrier pigeon okay and and below that now you’ll see inside of here we actually have a group of things so I’ve grouped both the label and the checkbox inside each of these um each of these divs here these are just divs and the first one is a text field…text field and then a check..check..check box label.
So, we have the name here of phone we have the name here of email and we have a name here of pidgin and again they’re not required because we’ll be doing that in the JavaScript we have this special class um which I’ve given it called “js select hide” and we’ll get into that but as you’ll remember from the first step and our global class input hide this hides these um values or these whatever it is that we’ve got this class on off the side of the page we can take a look at our JavaScript just to see what’s going on and we can go through it uh line by line.
Again we’ve got our on load function now the first thing we’re doing is selecting…selecting an element with the id of contact which of course is the select field id of contact there and we’re storing that in a valuable variable called contact and we’re listening to the on change event of this select field now different as I said before it can be any um any event that you want to listen for but um different elements have different inputs and this will become clearer in our next example but on this occasion again we can listen to that on change event and we’re firing this function now you can see it’s a little bit more complex here but we’ll go through it line by line and you’ll understand it once again.
We’re storing the current value of our select field so there’s different values you remember is phone email and carrier pigeon they’re the different uh values that we’re listening out for let’s go through this like this chunk of code here first because then this is easier to explain but first of all we we have given each of um our inputs each of our divs here an id of phone number an id of email and id of pigeon and these match up perfectly with the values here so we’ve got phone uh hyphen number email and we’ve got pigeons so they…they match up perfectly and this enables us to write less code ultimately.
So, we’ve stored phone hyphen number in a variable here so, we’re getting an element with the id of phone hyphen number or pidgin or email and then we’re adding that input show class we’re not toggling it this time because again I’ll explain a lot this just chunk of code here we’re just simply adding the class input show then because we can chain we can..we’re finding the input element or sorry we’re finding an element with an attribute name.
Now we know that each of these inputs because they are form field elements they will have or they should have the attribute name so we can guarantee that within our um within our element here within our id let’s say email we’re finding an input within that or an element in that with the with the attribute name I hope that makes sense um so we’re finding an element with the attribute name which we know will be the input field you can of course make this whatever you want if you’re more comfortable using classes or ids to make this a bit easier but this to me just felt a bit more streamlined and and a bit more reusable.
We’re adding that required attribute to it to make it required now the problem is is that if the user selects another element or sorry..another value then we’re not then removing this from the from the user’s and in fact let’s just show that I’m going to cut that we’re not removing it from the user’s form so we go back here and refresh we select phone then we select email you’ll see it keeps adding that’s a problem we need to remove that so jumping back into our um JavaScript code here paste in what I’ve what I just cut.
Now you’ll remember that I gave each of the divs a class of “js select hide” we could use the class input show but I want to keep them separate I want this to be a simple um visual stylistic class whereas you’ll see I pre-pended this with “js select hide” so that I know later on down the line that this is actually a java a class that’s being used by JavaScript so I’m selecting all of the divs here so this gets all of the divs that have a class of “js select hide”.
Now we’re removing that class input show from all of them we’re finding the…the input with the with the attribute name and we’re removing the required attribute so we kind of went in a reverse order but what this is going to do it’s going to store the value it’s going to remove all of our divs and inputs from the page and then find the single one that relates to the value of current target and then show that one we change the value we remove all them all and then show just the single one that’s the value of current value so once again if I just publish and show you the result of that you’ll see that the user can just select different ones and then they can make their selection.
So, here’s our third and final example that we’re going to use to show you the different ways you can use form elements and respond to their values in order to change or manipulate the user experience so we have a text field here and I guess the important things to know is that we’ve given it a name of animal input and that has got an id of animal input okay and and we’ve just got a placeholder there this is a required field um and that is it there’s nothing else on here.
Next to that I have a div with my image that I’ve shown if you remember our demonstration of the example it’s just a div with um an image in it showing a picture of a wombat now the only things to note here is that we have our base one back class just because I wanted to restrict the width but we also have that input hide class again to position off the page reduce the opacity and transition that opacity.
Now let’s take a look at the JavaScript once again we’re getting an element with the id of animal input which if you remember it will be the actual text input and then we’re also getting that um image the div wrapping the image which has the class of wombat because they’re the two things that we want to affect now you’ll see in this case on the input we have the event input okay not to be confused they’re not the same thing this is actually responding to whenever the user types an input into this input field so it’s worth exploring what different events you can use on different types of form elements.
So, it’s the same deal right we’re firing this event and we’re getting the current value and then we we’ve got a conditional uh variable here called is wombat and what we’re saying is that if the current value matches wombat the word wombat and then we ignore in the case this is a regular expression which the match…which the match function accepts and we’re just saying wombat so essentially if someone types one bat in all capitals or…or capital w or all lower case we’re still going to match it because we’re ignoring the case with the i operator here so we’re saying if that matches then it’s true otherwise it’s false.
So, we’re just by default selecting false the only reason why I’ve done this is if we just left it like this um if this if this didn’t match at all it returns it’s undefined and it just it just doesn’t work as nicely it doesn’t play as nice as I would like it so um it just doesn’t work actually just to just to be blunt about it so we’ve got to do the or false here so that’s what that line of code is doing quite simply once again on the wombat div we’re toggling that class input show and we’re saying if if is one bat is true then add the class if it is one byte is false then remove the class so once again just to show the demonstration of this type in uh balloon doesn’t show anything we type in one wham one bat we show it you know you can and you can also type this in all capitals because the regular expression is ignoring all of those things so this might be you know I’m showing you here that we’re not…you’re not just limited to just showing and hiding other form elements you can of course do whatever you want.
Our form is now completely reactive to um different actions within that form this could be even an app you know this might not even be a form although these inputs do need to be inside of a form I think Webflow doesn’t allow you to put input elements and form elements outside of a form but you can create a bit of a user interface here depending on those values so it’s really up to you what you want to do with this.
So, I hope that was useful and I hope you enjoyed this episode and I’d love to see what you actually do with this what different things what different ideas you come up with now you know how to look for elements to listen to different events on those elements to read the values of those elements and then to manipulate and do whatever you want to the rest of the page based on that that event so once again thank you so much for sticking around if you want to support the channel then head over to patreon.com fake Sam Gregory and until next time happy no coding you