Discover in this tutorial how to display the GDPR legal text in an accordion format in a Gravity Forms form using a little HTML and CSS, without Javascript.
Since the GDPR came into force, we have the obligation to add a first layer of information in any form in which we collect data (even if it’s just the name and email).
This complicates the layout of lead capture forms or even contact forms, since we have to enter much more text and it is not always easy to do so while maintaining an attractive design.
Today I bring you a pretty elegant solution that is a good compromise between complying with the GDPR and not destroying the design of your forms with Gravity Forms.
The idea is to show the first layer of information in accordion format. That is, it’s hidden but accessible to the user with just one click.
Like this:
It’s great, isn’t it?
Best of all, you can get it with a Gravity Forms HTML field and a little CSS, no JavaScript.
Let’s take a look at it.
Steps to display the GDPR legal text in an accordion format
1. Add an HTML block in Gravity Forms
Once you have created the form to your liking, add an HTML block at the end of the form.
Add the following lines of HTML at the top:
To see this and another 1097 code snippets of this website, login or subscribe here.
Finally add the “gdpr-accordion” class to the HTML field:
With this you now have the whole form part of Gravity Forms.
2. Apply the CSS styles
To make this new HTML block behave like an accordion you need to add some CSS.
Add the following snippet to the end of the style.css file:
To see this and another 1097 code snippets of this website, login or subscribe here.
You got it.
Now the first layer of GDPR information is hidden but is shown just by clicking on the more information text.
I can only add that the HTML and CSS are wonderful. 🙂
Conclusion
Now you know how to comply with the GDPR by adding the legal tag in Gravity Forms in a more elegant way, thanks to an accordion effect.
Any questions? If you are a subscriber, let me know in the comments.
