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.

Login with Envato

Conditional Input with Validate Condition

Private Content

To view this Content, you must be logged in with your Envato Account.

Login with Envato

Last Modified: April 17, 2023

Need Help?