WP SITES

2948 Tutorials & 189 Plugins
Quote

Display Comment Form Author, Email & URL Fields Inline

—

by

Brad Dalton

The CSS in this tutorial enables you to display all 3 comment fields inline as seen in this screenshot:

Comment Form Fields Inline

Here’s the CSS which you can add near the end of your style.css file before your Media Queries:

.comment-form-author,
.comment-form-email,
.comment-form-url {
	display: inline-block;
	width: 32.9%;
}

.comment-respond,
.entry-pings {
	padding: 0;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
	width: 98%
}

You could also use this CSS in the Media Queries section of your child themes style.css file so each field displays 100% width once the screen size is 767px or less:

@media only screen and (max-width: 767px) {

    .comment-form-author,
    .comment-form-email,
    .comment-form-url {
	    width: 100%;
    }

}

Might need to clear any server/plugin or browser caching if the changes aren’t showing up.

6 responses to “Display Comment Form Author, Email & URL Fields Inline”

  1. Kristie Hill Avatar
    Kristie Hill

    Perfect timing! I just commented on Brian’s blog about how much I loved his comment box inline. It has been on my to do list to go steal – borrow – uhh… inspect his code and implement it on my blog. Now, I’ll just use this. THANKS!

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Its very different. Never seen one like that before.

      I guess you could modify this code, add a full width background color and make it look something like what Brian has.

      I wanted to make a really small comment form that can be inserted between paragraphs using a shortcode which i will do at some stage.

      Reply
  2. Mukesh Mali Avatar
    Mukesh Mali

    how can hide Website box in comment form …. likes yours ….. ????

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Use the PHP code in this tutorial

      Don’t re-publish it please.

      Reply
  3. Rick R. Duncan Avatar
    Rick R. Duncan

    Very easy tutorial to follow and works perfectly. Thanks for the tut Brad!

    -rick

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome Rick.

      Reply

Was This Tutorial Helpful?