Mailchimp for WordPress supports conditional fields or elements by using two special attributes:
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>
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>