In this blog post, you will learn how to create a comment box in Html and CSS. The following comment box source code consists of a form containing a small textarea (
The comment box is a way to create a feedback mechanism on a site, using just a simple form.
Source code for comment box in Html
A bustling comments section on your blog posts can help bring people together around your product and create a sense of community, bringing your website to life. And, of course, give blog authors warm fuzzies since people are actually reading their posts!
The following example will demonstrate to you how to make a comment box design:-
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to make a comment box in HTML</title>
<link rel="stylesheet" type="text/css" href="smart-forms.css">
<link href="bluetheme.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="smart-wrap">
<div class="smart-forms smart-container wrap-3">
<div class="form-header header-blue">
<h4><i class="fa fa-comments"></i> Please comment </h4>
</div><!-- end .form-header section -->
<form method="post" action="/" id="comment2">
<div class="form-body theme-blue">
<div class="section">
<label class="field prepend-icon">
<input type="text" name="names" id="names" class="gui-input" placeholder="Enter name...">
<span class="field-icon"><i class="fa fa-user"></i></span>
</label>
</div><!-- end section -->
<div class="section">
<label class="field prepend-icon">
<input type="email" name="email" id="email" class="gui-input" placeholder="Enter Email...">
<span class="field-icon"><i class="fa fa-envelope"></i></span>
</label>
</div><!-- end section -->
<div class="section">
<label class="field prepend-icon">
<input type="url" name="website" id="website" class="gui-input" placeholder="Website url (optional)...">
<span class="field-icon"><i class="fa fa-globe"></i></span>
</label>
</div><!-- end section -->
<div class="section">
<label class="field prepend-icon">
<textarea class="gui-textarea" id="comment" name="comment" placeholder="Enter message..."></textarea>
<span class="field-icon"><i class="fa fa-comments"></i></span>
<span class="input-hint">
<strong>USE HTML TAGS:</strong>
<blockquote>, <strong><a>, <b>, <ul>, <li>, <code>
</span>
</label>
</div><!-- end section -->
<div class="section">
<label class="option option-blue">
<input type="checkbox" name="check1">
<span class="checkbox"></span> Notify me with comment updates
</label>
</div><!-- end section -->
<div class="spacer-b30">
<div class="tagline"><span>Just a moment </span></div><!-- .tagline -->
</div>
<div class="section">
<span class="rating block">
<span class="lbl-text">Rate this article</span>
<input class="rating-input" id="five-stars" type="radio" name="article-rate">
<label class="rating-star" for="five-stars"><i class="fa fa-star"></i></label>
<input class="rating-input" id="four-stars" type="radio" name="article-rate">
<label class="rating-star" for="four-stars"><i class="fa fa-star"></i></label>
<input class="rating-input" id="three-stars" type="radio" name="article-rate" checked>
<label class="rating-star" for="three-stars"><i class="fa fa-star"></i></label>
<input class="rating-input" id="two-stars" type="radio" name="article-rate">
<label class="rating-star" for="two-stars"><i class="fa fa-star"></i></label>
<input class="rating-input" id="one-star" type="radio" name="article-rate">
<label class="rating-star" for="one-star"><i class="fa fa-star"></i></label>
</span>
</div><!-- end section -->
</div><!-- end .form-body section -->
<div class="form-footer">
<button type="submit" class="button btn-blue">Post Comment</button>
</div><!-- end .form-footer section -->
</form>
</div><!-- end .smart-forms section -->
</div><!-- end .smart-wrap section -->
<div></div><!-- end section -->
</body>
</html>Conclusion
I hope you liked this article on how to create a comment box in html and CSS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
How to add real-time comments to the above comment box as in the blog?
Refer to https://dotnettec.com/product/php-comment-system/
Can this work on a blogspot blog since it HTML?
Not sure, I didn’t try this actually on a Blogspot blog.
Thanks.
Excelente trabalho !