Jump to content

Add a GDPR checkbox to FieldtypeComments


Edison
 Share

Recommended Posts

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:

176818027_ScreenShot2019-07-13at01_07_40.thumb.png.4d5338940ce5c148df0a116d5d43b4e9.png

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):

121574830_ScreenShot2019-07-13at01_08_17.thumb.png.e407adcdc8d955fc752e2a9e0f97f260.png

Now we accept the box

705519412_ScreenShot2019-07-13at01_08_40.thumb.png.fafb87d482bca542654a2dc17bcf8fbb.png

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.

1649115601_ScreenShot2019-07-13at01_09_05.thumb.png.3e312eb20aa84bdc2462cd0053047fa8.png

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

  • Like 9
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...