Ticking “Show comments cookies opt-in checkbox.” at Settings > Discussion in WordPress will show a “Save my name, email, and website in this browser for the next time I comment.” checkbox in the comment forms.

If you want to make this checkbox mandatory before the comment can be submitted for GDPR or any other reason, follow this tutorial.

Step 1

Load the following jQuery on the template that gets applied to all the single posts:

(function($) {
    $('#wp-comment-cookies-consent').change(function () {
        $('#commentform #submit').prop("disabled", !this.checked);
    }).change()
})(jQuery);

where #wp-comment-cookies-consent is the ID of the checkbox and #commentform #submit is the selector for the comment form submit button.

If you are using Oxygen, edit the Blog Post Template, add a Code Block and paste it in the JavaScript section.

Step 2

Let’s add some CSS to give the disabled appearance to the submit button when it has the disabled attribute in the HTML.

#commentform #submit[disabled] {
    background-color: #ddd;
}

Note for Oxygen users:

You will need to also add the following for the comment form labels including the checkbox text to appear:

.oxy-comment-form label {
    display: block;
}

.comment-form-cookies-consent {
    display: flex;
}

#wp-comment-cookies-consent {
    width: auto;
    margin-right: 10px;
}

.oxy-comment-form .comment-form-cookies-consent label {
    line-height: 1.1;
    font-weight: normal;
}

References:

https://wpdevdesign.com/how-to-customize-the-comment-form-in-oxygen/

https://stackoverflow.com/a/28428821/778809

https://www.w3schools.com/css/css_attribute_selectors.asp

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: