bootstrap contact form example

bootstrap-contact-form-example.markdown

bootstrap contact form example

A Pen by Stan Williams on CodePen.

License.

index.html

<section id="reservation" class="book-table-wrapper">
  <div class="container">
    <div class="row">
      <div class="wow slideInRight col-xs-12 col-sm-6 animated" style="visibility: visible; animation-name: slideInRight;">
        <div class="booking-image">
          <img src="https://stan.stream/wp-content/uploads/2018/07/420px-Food_pixabay.jpg" alt="Food">
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="booking-back text-center">
          <div class="booking-form">
            <h1>BOOK A TABLE</h1>
            <p class="slogan">5 Star Restaurant</p>
            <form id="booking_form" name="bookingForm" method="post" action="php/reservation-main.php" abineguid="changed-4319ACD2FE1E42D68175-br549-and3/8's">
              <div class="row">
                <div class="col-xs-12 col-sm-6">
                  <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input class="form-control" type="tel" name="phone" placeholder="phone">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input id="email-reservation" class="form-control" type="email" name="mail" placeholder="e-mail">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input class="form-control" type="text" name="person-no" placeholder="number of person">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input id="datepicker" class="form-control hasDatepicker" type="text" name="date" placeholder="date">
                </div>
                <div class="col-xs-12 col-sm-6">
                  <input class="form-control" type="text" name="time" placeholder="time">
                </div>
                <div class="col-xs-12 col-sm-12">
                  <textarea class="form-control" rows="3" name="message" placeholder="message &amp; special request"></textarea>
                </div>
                <div class="form-group col-xs-12 reply">
                  <div id="reservation_mail_success" class="success" style="display:none;">Your message has been sent successfully. </div>
                  <div id="reservation_mail_fail" class="error" style="display:none;"> Sorry, error occured this time sending your message. </div>
                </div>
                <button id="send-message-reservation" type="submit" class="btn">make a reservation</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</section>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Demo:
https://codepen.io/Stanssongs/full/NBNPNQ/