Video instructions and help with filling out and completing When Form 2220 Select

Instructions and Help about When Form 2220 Select

In this tutorial I'm going to show you how to add custom fields to contact form 7 forms so that when your visitors answer certain questions in certain ways other questions appear which is really useful stuff and we're getting started right now it's up guys welcome back to another video it's bjorn from WP learning lab we help you get better at WordPress so you can earn more for yourself for your clients and for your business if you're new here to subscribe and hit the bell notification icons you'll miss anything and with that out of the way let's head to the screen capture so to add these conditional fields to contact form 7 I'll see you there first thing we have to do to get conditional functionality to our contact form 7 forms is install a plug-in called contact form 7 conditional fields to do that we're going to head over to plugins and then add new and lookup contact form 7 conditional and his first plug-in right up here in the top left is the one that we use for that click on Install Now then click on activate and now we don't have to set any settings so we can head into our form editor I go to the contacts menu item clicking on edit for for when I work on what's going to work on this basic form here now we have a conditional fields tab that's been added up here in here is where we define the rules for our conditions but first we have to make fields and our formatter else have a conditional fields group that's been added and the groups are what are going to appear or disappear based on our conditions so I'm just going to make a really simple example let's have a drop down menu that is required and people will choose if they are a child a teenager an adult or a senior you can have on here anything you want you also don't have to have drop down to this to work it can be any field where information is entered and then other fields will appear this is just an example you can do this all kinds of ways so we have that drop-down I want to have it so when they select teenager they're asked more questions as well as when I select senior when they select child an adult nothing more is going to be asked to them the very next thing after the drop-down I'm going to click on conditional field groups I'm going to put in here team does insert tag put some space in the side of that group and in here I'm going to ask a question text-based question about smartphones it's going to make the name smartphone I'm just going to copy these labels from up here so we have the same appearance okay I'm going to the question is going to be do you have a smartphone and depending how they answer that we're going to show another field I'm going to click on conditional field groups again and call this phone type insert tag under some more spaces this is called a nested element so we can have groups within groups which is pretty cool and we have a warning down here that just noticed multiple form controls are in a single label element because I'm missing this greater than symbol that should the error should go away pretty soon plans for this nested group I'm going to add another text field I'm going to call VAR for the name smartphone type now I'm going to copy and paste these again the question will be what type of smartphone and you don't want to make these required because if these fields don't appear the form will still think they're required but people can actually enter any information so they can't actually submit your form ever unless they make all the fields appear so all the fields with conditional formatting that may or may not appear you can't make them required next the seniors group add additional fields going to call it seniors click on insert tag in here I'm going to ask two questions age and insurance I'm going to copy these labels again Music how old are you of the age question do you have insurance and both the drop-down up here I'm going to add a label that says or asks which group do you belong to Wow - so as you can see it pretty complex with these the challenge is keeping a little straight so for the nested elements I recommend you space them in a little bit so you know which one is a child of which one otherwise we have lots of conditional things going on it can be hard to read so now we have our question that our conditionals going to be based on we have a group for teenagers and a nested group within that depending on what their answer will be and then we have the seniors group now that's set up I'm going to click on save then I'm going to go to conditional fields and click on add new conditional rule and we fill in the blanks essentially if select field if the drop down to the label properly hang on let's call this drop down save that'd be easier to work with every no what we're actually selecting conditional fields again if drop down equals teenager so we have to type in the exact value at the drop one will produce which is teenager then show the group teen add a no rule if the smartphone's field equals yes then show phone type if they first chose teenager from the drop-down we chose them the question do you have a smartphone which is a smartphone question if their answer is yes we show them the question that asks what type of