Conditional fields or elements

Since version 4.0.3 of the plugin, you can conditionally show form fields or elements based on the value of any other field in your sign-up forms.

For example, say you have some help text or a field that you only want to show when the "Yes" option was selected for another field named "FOO".

You can configure this by adding a data-show-if attribute to any HTML element inside the form. The attribute value can be either just a field name or a field name followed by a colon and the expected field value.

The following examples showcases both options.

<p>
    <label>Dropdown Group</label>
    <select name="FOO">
        <option value="yes">Yes</option>
        <option value="no" selected>No</option>
    </select>
</p>

<p data-show-if="FOO:yes">
    Some text which will only appear if you selected "yes" for the FOO field.
</p>

<p data-show-if="EMAIL">
    Some text which will only appear if the EMAIL field is not empty.
</p>

The FOO:yes will make sure that element only shows when the "FOO" field has a selected value of "yes".

The EMAIL attribute value will make sure that element only shows when the EMAIL field is not empty.

Was this article helpful? ·