Add a GDPR checkbox to FieldtypeComments

[Edison]

While working on optimizing Comments field for my blog, I noticed it could have been useful to have a GDPR checkbox in the form, to get privacy acceptance before a comment is submitted. 

At the beginning I though to inject the checkbox processing the rendered comment form, but as I already modified FieldtypeComments to create a Language field, I decided to continue on that road to add the GDPR checkbox.

We will not modify the original FieldtypeComments in wire/modules/Fieldtype/FieldtypeComments, but copy it to site/modules/FieldtypeComments. Please refer to the initial part of this tutorial for the detailed steps to duplicate the module and make PW aware of which module version to use.

 

Now that FieldtypeComments is duplicated, we can proceed with the necessary modifications. Inside the module there are 14 files, but do not worry ... only ContactForm.php and (optionally) comments.css will have to be modified.

First we will modify the $options class property of ContactForm.php to add a new 'gdpr' label. Later we will use this option to pass the label's text associated with the checkbox.

protected $options = array(
  …
  'labels' => array(
    'cite' => '',	// Your Name
    'email' => '',	// Your E-Mail
    'website' => '',// Website
    'stars' => '',	// Your Rating
    'text' => '',	// Comments
    'submit' => '', // Submit
    'starsRequired' => '', // Please select a star rating
    'gdpr' => '', // >>>>> ADD THIS LINE
  ),

As a second step it will be necessary to create the markup of the checkbox and of its label. We will do that by modifying function renderFormNormal() in ContactForm.php.  Uikit 3 Site/Blog Profile is indirectly calling this function, so for my purpose it was enough. In case your application is using threaded comments, it will be necessary to modify also renderFormThread().

"\n\t\t<textarea name='text' class='required' required='required' id='{$id}_text' rows='$attrs[rows]' cols='$attrs[cols]'>$inputValues[text]</textarea>" .
...
"\n\t</p>" .
"\n\t<p class='CommentFormGdpr {$id}_gdpr'>" . //>>>>> ADD THIS BLOCK - START
"\n\t\t<input class='uk-checkbox' type='checkbox' name='gdpr' value='checked' required='required'>" .
"\n\t\t<label for='{$id}_gdpr'>$labels[gdpr]</label>" .
"\n\t</p>" . //>>>>> ADD THIS BLOCK - END
$this->renderNotifyOptions() .
...

The last ContactForm.php modification will include our checkbox in processInput() to block comments submissions if GDPR checkbox is not filled. Please note this will operate in case you do not place "required" in the <input> directive.

...
$errors = array();
foreach(array('cite', 'email', 'website', 'stars', 'text', 'gdpr') as $key) { //>>>>> ADD 'gdpr' in the array
  ...

Now let's see how to call the modified form. If you are using Uikit 3 Site/Blog Profile you will have simply to modify the template file where ukCommentForm() is called (example: blog-post.php template). There we will prepare our checkbox message and pass it to ukCommentForm() as an argument option.

echo ukHeading3(__('Join the discussion'), "icon=comment");
$gdpr = __('I agree with the processing of my personal data. I have read and accept the Privacy Policy.');
echo ukCommentForm($comments, ['labels' => ['gdpr' => $gdpr]]);

However, if you are using comments in multiple template files, it makes more sense to directly modify ukCommentForm() presetting the new options inside the function body:

$defaults = array(
  'headline' => '',
  'successMessage' =>
  	__('Thank you, your comment has been posted.'),
  'pendingMessage' =>
  	__('Your comment has been submitted and will appear once approved by the moderator.'),
  'errorMessage' =>
 	 __('Your comment was not saved due to one or more errors.') . ' ' .
 	 __('Please check that you have completed all fields before submitting again.'),
  // >>>>> SEE THE HONEYPOT TUTORIAL
  'requireHoneypotField' => 'email2',
  //>>>> ADD THESE FOUR LINES
  'labels' => array(
    'gdpr' =>
    __('I agree with the processing of my personal data. I have read and accept the Privacy Policy.'),
  ),
);

Before testing, we will modify the file comments.css adding these two directives (that's purely optional):

.CommentFormGdpr input[type=checkbox] {
	background-color: white;
}
.CommentFormGdpr label {
	padding-left: 10px
}

Now let's test our form. Once it is filled with our data and comment it will look like this:

If the user is pressing the submit button without accepting the GDPR checkbox, the comment will not be submitted and an error is displayed (in case you have used "required" in <input> you get this tooltip box, otherwise you will get an alert message):

Now we accept the box

After acceptance and submission, the comment form will be successfully sent. The standard success message is shown and the form is again displayed empty (with just cite and email pre-filled) ready for a next comment submission.

Again I hope you will find some useful hint with that.