GDPR Contact form compliance

Here’s a pure CSS solution for the RapidWeaver contact form (might work for other form addons too):

/* Default State */
input[type=submit] {
     display: none !important;
}

/* User Consented State */
input[type=checkbox]:checked ~ input[type=submit] {
     display: inline-block !important;
}

Copy and paste this CSS code into the Custom CSS box in the page inspector or your theme custom.css file.
No further modification needed.

I thought that as we’re in the mindset of trying to reduce dependencies on things like jQuery calls, a pure CSS solution might be ideal to try first!

This should hold-up fine in any browser newer than IE8. It assumes the contact form contains a single checkbox option. If the form already contains checkboxes, you might need to modify the code some more to target a specific checkbox or introduce some jQuery. It simply starts with the submit button hidden, then switches the button state to inline-block when the checkbox is checked.

Or try the premium-deluxe variant with loading animations on the submit button!

/* Default State */
input[type=submit] {
     opacity: 0;
     margin-top: 10px;
     transition: all 500ms ease-in;
}

/* User Consented State */
input[type=checkbox]:checked ~ input[type=submit] {
     opacity: 1.0;
     margin-top: 0;
}

Yes it probably would be possible for somebody to open the web inspector, view the source code, and by-pass this simple verification if they really wanted to. But I don’t honestly think that would be your problem to deal with. If you are demonstrating to the GDPR gods that you are asking for verification from the user, then that should be suffice.

Hope this helps you and anybody else. I will try to get something similar added to the CompactForm stack too.

4 Likes