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:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.