CSS Form Comment Box with Feedback

Today, We are going to create a beautiful looking CSS Comment Box form and also style the comments feedback so they look nice.

Every website on the internet, whether it’s a product or a simple blog site. It should need a comment form so users can leave their feedback about a specific product or service.

For the comment box, We will create the basic input fields (Name, Email, Website & Comment) which any comment box needs.

For Feedback, I will design the reader’s comments section with four different children or sub comments. This child comments section also called an in-depth comment.

While creating different types of forms like contact us or login form, It is important to give them styling to make them attractive for users who going to fill out.

The feedback engages the users and allows them to know more about the product. It also helps a site owner to know how users like or disliking their site services or product.

How to Style Comment Box Using CSS

The CSS feedback & comment form we are going to create is simple, attractive and very easy to use. You can use it on any kind of dynamic custom website or even on WordPress CMS site.

Because it’s coded only in HTML/CSS so while implement on dynamic site, It is important to note that, It will not save any user data and you have to code into PHP along with MySQL.

It’s not only a commenting form but also has user feedback with child feedbacks. Let’s get started!

HTML Structure

To organize the code in a good manner, We keep all the HTML for comment box inside a div class name content so you can easily understand it.

We divided the content into two different sections. The first one called #reader which holds all the feedback HTML code and the second one is #respond which will have a simple comment form.

<div class="content">
  <h2>This Can be a Heading</h2>
  <div id="reader">
    All Comment Feedback Goes Here ....
  </div>
  <div id="respond">
    We will add a comment form here ..
  </div>
</div>

1: Feedback Markup

Ok, Let’s take a look the markup for our first section which is #reader. We did define the ol then li and place the HTML code for parent feedback inside it.

You notice different divs inside the list element and each one holds the different information about the user. Like a div with class comment_box include the user picture.

Similar to a div class name inside_comment have user meta information.

<div class="content">
  <h2>This Can be a Heading</h2>
  <div id="reader">
    <ol>
    	<li>
    	   <div class="comment_box"> <a href="#"> <img src="images/avatar.jpg" alt="avatar"> </a>
              <div class="inside_comment">
                <div class="comment-meta">
                  <div class="commentsuser">Jone</div>
                  <div class="comment_date">December 1, 2012 at 1:32 am</div>
                </div>
              </div>
              <div class="comment-body">
                <p>Great blog right here! Also your website quite a bit up fast! What web host are you the use of? Can I am getting your affiliate link for your host? I want my site loaded up as fast as yours lol.</p>
              </div>
              <div class="reply"> <a href="#">Reply</a> </div>
              <div class="arrow-down"></div>
            </div>
        </li>
    </ul>  
  </div>
  <div id="respond">
  	We will add a comment form here ..
  </div>
</div>

2: Adding In-Depth Feedback

It’s super easy to add child feedback inside the parent comment feedback. All you have a little knowledge of HTML. All you need to add the following code just right below the comment_box

To create in-depth feedback, You simply need to define a UL with a class children and then place all the same parent feedback HTML code inside it.

<ul class="children">
  <li> 
    <!-- Child Comment Box 1-->
    <div class="comment_box"> <a href="#"> <img src="images/avatar.jpg" alt="avatar"> </a>
      <div class="inside_comment">
        <div class="comment-meta">
          <div class="commentsuser">Pat</div>
          <div class="comment_date">December 1, 2012 at 1:32 am</div>
        </div>
      </div>
      <div class="comment-body">
        <p>Great blog right here! Also your website quite a bit up fast! What web host are you the use of? Can I am getting your affiliate link for your host? I want my site loaded up as fast as yours lol.</p>
      </div>
      <div class="reply"> <a href="#">Reply</a> </div>
      <div class="arrow-down"></div>
    </div>
  </li>
</ul>

3: Adding Comment Form

Now Let’s add the form in our second section which is #respond. Each input field added inside the div class name commentfields.

<div class="content">
  <h2>This Can be a Heading</h2>
  <div id="reader">
    All Comment Feedback Goes Here ....
  </div>
  <div id="respond">
    <h3>Leave A Response</h3>
    <p>Your email address will not be published with your comments.</p>
    <form id="commentForm" method="post" class="cmxform">
      <div class="commentfields">
        <label class="name">Name <span>*</span></label> 
        <input name="name" id="cname" class="comment-input required" type="text">
      </div>
      <div class="commentfields">
        <label class="email">Email <span>*</span></label>
        <input name="email" id="cemail" class="comment-input required email" type="text">
      </div>
      <div class="commentfields">
        <label class="website">Website</label>
        <input name="website" class="comment-input" type="text">
      </div>
      <div class="commentfields">
        <label>Comments <span>*</span></label>
        <textarea id="ccomment" class="comment-textarea required" name="comment"></textarea>
      </div>
      <div class="commentfields">
        <input class="commentbtn" type="submit" value="Post Comment">
      </div>
    </form>
  </div>
</div>

CSS Style for Comment Box

The child feedback comments are included in, ul, li each child comment have main div class name comment_box which needs to add to ul, li. I have added three child comments/post but you can add more as you need but for this, you need to edit the CSS file a little bit, like if you want to add fourth child comments/post that you need to add another CSS class. If you see the component.css file you will find the following classes name.

You will find all the styles in the comment.css. You can download the source file and include it in your website header. Currently, our comment form and feedback template support a maximum of three child comments.

Let’s check out all the classes which need support up to 3 in-depth comments.

#reader ol li ul li .comment_box {
    margin-left: 40px;
    width: 570px;
}
#reader ol li ul ul li .comment_box {
    margin-left: 80px;
    width: 530px;
}
#reader ol li ul ul ul li .comment_box {
    margin-left: 120px;
    width: 490px;
}

If you see above CSS code, It has one ul in the first line of code but inline-five it has two ul and in line nine it has three ul

Which means that as many child feedback comment you add you need to add one more ul. You also need to reduce the width of the child comment and increase the marign-left

That means Each child feedback comment require an extra UL . If you want to add more three than you need to define another UL.

Let’s take a look to add another class if you want to add support for four child comment.

#reader ol li ul ul ul ul li .comment_box {
    margin-left: 160px;
    width: 450px;
}

Form Validation

The comment form doesn’t support any validation. If you want to add any javascript or jquery validation you can add it but I have made this form compatible with jQuery Validation Plugin – Form.

Let me explain to you, how you can implement this comment form. First of all, you need to add following files to your page.

http://code.jquery.com/jquery-latest.js

Now you need to select a form to validate and call the validate method. You can see form tag have included an ID commentForm so we need to call it into the validating method, so our code will be like that.

  $(document).ready(function(){
    $("#commentForm").validate();
  });