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>