Conditional Elements

Conditional elements are supported in HTML Forms by using two special attributes: data-show-if and data-hide-if.

Using these attributes allows you to hide or show parts of your form by referencing the name attribute of a field in your form.

For example, you could choose to only show the submit button after the email field is filled.

<input type="email" name="EMAIL" required />
<input type="submit" value="Send" data-show-if="EMAIL" />

Let’s do another example where you have a help text is hidden after someone starts typing in the field it describes.

<input type="text" name="NAME" />
<p data-hide-if="NAME">Enter your name in the field above.</p>

Specifying an Exact Value

The examples above will show or hide an element whenever the field that it is depending on contains any value, regardless of the actual value.

Sometimes you want to depend on an exact value though. This can be done by following the field name with a colon and the value you need, like this: NAME:VALUE.

Let’s build a form with a list of checkboxes, where a message shows up only when one particular choice is selected.

<input type="checkbox" name="JOB" value="Marketeer" /> Marketeer
<input type="checkbox" name="JOB" value="Developer" /> Developer
<input type="checkbox" name="JOB" value="Recruiter" /> Recruiter

<div data-show-if="JOB:Recruiter">
    Hi, recruiter!
</div>

Specifying Multiple Values

Continuing with the above example, what if you wanted to show part of your form for both developers and marketeers?

You can specify multiple expected values by separating them with a |.

<input type="checkbox" name="JOB" value="Marketeer" /> Marketeer
<input type="checkbox" name="JOB" value="Developer" /> Developer
<input type="checkbox" name="JOB" value="Recruiter" /> Recruiter

<div data-show-if="JOB:Marketeer|Developer">
    Hi, marketeer or developer!
</div>

Related Posts from Our Knowledge Base

HTML Forms Premium adds an action to let you connect your form data to an external service using a webhook. This feature helps unlock the base plugin in an incredible number of ways. You can send data from your visitors to third-party applications or your own internal software tools. How to Create a Webhook Action […]

HTML Forms Premium includes a visibility feature that lets you only show a form when a user is logged in to your site. This feature lets you have greater control over who can see, and submit data, to your website. Enabling the Require Users to Log In Feature You’ll need to install HTML Forms Premium […]