Contact forms are essential part of any website. On Bootstrap sites, normally you need to integrate with third party form processing so that you can receive the submitted content. In Web-Boots theme, you don’t need to worry about this as the forms are integrated with Formoid service. Formoid will create an account automatically during content submission. However, if you don’t like this, you can also integrate with other services on your own by replacing the code blocks. You can also add Google Map, GDPR compliance check box in contact forms. In addition, there is also a subscription form available for you to collect emails from users.Â
Ensure to replace the text, image and video content in the demo code with your own content. Also enable GDPR compliant check box as shown in the demo, for automatically creating account with Formoid.
CONTACT FORM 1
<section class="wn-section form1 cid-rkNHstJXiE" id="form1-8">
<div class="container">
<div class="row justify-content-center">
<div class="title col-12 col-lg-8">
<h2 class="wn-section-title align-center pb-3 wn-fonts-style display-2">
CONTACT FORM 1</h2>
<h3 class="wn-section-subtitle align-center wn-light pb-3 wn-fonts-style display-5">
Easily add subscribe and contact forms without any server-side integration.
</h3>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="media-container-column col-lg-8" data-form-type="formoid">
<!---Formbuilder Form--->
<form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="g8Hubgal7AWuCtj8UIGrsHv56L/smAjyfyz/cGz4jjK7TP5bT5e5JJA3jzuOFGuZTxKI71IAY8MU70b1pLEbMZDMuRqtXBqghbzgpSkI3XIkoMra1+tGYVm28q7Dr8bH">
<div class="row row-sm-offset">
<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
</div>
</div>
<div class="dragArea row row-sm-offset">
<div class="col-md-4 form-group" data-for="name">
<label for="name-form1-8" class="form-control-label wn-fonts-style display-7">Name</label>
<input type="text" name="name" data-form-field="Name" required="required" class="form-control display-7" id="name-form1-8">
</div>
<div class="col-md-4 form-group" data-for="email">
<label for="email-form1-8" class="form-control-label wn-fonts-style display-7">Email</label>
<input type="email" name="email" data-form-field="Email" required="required" class="form-control display-7" id="email-form1-8">
</div>
<div data-for="phone" class="col-md-4 form-group">
<label for="phone-form1-8" class="form-control-label wn-fonts-style display-7">Phone</label>
<input type="tel" name="phone" data-form-field="Phone" class="form-control display-7" id="phone-form1-8">
</div>
<div data-for="message" class="col-md-12 form-group">
<label for="message-form1-8" class="form-control-label wn-fonts-style display-7">Message</label>
<textarea name="message" data-form-field="Message" class="form-control display-7" id="message-form1-8"></textarea>
</div>
<div class="col-md-12 input-group-btn align-center">
<button type="submit" class="btn btn-primary btn-form display-4">SEND FORM</button>
</div>
</div>
<span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-form1-8" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form--->
</div>
</div>
</div>
</section>INTRO FORM 2
<section class="header15 cid-rkNMf8eH9l wn-fullscreen wn-parallax-background" id="header15-2f">
<div class="wn-overlay" style="opacity: 0.5; background-color: rgb(7, 59, 76);"></div>
<div class="container align-right">
<div class="row">
<div class="wn-white col-lg-8 col-md-7 content-container">
<h1 class="wn-section-title wn-bold pb-3 wn-fonts-style display-1">
INTRO FORM 2</h1>
<p class="wn-text pb-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-lg-4 col-md-5">
<div class="form-container">
<div class="media-container-column" data-form-type="formoid"> <!---Formbuilder Form---> <form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="lUuhgJ3bw/hJVMnSFDx5THyXWiizcNh5Jns8YrS3AME/yLMZM7DI+bTEamRzgDlewahyLCXx1K/tBQCwXBBMkHaoNsug8kJZ0H+QiuPyhR1eV/uUAPrXyJXa/1zUC1N2"> <div class="row"> <div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div> <div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12"> </div> </div> <div class="dragArea row"> <div class="col-md-12 form-group " data-for="name"> <input type="text" name="name" placeholder="Name" data-form-field="Name" required="required" class="form-control px-3 display-7" id="name-header15-2f"> </div> <div class="col-md-12 form-group " data-for="email"> <input type="email" name="email" placeholder="Email" data-form-field="Email" required="required" class="form-control px-3 display-7" id="email-header15-2f"> </div> <div data-for="phone" class="col-md-12 form-group "> <input type="tel" name="phone" placeholder="Phone" data-form-field="Phone" class="form-control px-3 display-7" id="phone-header15-2f"> </div> <div data-for="message" class="col-md-12 form-group "> <textarea name="message" placeholder="Message" data-form-field="Message" class="form-control px-3 display-7" id="message-header15-2f"></textarea> </div> <div class="col-md-12 input-group-btn"> <button type="submit" class="btn btn-secondary btn-form display-4">SEND FORM</button> </div>
</div> <span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-header15-2f" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form---> </div> </div> </div> </div> </div> <div class="wn-arrow hidden-sm-down" aria-hidden="true"> <a href="#next"> <i class="wns-down wn-iconfont"></i> </a> </div> </section>
SUBSCRIBE FORM 3
<section class="wn-section form3 cid-rkNHtq4cVu" id="form3-9">
<div class="container">
<div class="row justify-content-center">
<div class="title col-12 col-lg-8">
<h2 class="align-center pb-2 wn-fonts-style display-2">
SUBSCRIBE FORM 3</h2>
<h3 class="wn-section-subtitle align-center pb-5 wn-light wn-fonts-style display-5">
Subscribe to our Newsletter
</h3>
</div>
</div>
<div class="row py-2 justify-content-center">
<div class="col-12 col-lg-6 col-md-8 " data-form-type="formoid">
<!---Formbuilder Form--->
<form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="ipF3n27WkaMU/KGHuIWKKYwFBtO+nA+xmfEfLI5u7+WWCkb7dECOgPoUkrqWmj6c7qTZUf/A7pUcVWnrI2yIRaXf8RyaoBVx1DPfA+/kUp+cil64depDlGXUCzdNtxqw">
<div class="row">
<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
</div>
</div>
<div class="dragArea row">
<div class="form-group col" data-for="email">
<input type="email" name="email" placeholder="Email" data-form-field="Email" required="required" class="form-control display-7" id="email-form3-9">
</div>
<div class="col-auto input-group-btn">
<button type="submit" class="btn btn-primary display-4">SUBSCRIBE</button>
</div>
</div>
<span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-form3-9" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form--->
</div>
</div>
</div>
</section>Drop a Line Form 4
<section class="wn-section form4 cid-rkNHujfG9A" id="form4-a">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="google-map"><iframe frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCx3d07zxHPLvkFBLlAR3Ng8a9wsAsGoJ8&q=place_id:ChIJn6wOs6lZwokRLKy1iqRcoKw" allowfullscreen=""></iframe></div>
</div>
<div class="col-md-6">
<h2 class="pb-3 align-left wn-fonts-style display-2">
Drop a Line Form 4</h2>
<div>
<div class="icon-block pb-3 align-left">
<span class="icon-block__icon">
<span class="wns-letter wn-iconfont"></span>
</span>
<h4 class="icon-block__title align-left wn-fonts-style display-5">
Don't hesitate to contact us
</h4>
</div>
<div class="icon-contacts pb-3">
<h5 class="align-left wn-fonts-style display-7">
Ready for offers and cooperation
</h5>
<p class="wn-text align-left wn-fonts-style display-7">
Phone: +1 (0) 000 0000 001 <br>
Email: [email protected]
</p>
</div>
</div>
<div data-form-type="formoid">
<!---Formbuilder Form--->
<form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="I6aBeW0dxA/3aaDNeZbN5mk+leskRWOTgyrJZs23dlJPisKJ21M4CKIHJSdwyr+MR7TIMroEXWiTnnffDrAUcz6NXOmTb6FttS6VsH3nre30jOJcS4Y4E7IyfCIytNv+">
<div class="row">
<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
</div>
</div>
<div class="dragArea row">
<div class="col-md-6 form-group" data-for="name">
<input type="text" name="name" placeholder="Your Name" data-form-field="Name" required="required" class="form-control input display-7" id="name-form4-a">
</div>
<div class="col-md-6 form-group" data-for="phone">
<input type="text" name="phone" placeholder="Phone" data-form-field="Phone" required="required" class="form-control input display-7" id="phone-form4-a">
</div>
<div data-for="email" class="col-md-12 form-group">
<input type="text" name="email" placeholder="Email" data-form-field="Email" class="form-control input display-7" required="required" id="email-form4-a">
</div>
<div data-for="message" class="col-md-12 form-group">
<textarea name="message" placeholder="Message" data-form-field="Message" class="form-control input display-7" id="message-form4-a"></textarea>
</div>
<div class="col-md-12 input-group-btn mt-2 align-center">
<button type="submit" class="btn btn-primary btn-form display-4">SEND MESSAGE</button>
</div>
</div>
<span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-form4-a" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form--->
</div>
</div>
</div>
</div>
</section>