Canvas Docs

Conditional Forms

Display Form Fields based on your custom Form Field Condition with Canvas.

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. 1

    Step 1

    Add the data-condition Attribute to the Input Wrapper to activate the Conditional Input

  2. 2

    Step 2

    Set the data-condition-target Attribute on the Conditional Input Wrapper to check the condition against the Target Input.

  3. 3

    Step 3

    Set the data-condition-value Attribute on the Conditional Input Wrapper to satisfy the condition value of the Target Input.

Settings

SettingDescription
data-conditionCondition of the Input
Example: ==
data-condition-targetThe 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-valueValue 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-checkType 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

<div class="col-6 form-group mb-0">
	<label for="conditional-form-email">Email Address</label>
	<input id="conditional2-form-email" name="conditional-form-email" type="email" class="form-control required">
</div>
<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>