Comments blocked by recaptcha #3

New issue

Open

opened 2025-06-18 14:27:04 +10:00 by j · 0 comments

j commented

2025-06-18 14:27:04 +10:00

Owner

While recaptcha is enabled for the comments form, the following HTML is generated for a comment:

<div class="comments-area" id="comments">

	
	
		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3><form action="https://test.example.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group mb-3 comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea class="form-control"  id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></div><div class="form-group mb-3comment-form-author"><label for="author">Name <span class="required">*</span></label> <input class="form-control"  id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></div>
<div class="form-group mb-3comment-form-email"><label for="email">Email <span class="required">*</span></label> <input class="form-control"  id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></div>
<div class="form-group mb-3comment-form-url"><label for="url">Website</label> <input class="form-control"  id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></div>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-secondary" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='39485' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form>	</div><!-- #respond -->
	
</div><!-- #comments -->

The following script is located below the <footer>, as expected:

<script src="https://www.google.com/recaptcha/api.js?render=6Lc9tWQrAAAAAC2zypPmwxJPZAZj-qfntLvMxZLu" id="fwp-recaptcha-js"></script>
<script id="fwp-recaptcha-js-after">
document.addEventListener('DOMContentLoaded', function() {
    grecaptcha.ready(function() {
        grecaptcha.execute('6Lc9tWQrAAAAAC2zypPmwxJPZAZj-qfntLvMxZLu', {action: 'submit'}).then(function(token) {
            document.querySelectorAll('form').forEach(function(form) {
                if (!form.querySelector('input[name="g-recaptcha-response"]')) {
                    let input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'g-recaptcha-response';
                    input.value = token;
                    form.appendChild(input);
                }
            });
        });
    });
});
</script>

While recaptcha is enabled for the comments form, the following HTML is generated for a comment: ``` <div class="comments-area" id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3><form action="https://test.example.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="form-group mb-3 comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea class="form-control" id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></div><div class="form-group mb-3comment-form-author"><label for="author">Name <span class="required">*</span></label> <input class="form-control" id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></div> <div class="form-group mb-3comment-form-email"><label for="email">Email <span class="required">*</span></label> <input class="form-control" id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></div> <div class="form-group mb-3comment-form-url"><label for="url">Website</label> <input class="form-control" id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></div> <p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-secondary" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='39485' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> ``` The following script is located below the `<footer>`, as expected: ``` <script src="https://www.google.com/recaptcha/api.js?render=6Lc9tWQrAAAAAC2zypPmwxJPZAZj-qfntLvMxZLu" id="fwp-recaptcha-js"></script> <script id="fwp-recaptcha-js-after"> document.addEventListener('DOMContentLoaded', function() { grecaptcha.ready(function() { grecaptcha.execute('6Lc9tWQrAAAAAC2zypPmwxJPZAZj-qfntLvMxZLu', {action: 'submit'}).then(function(token) { document.querySelectorAll('form').forEach(function(form) { if (!form.querySelector('input[name="g-recaptcha-response"]')) { let input = document.createElement('input'); input.type = 'hidden'; input.name = 'g-recaptcha-response'; input.value = token; form.appendChild(input); } }); }); }); }); </script> ```

j added this to the MVP project 2025-06-18 14:27:04 +10:00

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: free-wordpress/fwp-recaptcha#3

No description provided.

Rows
Columns