Conditional fields or elements

Mailchimp for WordPress supports conditional fields or elements by using two special attributes: data-show-if and data-hide-if. The attribute value can be either just a field name or a field name followed by a colon and the expected field value.

For example, let’s assume you have a field named FOO and you want to show some text whenever the option yes is selected.

<p>
    <label>Dropdown Group</label><br />
    <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>

By adding data-show-if="FOO:yes" to the element in your form, the plugin will only show this element when the specified criteria is met.

Accepting multiple field values

You can specify multiple expected values by separating the values with a pipe-character.

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

Hide submit button until email field is filled

Let’s do another example where we hide the form’s submit button until after the email address field is filled.

<p>
    <label>Email address</label><br />
    <input type="email" name="EMAIL" required />
</p>
<p data-show-if="EMAIL">
    <input type="submit" value="Subscribe" />
</p>