Comment Box

• Posted: January 8, 2016
• / By: Magda
• / In:

HTML markup

CSS

<section class="ct-u-backgroundLight ct-contactSection--blog"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2 text-center"> <h6 class="ct-u-paddingTop65 ct-u-paddingBottom40 ct-addComment">Add a comment</h6> <form action="assets/form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" class="contactForm validateIt"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group ct-u-paddingBottom15"> <input type="text" name="field[]" placeholder="Your Name" required="" class="form-control input-typeSecond"> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group ct-u-paddingBottom15"> <input type="text" name="field[]" placeholder="Last Name" required="" class="form-control input-typeSecond"> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group ct-u-paddingBottom15"> <textarea rows="6" name="field[]" placeholder="Comment" class="form-control input-typeSecond"></textarea> </div> </div> </div> <div class="row ct-u-paddingTop25"> <button type="submit" class="btn btn-primary btn-sm btn-border btn-stretched">submit the form</button> </div> </form> <div style="display:none" class="successMessage alert alert-success ct-u-marginTop15"> <button type="button" data-dismiss="alert" aria-hidden="true" class="close">&times;</button> <p>Thank You!</p> </div> <div style="display:none" class="errorMessage alert alert-danger ct-u-marginTop15"> <button type="button" data-dismiss="alert" aria-hidden="true" class="close">&times;</button> <p>Ups! An error occured. Please try again later.</p> </div> </div> </div> </div> </section>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<section class="ct-u-backgroundLight ct-contactSection--blog">   <div class="container">     <div class="row">       <div class="col-md-8 col-md-offset-2 text-center">         <h6 class="ct-u-paddingTop65 ct-u-paddingBottom40 ct-addComment">Add a comment</h6>         <form action="assets/form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" class="contactForm validateIt">           <div class="row">             <div class="col-md-6 col-sm-6">               <div class="form-group ct-u-paddingBottom15">                 <input type="text" name="field[]" placeholder="Your Name" required="" class="form-control input-typeSecond">               </div>             </div>             <div class="col-md-6 col-sm-6">               <div class="form-group ct-u-paddingBottom15">                 <input type="text" name="field[]" placeholder="Last Name" required="" class="form-control input-typeSecond">               </div>             </div>           </div>           <div class="row">             <div class="col-md-12 col-sm-12">               <div class="form-group ct-u-paddingBottom15">                 <textarea rows="6" name="field[]" placeholder="Comment" class="form-control input-typeSecond"></textarea>               </div>             </div>           </div>           <div class="row ct-u-paddingTop25">             <button type="submit" class="btn btn-primary btn-sm btn-border btn-stretched">submit the form</button>           </div>         </form>         <div style="display:none" class="successMessage alert alert-success ct-u-marginTop15">           <button type="button" data-dismiss="alert" aria-hidden="true" class="close">&times;</button>           <p>Thank You!</p>         </div>         <div style="display:none" class="errorMessage alert alert-danger ct-u-marginTop15">           <button type="button" data-dismiss="alert" aria-hidden="true" class="close">&times;</button>           <p>Ups! An error occured. Please try again later.</p>         </div>       </div>     </div>   </div> </section>

Screenshot

Comment Box example