Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #538506

    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.

    • This topic was modified 9 years ago by Andy.
    #538611

    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,
    Basilis

    #538703

    Sorry, 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!

    #540053

    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!
    Ismael

    #540080

    Sure, 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

    #542460

    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,
    Andy

    #543768

    That 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/

    #544628

    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

    #547279

    Okay, everything looks good now. Thanks!

    #547391

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Blog Comments Form – Want to change fields. Also,a CSS issues…’ is closed to new replies.