-
Posts
-
Check out the attached screenshot from my Comments form (at the end of each blog post). This is viewed on a Mac, in the latest version of Chrome.
1. How can I change what fields show up, and which are required? Specifically, I’d like only Name and Website, and would like to control what’s required/optional.
2. Why the heck are the field labels aligned over on the right side? They should either be on top or left-aligned to the fields.
3. Notice the two checkboxes at the bottom. They’re not left-aligned properly, and the issue is even worse on mobile devices (the text isn’t even readable, because it overlaps itself.
Hey Bobby!
Here is a guide for some info, regarding the contact form:
https://premium.wpmudev.org/blog/customizing-wordpress-comment-form/let us know if that helps you out.
Best regards,
BasilisSorry, no, that was a bit too technical for me. If there’s some CSS you can spoon-feed me that’ll 1) align those field labels properly and 2) align the two checkbox values at the bottom properly, I’d be really grateful.
Thanks!
Hey!
1.) Please add this in the functions.php file:
add_filter('comment_form_default_fields', 'comment_form_default_fields_mod', 10, 1); function comment_form_default_fields_mod($args) { $args['author'] = '<p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" aria-required="true" required="required" /></p>'; $args['email'] = '<p class="comment-form-email"><label for="email">Email</label> <input id="email" name="email" type="text" value="" size="30" aria-describedby="email-notes"/></p>'; $args['url'] = '<p class="comment-form-url"><label for="url">Website<span class="required">*</span></label> <input id="url" name="url" type="text" value="" size="30" aria-required=true" required="required" /></p>'; return $args; }2.) That is the default style of the WP comment form. Add this in the Quick CSS field if you want to move the label above the field:
#commentform label { position: relative; left: auto; margin-bottom: 5px; }3.) It doesn’t look that way on our installation. Please post the actual page with the form.
Cheers!
IsmaelSure, that form is at: http://www.guitaranswerguy.com/dont-forget-to-wipe-your-strings (or any other blog post)
Your CSS did indeed move the field labels above the fields, but it affected #3 adversely. Now, the text is on the left and the checkboxes are on the right. So, a slightly different problem.
We’re getting closer though.
Thanks,
Bobby
Hi!
so you want the checkbox to be on the left side? if yes use this code in Quick CSS field:
p.comment-subscription-form { display: flex; }Best regards,
AndyThat did get them to the left, so we’re getting closer. Only remaining issue is the vertical alignment. You can see them here at the end of this post:
http://www.guitaranswerguy.com/dont-forget-to-wipe-your-strings/
Hi!
try to add this code as well:
input#subscribe_comments, input#subscribe_blog { position: relative; top: 7px; }and adjust as needed. Hope this will work for you!
Regards,
Andy
- The topic ‘Blog Comments Form – Want to change fields. Also,a CSS issues…’ is closed to new replies.