Conditional Forms

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

Code Example

<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

Step 1

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

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

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

Settings

Private Content

You must be logged in with your Envato Account for Free in order to view this Content.

Conditional Forms

Code Example

How to Use

Step 1

Step 2

Step 3

Settings

Private Content

Conditional Input with Validate Condition

Private Content