Sinds de ingang van de GDPR/AVG (de nieuwe Europese privacywetgeving) op 25 mei 2018 is het verplicht om bij alle formulieren waarbij persoonsgegevens worden opgeslagen expliciete toestemming aan website bezoekers te vragen. In dit artikel leg ik je uit hoe je een checkbox toevoegt waarmee je de gebruiker hiervoor toestemming laat geven.

Lees ook: Is jouw website al AVG/GDPR-proof?

De GDPR/AVG checkbox toevoegen

Door onderstaande functie toe te voegen aan je functions.php bestand of een site-specifieke plugin, voeg je een extra checkbox toe aan het formulier waarmee website bezoekers reacties kunnen achterlaten op blogposts.

/**
 * Add terms and policy check box in blog post comment form
 */
add_filter( 'comment_form_default_fields', 'add_gdpr_checkbox', 20 );

function add_gdpr_checkbox( $fields ) {
			
	$commenter = wp_get_current_commenter();

	$consent = empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';

	$fields['cookies'] = '
		<p class="comment-form-privacy"><span class="input-container">
			<input id="cookies_consent" name="cookies_consent" type="checkbox" value="yes"' . $consent . ' />' . '<label for="wp-comment-cookies-consent">' . __( 'I consent with the privacy policy', 'your-text-domain' ) . '<span class="required">*</span></label></span><span class="field-description">' . sprintf( __( 'When submitting this form you agree with the storage and use of the submitted personal data by this website, as stated in our <a href="%s">privacy policy</a>.', 'your-text-domain' ), home_url('/link-to-your-privacy-policy') ) . '</span></p>';

	return $fields;
}

Vergeet niet om de link naar je privacy policy pagina aan te passen wanneer je bovenstaande code plakt.

Afhankelijk van de vormgeving van je theme (onderstaand voorbeeld is van de website van Laboro et Emergo) komt het er dan ongeveer zo uit te zien:

Validatie met jQuery Validate

Maar dan zijn we er nog niet, want er mist nog validatie van het veld. Dat wil zeggen dat er een foutmelding verschijnt wanneer de bezoeker deze checkbox niet aanvinkt, maar wel de reactie probeert te plaatsen.

Hiervoor gebruiken we javascript in de vorm van jQuery Validate. Deze library checkt of alle benodigde velden zijn ingevuld, en geeft vervolgens een foutmelding als er gegevens ontbreken en als de checkbox die we zojuist hebben aangemaakt niet is aangevinkt.

Onderstaande code kan je onder de functie plakken die je eerder hebt geplaatst in je functions.php bestand of je site-specifieke plugin.

/**
 * Validate required GDPR private policy checkbox
 */
add_action('wp_footer', 'comment_validation_init');

function comment_validation_init() {
	
	// Check if is blog post and comments are enabled
	if(is_single() && comments_open() ) { ?>
		
		// Add jQuery Validate
		<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

		<script type="text/javascript">
			jQuery(document).ready(function($) {

				$('#commentform').validate({
					rules: {
						author: {
							required: true,
							minlength: 2		// Checks if there are at least 2 characters in input field
						},
						email: {
							required: true,
							email: true
						},
						cookies_consent: {
							required: true,
						},
						comment: {
							required: true,
							minlength: 5 // Checks if there are at least 5 characters in input field						
						}
					},
					messages: {
						author: "<?php echo __('Please fill in your name.', 'your-text-domain'); ?>",
						email: "<?php echo __('Please enter a valid email address.', 'your-text-domain'); ?>",
						privacy: "<?php echo __('You must agree to our privacy policy by checking the box.', 'your-text-domain'); ?>",
						comment: "<?php echo __('Please enter a comment.', 'your-text-domain'); ?>"
					},
					errorElement: "div",
					errorPlacement: function(error, element) {
						if (element.attr("type") == "checkbox") {
							error.insertAfter($(element).parent().last());
						} else {
							element.after(error);
						}
					}
				});
			});
		</script>
	<?php
	}
}

De foutmelding ziet er dan als volgt uit:

Beoordeel deze post:

Gemiddeld: 4 / 5. Aantal beoordelingen: 1

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?