NETZONE-BD: Bootstrap Simple Contact Form Design -Netzonebd

This is Simple Bootstrap Contact Form. You Can Use This Contact Form on Your Web Site. Its Responsive Contact Form. So, You Can Try This Markup.

The HTML Markup

The first thing we need to do when building the contact form is to setup the proper HTML structure with the appropriate Bootstrap classes. Although not required, we’re going to center the contact form using the classes col-md-6 col-md-offset-3 and I’m going to assume you’ve properly nested the form within a row and container.

To help us get started, we’ll use the following HTML markup and we’ll go through each block in more detail.

<form class="form-horizontal" role="form" method="post" action="index.php">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
        </div>
    </div>
    <div class="form-group">
        <label for="message" class="col-sm-2 control-label">Message</label>
        <div class="col-sm-10">
            <textarea class="form-control" rows="4" name="message"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <! Will be used to display an alert to the user>
        </div>
    </div>
</form>