Integrity and personal data consent have been a hot topic for a long time (did anyone say GDPR?). Here’s a tutorial on how to create a mandatory checkbox with a link to your Privacy Policy or Terms and Conditions for your Divi forms.
Video tutorial: Add a Consent Checkbox with a Privacy Policy Link
This video is a part of our complete course Create a Website with WordPress and Divi.
We will also cover how to make the link open in a new tab and how to style the link.
1. Start by creating your Privacy Policy or Terms and Condition page.
When you install WordPress, an automatic draft is created that you can use as a starting point, but you should check the text with a legal expert to be on the safe side.
2. Create your form by inserting a Divi Contact Form module on your page.
3. Now it’s time to add the checkbox as the last form field in your Form Module content settings by clicking Add New Field.
4. Type “policy” or such in the Field ID field (this text is just for the database and is not visible for your visitors). If you don’t want to display a title above your consent checkbox, just add a blank space in the Title field.
You can add as many fields as you like to your form. Just make sure that place the consent checkbox in the bottom.
5. Scroll down and open the tab Field Options. Choose the Type Checkboxes.
Now it’s time to add your consent text and the link to your Privacy Policy page.
6. Start by adding the text that should be displayed before your policy link, for example: “I have read and accept the “.
Pleaser note that I end the sentence with a blank space to add a space between the text and the upcoming link .
7. Did you notice the small grey link icon in the checkbox Options field? It’s easy to miss. Click on the icon to add the link to your Privacy Policy page right after your previous checkbox text.
Here’s the hidden feature where you easily can add a link to your Privacy Policy or Terms of Use. Sweet!
8. Now you have the option to add the link URL in the first field and the link text, for example Privacy Policy, in the second field.
If you don’t add any Link Text at all, a neat link icon will be displayed in frontend instead.
9. Save your changes and make sure that the checkbox field is marked as a Required Field to make it mandatory.
10. Save the page and make sure that your link really works in frontend before you grab a well-deserved cup of coffee.
Your checkbox field should look something like this
This form layout comes from the Ebook Layout Pack from Elegant Themes.
Bonus #1: Open the link in a new tab
Did you notice that the Privacy Policy link opens in the parent tab? It’s never a good idea to push a user off your page in the middle of a form; there’s a risk that the form is reset and the user might not have the time or will to redo everything from scratch.
There are no settings for opening the link in a new tab in the Divi Form Module, but don’t worry. We’ll solve that with a few lines of JavaScript:
Paste the code in one of these locations:
- In the <body> field in Divi » Theme Options » Integration. This means that the script will be read in all of your pages and posts and thus apply on all your Divi forms.
- If you want to reduce the number of scripts on your website, you can insert a Divi Code module only on the pages that contains Divi forms.
Bonus #2: Style the Privacy Policy link text
The link text will be bold and underlined by default. Do you want to change text color, remove the bold style and/or remove the underlining? Just add the CSS snippet below in Divi » Theme Customizer » Custom CSS:
.et_pb_contact_field a { color: #31d190; font-weight: normal; text-decoration: none; }
Just replace #31d190 with the link color of your choice.
That’s a wrap!
Good luck with your forms! And remember, this post does not provide any legal advice on how to handle personal data or GDPR. Always consult a legal expert if needed.
👉 Related post: 3 Best Divi Contact Form Plugins Comparison – Which Is Better?
👉 Related post: 7 Tips For Better Divi Forms in WordPress
👉 Related post: How to Style the Divi Form Success Message + Two Examples
Thank you for posting this ‘How to add a privacy policy in DIVI forms” on the DIVI Facebook group. This is an amazing solution. A huge help!!!
Thanks Clayton, I’m glad to help! 🙂
Thanks, using space on the title was a great hack.
I’m glad you liked it Mahbub! 🙂
Thanks very much, I had never noticed that link icon, really helped me.
You’re welcome Richard! 🙂