Want to learn how to create Unbounce conditional form fields?
Keep on reading or just watch this video to see me do it:
Creating Unbounce conditional form fields is an awesome way to customize your message to your site visitors and get more information from them about a certain selection they made and make they feel more “special”.
The way it works is we first create a custom dropdown, enter all the questions we want there, and add custom boxes with answers for your Unbounce visitors.
Once we set up the code and all that, upon selecting an option from the dropdown, the custom box would appear with the specific message depending on the previous selection.
Take a look at the video to see some examples, but it’s pretty cool.
Without further ado, let’s get straight into it!
By the way, I added all the codes and instructions necessary to follow along with me at the top of the description, so just take a look and get the code from there.
Step 1: Set up the form in Unbounce
Unbounce limits us to only 1 form per page, so if you don’t see the option to add a form, don’t worry – just look around on your page and see if you can find an existing form. In which case you would want to either delete it or edit it/move it up to where you want the main form to be.
Step 2: Double click on the form and add the questions/fields you want
Definitely something like name and email, and the rest is completely optional.
But this works great especially for a survey since after you give your Unbounce visitors a question, you can add a conditional form field to request additional info.
What you definitely do need for this is a custom drop-down (or whatever other dropdown is available).
This is where you ask a question and then allow people to answer in a “multiple choice” format by selecting their answer from the dropdown.
Step 3: Create custom text fields
Next you need to add custom text fields which will go with each of the dropdown options and will elaborate on the question.
So if one of your Unbounce visitors answered “fish” to “what is your favorite food” question, you can elaborate and ask “what is your favorite fish” or “why do you like fish” and so on – whatever you want.
Step 4: Add the JavaScript code to your page
Now that you have set up all the basics, we need to take the code from the site listed above and add it into the Javascript section on our page.
You can put the code before the ending body tag or in the head section, but I would probably put this in the body section to ensure the most important information loads first on the page.
Step 5: Replace the default element ID’s with your own
After you added the code, simply change some of the ID’s around to match the ones that you personally have.
That means changing the ID of the button, dropdown, and saying how many dropdown options there actually are.
That’s pretty much it.
You can find the ID of the specific Unbounce elements by selecting an element and scrolling to the bottom, then copying & pasting the ID into our Javascript code.
You might have to play around with the button a little bit to make sure that it looks good once the page is actually live, but aside from that, whatever you see on your edit Unbounce page is the way it will look.
The “variable” part of the code sets the distance between questions after the dropdown and the dropdown, so if you decide to have more form fields after the dropdown, you would need to play around with that variable number to make the entire form look consistent and even all around.
That’s it!
Other releavant posts & resources
👉 Watch me create a 52.68% conversion rate landing page in Unbounce
👉 Unbounce free 14-day trial + 20% off for the first 3 months
👉 My Unbounce playlist so you can find every important piece you need
👉 Unbounce code used in this post
👉 Like my Facebook page!
Do you have any ideas or video topics about Unbounce or anything else you would like me to cover?
Write down in the comments below what you would like me to make a video on!
