Conditional logic in Webflow forms (without plugins or custom code) | Webflow Interactions Tutorial

in today's video i'm going to show you how you can use webflow animations to create conditional logic inside of webflow forms so without further ado let's get into it [Music] hey friends welcome back to the channel if you're new here my name is comma and on this channel i help people build their own online businesses using no-go tools like webflow eartable and zapier so it's been a while since i made a very web flow specific tutorial so i figured today i would show you how you can use webflow animations to create conditional logic inside of webflow forms so conditional logic inside of forms is when you display certain types of questions or prompts based on the answers that a customer provided you in any of the previous questions and that is a feature that is currently not available in the native webflow forms it is however possible to build this type of conditional logic without having to use any third-party tools or custom code using webflow animations so in today's video i'm going to show you a form that i set up that has that conditional logic and then i also make that particular template cloneable so if you want to go ahead and see what the inner workings are it looks like inside of webflow you'll be able to do that as well but before we get into it do me a quick favor if you haven't already please subscribe to the channel also if you want me to make more specific tutorials around how to hack things in webflow then also leave a quick like that helps out a lot but without further ado let's check out the form so here is this very basic and straightforward form you've got a name field and email address field and then you also have a question which asks a website visitor to state what the best place is to go on holiday so we've got three options australia new zealand and other and we can see that by default australia is selected but then when i select new zealand it comes up with a prompt that says great choice and then if i click on other it also displays a text field where i can then as a website visitor add my own custom option and then as soon as that is submitted all of the information that was submitted in the form then gets sent to you through your webflow forms in your backend and you'll be able to go from there so i want to show you how you can use webflow animations to set up this type of functionality here so let's just go in and see how it's all set up inside of webflow okay so the first thing that you're gonna have to do is you're going to have to jump into webflow and just create the form that is a pretty straightforward process you just jump in here and select the form element from inside of the elements panel and then you just go ahead and you add all of the different questions that you want to ask your website visitor into the form now you may have noticed that the text field that gets displayed when a website visitor selects the other field is also already populated in there so it's very important to make sure that you also add all of those fields that only display in the event that a website visitor selects one of your options straight from the outset and then we can use webflow animations later on to hide them when they load by default so you can see in this block here where i have my different choices that i have radio button fields inside of it and one recommendation that i have straight from the outset is to just give it a group name that all the options have in common so in my case the group name for all of these questions is location now the reason why i do that is because if you don't have the same form field then it will basically create a different column inside of webflow forms whenever a answer is submitted but you really want the location to just be submitted into that one particular column which is called location that's kind of important when you're sending data to places like airtable or any other third-party database so once that is all done we want to start working with webflow animations to start hiding certain elements when certain choices are selected so we're going to start off by setting up the animation for when a website visitor selects australia so all you're going to need to do now is you're going to have to click over onto the animations tab or the interactions tab on the far right side and you can see i've already got them set up and the first field that you want to set up is the page trigger so what you're doing here by setting up your page trigger is you are setting the default state of the form and what we want the default state of the form to be is to display all fields except for this um text other field and the label that's his great choice with the new zealand flag so the way that you do it is you just create a new timed animation and then inside of there what you want to do is you just want to go ahead and set the display setting for this text element to hide so if i start off with it it will be in display block and all you want to do is just switch it over to display hide now you want to do the same thing for the heading which says great choice new zealand so all you need to do is just click on the element and then from there you again it will start off in display block and then you just need to go and change it at the bottom to display hide and so then all you need to do is just make sure that when you start that particular interaction which is when the page starts loading that that is the animation that it starts off with so that those two particular fields are hidden the next thing that we want to do is we want to select the interaction that happens when someone selects new zealand so in this case what we want to do is we want to use a element trigger and now an element trigger is basically a trigger when you click on something or if you do something like something scrolls into view or you hover over something but in our case what we want to do is we want to trigger the animation when someone clicks on this particular radio field so what we want to do then is we want to say what do we want to display now and what do we want to hide so again what we want to do is we want to just give it a name that is clear so i've just called this hide other option but um i would probably also be able to call it something like um when new zealand is selected just do something that makes sense to you but um for me hired other option makes most sense because it's very descriptive of what the actual animation does so what i want to do then is i want to again select these two elements that by default are going to be hidden and then i want to decide if i want to display them or not so if i click on this particular um text field where the customer can add the alternative option i actually don't want that displayed i only want that field display when someone clicks on other so again what you want to do is you want to switch it from display block to display hit hide now with the heading though this time we want to display this heading so instead of setting it to hiding the element what we want to do is we want to leave it in display block next we want to go down to the other field and now we want to do a very similar thing which is when someone clicks on other then we want to display the other field but we want to hide the heading that says great choice new zealand and then the last thing that you're going to have to do is very important is that once someone has selected new zealand or other they might want to go back and select australia in which case we also want to set up an animation that again hides the alternative text field as well as this text label if someone goes back and selects australia so what we're going to do is we're going to click on this radio button field again and we are going to now create a new element trigger when someone clicks on that particular field and again it's a very similar process just this time we select both of these alternative options which is the text field and the text label and we again just set them to display hide and that is how you can set this up using um web flow animations it is very basic but it does exactly what conditional logic does in all the other form builders and so that is a very basic introduction into how you can use webflow animations to create conditional logic inside of webflow forms now obviously this was a very very basic use case i want to keep it pretty simple and straightforward because as soon as you understand the basics it's quite easy to expand on what i've already done something that you can do that i didn't show in this particular video is if you for example want to display entire blocks of questions you'll be able to wrap those questions into a div block and then use a very similar to process to either display the active block that contains all of the other questions or not using webflow animations now i hope you enjoyed this video if you did please leave a like on the video also if you have any other questions about how you can do things inside of webflow let me know in the comments down below and i'll do some research by the way you can clone this template if you want i'll leave a link in the description below to my website where you'll be able to then jump into webflow and copy the template for this particular form builder other than that thank you very much for sticking around and i'll see you back here for the next one

Channel: Connor Finlayson

Views: 18,827

Keywords: webflow animations tutorial, webflow interactions and animations tutorial, webflow interactions tutorial, webflow interactions examples, webflow interactions 2.0, webflow interactions and animations, webflow interactions not working, webflow interactions course, webflow interactions showcase, webflow advanced interactions, webflow dynamic forms, webflow conditional logic, conditional logic forms, webflow forms, web design tutorial for beginners

Id: lcvS442N5qQ

Length: 9min 3sec (543 seconds)

Published: Sun May 16 2021