1

I would like to have the comment form display, from top to bottom: 1- the comment-form-comment; 2 - the comment-form-url; 3 - the comment-form-email; 4 - the comment-form-author; 5 - the submit button; 6 - the subscription check-box from a plugin;

According to the 4th reply found in this question: https://wordpress.stackexchange.com/a/50602/66195 I was able to experiment with these CSS rules:

#commentform {
    display:table;
    width:100%;   
}
.comment-form-comment {
    display: table-header-group; 
}
.comment-form-author {
    display: table-footer-group;
}

but the .comment-form-author ends up below the submit button and the subscription check-box, which is not only not what I need, I also realize I have no clue on how to reorder the middle elements - that would be displaying as table-row-group. Can anyone guide me on how to customize the order of the elements in the comments form?

PS - In case more context can help you guiding me to a different approach: I'm looking to adapt and use the comments form as a form for users to submit content, which I would replace in the posts content with the help of a shortcode plugin. The free versions of the form-building plugins that I found have different limitations and I think the Wordpress comments form might keep more possibilities open, especially when combining it with other plugins.

1

You could use flexbox instead of table if wanting to do this with css. Flexbox lets you order elements easily:

#commentform {
    display: flex;
    flex-flow: column;
}
.comment-form-comment {
    order: 1;
}
.comment-form-url {
    order: 2;
}
.comment-form-email{
    order: 3;
}
.comment-form-author{
    order: 4;
}
.form-submit{
    order: 5;
}

Here's an example: http://codepen.io/candid/pen/NxKJyW/

  • 1
    That's an interesting approach.ps: I recently played with comment form fields rearrangement here, but that was via PHP. – birgire Dec 3 '15 at 12:53
  • Thanks, yea I'm a huge fan of flexbox. There's not much I've found it can't do when it comes to layouts. Unfortunately this method doesn't work on older version of IE (like basically everything else) so your answer is probably the better way to go! – Bryan Willis Dec 6 '15 at 0:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.