How to Tick a Checkbox in Fluent Forms inside an OxyExtras OffCanvas when a Button is Clicked

This members-only tutorial provides the steps to use jQuery to change the value of a Fluent Forms form's checkbox that is inside an OxyExtras' OffCanvas component to checked when a button is clicked.

Step 1

Enable Fluent Form and OffCanvas components in OxyExtras' settings.

Edit your Template/Page with Oxygen and add a Section.

Add an OffCanvas component inside the Section and inside that, a Fluent Form component.

You may want to increase the Offcanvas width to something like 400px.

Select the form you wish to be shown in the off canvas.

Step 2

Add a Text Link/Button component that should trigger the off canvas.

Advanced → Attributes → Add Attribute

name: data-more-info
value: Item 1

Change Item 1 to the value of your checkbox field's option that should be ticked when the button is clicked.

By default, the values of a Fluent Form's Checkbox Field are the same as their labels.

If you wish to change them, edit your form, tick "Show Values" and change them.

Step 3

Add a Code Block below the Button.

PHP & HTML:

<?php
	// echo "hello world!";
?>

JavaScript: