Unbounce: How to Create Conditional Form Fields

If you want to try out Unbounce yourself for free for 14 days and then get 20% off for the next 3 months after the free trial, sign up using my link:

https://unbounce.grsm.io/ivan?sid=u-condforms-1

My Unbounce playlist so you can find every important piece you need:
https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

Instructions: https://community.unbounce.com/t/how-to-conditionally-display-additional-form-fields-based-on-dropdown-selection/4430

Code: https://gist.github.com/RobertCam/0be9efb09a091e1880ffeb5edadf2d1a

If you need help with a specific issue and want me to personally take a look at your setup, I can help! Check out the ‘My Services’ section of my blog: https://amarketingessentials.com/my-services/

Hey all!

In this video, I show you how to display forms conditionally depending on your dropdown choices.

This 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.

1. That being said, the first thing we have to do is set up the form on our Unbounce page.

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.

2. Regardless, once you have the form, double click on it and add all 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.

3. 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.

4. 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.

5. 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!

If you want to try out Unbounce yourself for free for 14 days and then get 20% off for the next 3 months after the 1-month free trial, sign up using my link:

https://unbounce.grsm.io/ivan?sid=u-condforms-2

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!

Most of my videos I made were requests/suggestions from subscribers, so don’t hesitate to let me know as well!

Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

Thanks for watching, and I’ll see you in the next video!

source