Conditional Forms

Conditional Form Fields

The Conditional shortcode shows, hides, enables, or disables a form field based on the value or validity of another field. It is driven entirely by data-condition-* attributes on the field you want to control, referencing a target input by a portion of its id.

How it works

Put the data-condition-* attributes on the wrapper of the field you want to gate. When the target's value satisfies the condition, the wrapper gets the class condition-fulfilled and its inputs, selects, textareas, and buttons are enabled; otherwise they are disabled.

Key attributes

data-condition: the comparison operator. One of ==, !=, >, <, <=, >=, or in. Default ==.
data-condition-target: a substring of the target field's id. The plugin matches with id*=.
data-condition-value: the value to compare the target against.
data-condition-check: value (default) compares the target value, or validate reacts to the target's validation state (aria-invalid).

Enable a submit button when a checkbox is ticked

Here the submit button is disabled until the terms checkbox (id contains conditional-form-tos) has value 1.

<div class="col-12 form-group mb-0"
     data-condition="=="
     data-condition-target="conditional-form-tos"
     data-condition-value="1">
    <button id="conditional-form-submit" name="conditional-form-submit" type="submit" class="btn btn-dark mx-0">Submit Message</button>
</div>

The matching checkbox elsewhere in the form:

<input type="checkbox" id="conditional-form-tos" value="1" class="form-check-input">

Enable only when a field is valid

Use data-condition-check="validate" to gate on validation rather than a specific value. The button below unlocks once the email field (id contains conditional2-form-email) passes validation.

<div class="col-12 form-group mb-0"
     data-condition="=="
     data-condition-target="conditional2-form-email"
     data-condition-check="validate"
     data-condition-value="true">
    <button id="conditional2-form-submit" name="conditional-form-submit" type="submit" class="btn btn-dark mx-0">Submit Message</button>
</div>

Operators

The in operator checks membership: the condition is met when the target value is contained in data-condition-value. The comparison operators (>, <, >=, <=) work for numeric selects and inputs, for example showing a field only when a quantity exceeds a threshold.

<div class="form-group"
     data-condition=">"
     data-condition-target="order-quantity"
     data-condition-value="5">
    <label>Bulk discount code</label>
    <input type="text" class="form-control">
</div>

Tips

data-condition-target matches a partial id, so keep target ids distinctive to avoid accidental matches.
The controlled fields are disabled (not removed) when the condition fails, so their layout stays stable.
Use data-condition-check="validate" with Canvas form validation to require a correctly filled field before enabling submit.
Radio and checkbox targets are read on change; text inputs are read on input, so the UI updates live as the user types or selects.

Usage

<div class="col-12 form-group mb-0">
	<div class="form-check">
		<input id="conditional-form-tos" name="conditional-form-tos" type="checkbox" class="form-check-input" value="1">
		<label class="form-check-label" for="conditional-form-tos">By checking this you agree to the <span style="text-decoration:underline dotted; text-underline-offset: 0.375rem;">Terms of Service</span></label>
	</div>
</div>

<div class="col-12 form-group mb-0" data-condition="==" data-condition-target="conditional-form-tos" data-condition-value="1">
	<button id="conditional-form-submit" name="conditional-form-submit" type="submit" class="btn btn-dark mx-0">Submit Message</button>
</div>

Note: The above code will display the Submit Message Button when the Terms of Service Checkbox is checked.

How to Use

1
Step 1
Add the data-condition Attribute to the Input Wrapper to activate the Conditional Input
2
Step 2
Set the data-condition-target Attribute on the Conditional Input Wrapper to check the condition against the Target Input.
3
Step 3
Set the data-condition-value Attribute on the Conditional Input Wrapper to satisfy the condition value of the Target Input.

Settings

Setting	Description
`data-condition`	Condition of the Input Example: `==`
`data-condition-target`	The Target Input to match the Condition against. Must match the `ID` attribute of the Target Input Example: `conditional-form-tos` Target is `#conditional-form-tos`
`data-condition-value`	Value to match the `value` attribute of the Target Input Example: `1` If the Value of the Checkbox Input is `1`. You can change the Values as you please.
`data-condition-check`	Type of Check to perform on the Conditional Input Wrapper against the Target Input Example: `validate` If you set the `data-condition-check` Attribute as validate, the Conditional Input Wrapper will be display once the Target Input is valid

Extras

Canvas can show/enable a field only when another field passes validation, using data-condition-check="validate". Put the conditional attributes on the .form-group wrapper.

<div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" class="form-control required" required>
</div>

<div class="form-group"
     data-condition="=="
     data-condition-target="email"
     data-condition-check="validate">
    <label for="subscribe">Subscribe me</label>
    <input type="checkbox" id="subscribe" name="subscribe" class="form-check-input">
</div>

How it works:

data-condition-target names the field to watch (matched against an id containing that value).
data-condition-check="validate" fulfils the condition only when the target field is valid (aria-invalid="false"), watched live via a MutationObserver.
When fulfilled the group gets condition-fulfilled and its inputs are enabled; otherwise they are disabled.

For plain value matching use data-condition-check="value" (default) with data-condition-value and operators ==, !=, >, <, >=, <=, or in.

Was this page helpful?