How to Implement the Consent Solution in Joomla! with ChronoForms
This tutorial uses ChronoForms, a popular extension for Joomla!, to illustrate how you can integrate the Consent Solution with your Joomla! forms. If you’re using another extension you may still refer to this tutorial as the implementation approach is generally the same.
create (or modify) your form in a way that includes the necessary id tags; and
send the consent data to iubenda APIs.
1. Embed the Consent Solution code
Then paste this code inside the head of all your pages. You can do this via one of the following methods:
access the Template Manager directly; or
if you’re not comfortable with directly editing theme files, you can use a plugin for coding and scripts integration, like HeadTag. Once you’ve installed the plugin, you can access the head by going to Extensions > Plugins > System – Headtag > Menu Item Tags and paste the Consent Solution script.
2. Create or modify your form
Once you’ve included the Consent Solution’s code inside the head of your site, access your Joomla! dashboard and create a form (e.g. “contact”) using the ChronoForms extension.
If you’re already using ChronoForms on your site, simply head to your forms overview page (Components > ChronoForms6) and click on the form you’d like to integrate with the Consent Solution.
Here’s the contact form we’ll be using in our implementation example (name, email, message and newsletter subscription):
On ChronoForms it will look something like this:
Once you’ve defined your form area, you’ll need to customize the form to map its various inputs so that the Consent Solution can actually identify and pull the information that your users enter into the various input points.
To do the mapping you can use the load (or submit) function with the map object. In order for the load/submit function to work you’ll need:
an id for the form element;
different names for all the subject and preferences inputs; and
an id for the submit element;
a. Click on the settings icon next to the form area and add an id to your form:
b. Similarly to the Form ID, add an id to the text fields (in our example, name, email and message):
And to the checkboxes (in our case, “generic” and “newsletter”):
For a mandatory checkbox like the generic above, be sure to:
Disable the validation
Add two triggering events that will enable/disable the submit button (note that we’re using #contact-submit, as indicated on the general configuration of the submit button):
c. Finally, add an id to the submit button as well:
You may also want to add a confirmation message to be shown to your users after they’ve filled out the form (submit > Actions):
Save your changes and make sure that your form is published.
If you’re modifying an already-existing form on your site, jump to the section below, otherwise (if you’ve only just created the form) copy the shortcode generated by ChronoForms:
And paste it in a page of your site (e.g., “Contact us”).
3. Send the Consent data to iubenda APIs
Now that your form is ready you need to make sure that it sends the information to the Consent Solution when the user fills in and submits it. There are two ways to do this:
the load method allows you to send the Consent data to iubenda APIs asynchronously;
the submit method allows you to send the Consent data to iubenda APIs synchronously.
The load function allows you to bind fields of the consent object to input fields of your <form> and to automatically record the consent either by setting up a trigger function under submitElement: or programmatically via a dedicated trigger.
The load function must only be invoked after the declaration of the form object (as can be seen in the example below).
optional: instead of letting it be generated automatically, we can customize the subjectId with the email address – for example – of the subject, all lowercase and with the symbol “-” instead of “.” and “@” (this way for firstname.lastname@example.org the subjectId would become john-doe-iubenda-com).
Be sure to include the submit method after the form (e.g., inside the footer of your contact page), and you’re done!
Once you’ve collected your consents, you’ll be able to sort and analyze your user consent data in the Consent Dashboard.