Sleek contact form design with bootstrap html css

contact form

HTML Code


<div class="rsvp-section" id="rsvp">
  <div class="container">
    <div class="row pt-5 pb-5">
      <div class="col-12 text-center pt-5 pb-5">
        <h2 class="headingbig display-3 pt-3 text-white">Come Join Us</h2>
      </div>
      <div class="col-12 text-white p-5 bg-black">
        <form>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Your Name</label>
              <input type="text" class="form-control" id="inputName" placeholder="Your Name">
            </div>
            <div class="form-group col-md-6">
              <label for="inputEmail4">Email</label>
              <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Will you attend?</label>
              <select class="form-control">
                <option selected="">Yes, I will be there</option>
                <option>Sorry, I can't come</option>
              </select>
            </div>
            <div class="form-group col-md-6">
              <label>Meal preference</label>
              <select class="form-control">
                <option selected="">Veg</option>
                <option>Non Veg</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label>Your Message</label>
            <textarea class="form-control" id="inputmessage" placeholder="Your Message"></textarea>
          </div>
          <div class="form-group text-center">
            <button type="submit" class="btn btn-primary" style="width: 150px;">Send</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

CSS Code


.rsvp-section {
    background: url(img/bottom-form-bg.jpg);
}
.headingbig {
    font-family: 'Big Shoulders Display', cursive;
}
.bg-black {
    background-color: rgba(000,000,000,0.5);
    border: 4px double rgba(255,255,255,0.3);
}
label {
    font-weight: 600;
}
.form-control {
    border-radius: 0;
    padding: 26px;
    background-color: rgba(255,255,255,0.8);
    border: none;
}
.btn {
    border-radius: 0;
}

View live working example

Download contact form ui from here (267 downloads)
Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top