comment box in html form

Keywords | how to create comment box in html, comment box in html form, how to make a comment box in html, source code for comment box in html

Comment Box in HTML Form

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!

You can use the following HTML code to create a comment box within your HTML document.

Source code for comment box in HTML

Find the below source code for comment box in 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>
                                &lt;blockquote&gt;, &lt;strong&gt;&lt;a&gt;, &lt;b&gt;, &lt;ul&gt;, &lt;li&gt;, &lt;code&gt;
                            </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>

Download Code

What do you think?

I hope you liked this article on how to make a comment box in html and draw a distance circle on google maps. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

LEAVE A REPLY

Please enter your comment!
Please enter your name here