How to Create Conditional Visibility for Form Fields in Webflow

Why is it Important?

Imagine a contact form with fields that are only relevant if the user selects a particular option or meets certain conditions.

For instance, you might have a "Industry" field with several options, including an “Other” option. If the user selects "Other," you may want to show an additional text field for them to specify their industry. On the other hand, if the user has already designated an industry, this extra text field becomes unnecessary and could be misleading.

This is typically the kind of situation where conditional visibility becomes beneficial. It allows you to display relevant elements at the right time, thus avoiding confusion by simplifying the process for the user. This feature is particularly useful in longer and more complex forms where the presentation of information is crucial.

Now that we understand the importance of conditional visibility, let's move on to the next section to learn how to implement it in Webflow.

1. Create Your Form in Webflow:

If you haven't created your form yet, now is the time to do so. Create the form and add all the necessary fields (including the fields you plan to hide). If you have selection fields, make sure to include all your options.

2. Set Up the Form

Each form field must have a unique identifier (ID) in order to be targeted via the custom code. Make sure to assign appropriate IDs to each field. Also assign an ID to the Div Block that will be shown or hidden (the element containing the field and its label). You will need this when writing the conditional visibility code.

Once your form is ready in Webflow, you are set to move on to the next step: adding the custom code that will manage the conditional visibility of the fields. In the following section, we will guide you through the coding process to make your form responsive to user choices.

1. Access the Customized Code of Your Page

From the Designer, open the settings of the page containing the form you wish to enhance with conditional visibility, then scroll down to the Custom code tab.

2. Paste the Conditional Visibility Code

Paste the following code into the Head tag:

<script>

// Get the elements 
window.onload = function() {
  var trigger = document.getElementById("trigger");
  var conditional = document.getElementById("conditional");
  var wrapper = document.getElementById("wrapper");
// Hide the wrapper by default
  wrapper.style.display = "none";

// Show the wrapper if the condition is met
  trigger.addEventListener("change", function() {
    if (trigger.value === "show") {
      wrapper.style.display = "block";
      conditional.required = true; 
    } else {
      wrapper.style.display = "none";
      conditional.required = false;
    }
  });
};

</script>

This JavaScript code will manage the conditional visibility of your form fields based on user choices.

3. Customize the Code According to Your Needs

The code you pasted is a general template. You can now customize it based on the IDs of your fields and the specific choices you configured in your form.

Here are the modifications to make:

1. Replace “trigger” (1) with the ID of the field that controls conditional visibility.
2. Replace “conditional” (2) with the ID of the field that will be displayed or hidden.
3. Replace “wrapper” (3) with the ID of the Div Block that will be shown or hidden (field + label).
4. Replace “show” (4) with the value of the trigger field that will trigger the display of the hidden field.

Only these four elements need to be modified, as in the following example (lines 6, 7, 8, 15):

Lines 7, 17, and 20 of the above example are optional. They allow you to make the field required if displayed but optional if hidden.

4. Publish Your Webflow Site

Once you've added the custom code, be sure to publish your Webflow site for the changes to take effect (due to custom code, they won't be reflected in the Designer). Don't forget to test the form to ensure there are no errors.

Once you've followed these steps, your Webflow form should now have conditional visibility functionality. The fields will show and hide smoothly based on the user's choices, providing an improved user experience.