Rate this docs

Contact Form

Bootstrap contact form

Today we will learn how to easily create beautiful contact forms using the Bootstrap framework, PHP and JavaScript. You don't need specialist knowledge to achieve this, just follow this tutorial. If you have any questions, please do not hesitate to post a question on our support forum.

What will I learn?

  1. How to create an HTML contact form using Bootstrap
  2. How to connect a contact form to your email using PHP
  3. How to validate entered fields using JavaScript and PHP
  4. How to send a contact form without reloading the page using AJAX
  5. How to create an anti-spam mechanism
  6. How to use different inputs

At the end of this tutorial I will also show you few different contact form styles as an inspiration and ready to use snippets. If you don't want to follow the tutorial or you, just need a working solution, you can download the final files from our GitHub repository here.


Bootstrap Contact Form

An example contact form is given below:

Contact us

Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within a matter of hours to help you.

  • San Francisco, CA 94126, USA

  • + 01 234 567 89

  • contact@mdbootstrap.com

Copy and paste the following code into your file (i.e. index.html):

Note!

Within this tutorial we are using the Material Design for Bootstrap library, you can download it for free from here. Without the library the form will still work, however it may look and behave differently. It's recommended to use this library along with the tutorial.



          <!--Section: Contact v.2-->
          <section class="mb-4">

              <!--Section heading-->
              <h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
              <!--Section description-->
              <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
                  a matter of hours to help you.</p>

              <div class="row">

                  <!--Grid column-->
                  <div class="col-md-9 mb-md-0 mb-5">
                      <form id="contact-form" name="contact-form" action="mail.php" method="POST">

                          <!--Grid row-->
                          <div class="row">

                              <!--Grid column-->
                              <div class="col-md-6">
                                  <div class="md-form mb-0">
                                      <input type="text" id="name" name="name" class="form-control">
                                      <label for="name" class="">Your name</label>
                                  </div>
                              </div>
                              <!--Grid column-->

                              <!--Grid column-->
                              <div class="col-md-6">
                                  <div class="md-form mb-0">
                                      <input type="text" id="email" name="email" class="form-control">
                                      <label for="email" class="">Your email</label>
                                  </div>
                              </div>
                              <!--Grid column-->

                          </div>
                          <!--Grid row-->

                          <!--Grid row-->
                          <div class="row">
                              <div class="col-md-12">
                                  <div class="md-form mb-0">
                                      <input type="text" id="subject" name="subject" class="form-control">
                                      <label for="subject" class="">Subject</label>
                                  </div>
                              </div>
                          </div>
                          <!--Grid row-->

                          <!--Grid row-->
                          <div class="row">

                              <!--Grid column-->
                              <div class="col-md-12">

                                  <div class="md-form">
                                      <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
                                      <label for="message">Your message</label>
                                  </div>

                              </div>
                          </div>
                          <!--Grid row-->

                      </form>

                      <div class="text-center text-md-left">
                          <a class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>
                      </div>
                      <div class="status"></div>
                  </div>
                  <!--Grid column-->

                  <!--Grid column-->
                  <div class="col-md-3 text-center">
                      <ul class="list-unstyled mb-0">
                          <li><i class="fa fa-map-marker fa-2x"></i>
                              <p>San Francisco, CA 94126, USA</p>
                          </li>

                          <li><i class="fa fa-phone mt-4 fa-2x"></i>
                              <p>+ 01 234 567 89</p>
                          </li>

                          <li><i class="fa fa-envelope mt-4 fa-2x"></i>
                              <p>contact@mdbootstrap.com</p>
                          </li>
                      </ul>
                  </div>
                  <!--Grid column-->

              </div>

          </section>
          <!--Section: Contact v.2-->

        

Connecting your contact form to email using PHP

Create a new file called mail.php within the same folder as the contact form and place within it the following code:



            <?php
            if(isset( $_POST['name']))
            $name = $_POST['name'];
            if(isset( $_POST['email']))
            $email = $_POST['email'];
            if(isset( $_POST['message']))
            $message = $_POST['message'];
            if(isset( $_POST['subject']))
            $subject = $_POST['subject'];
            
            $content="From: $name \n Email: $email \n Message: $message";
            $recipient = "youremail@here.com";
            $mailheader = "From: $email \r\n";
            mail($recipient, $subject, $content, $mailheader) or die("Error!");
            echo "Email sent!";
            ?>

        

Now just replace youremail@here.com with your email address and it's done. Remember that in order for the script to work you will need to keep it on PHP-supporting server such as Apache.

You can download the source code file from here.


Javascript validation (client-side validation)

Our form now works fine. However currently if the user makes a mistake by clicking send without filling in the form first, this will result in sending an empty email. The other potential problem is that user might make a mistake in his email address so he would never get a response from us.

In order to apply validation we have to change the code of our form. So first change the existing line in index.html file



          <a class="btn btn-primary" onclick="document.getElementById('contact-form').submit();">Send</a>

        

with the following line, which instead of directly submitting the form will call our validation function:



          <a class="btn btn-primary" onclick="validateForm()">Send</a>

        

Now we have to create our validation function. Add the following code after (below) the script has finished importing the bootstrap JavaScript files:



          <script>
            function validateForm() {
            var name =  document.getElementById('name').value;
            if (name == "") {
                document.getElementById('status').innerHTML = "Name cannot be empty";
                return false;
            }
            var email =  document.getElementById('email').value;
            if (email == "") {
                document.getElementById('status').innerHTML = "Email cannot be empty";
                return false;
            } else {
                var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                if(!re.test(email)){
                    document.getElementById('status').innerHTML = "Email format invalid";
                    return false;
                }
            }
            var subject =  document.getElementById('subject').value;
            if (subject == "") {
                document.getElementById('status').innerHTML = "Subject cannot be empty";
                return false;
            }
            var message =  document.getElementById('message').value;
            if (message == "") {
                document.getElementById('status').innerHTML = "Message cannot be empty";
                return false;
            }
            document.getElementById('status').innerHTML = "Sending...";
            document.getElementById('contact-form').submit();
            
            }
          </script>

        

You can download the source file from here.


PHP validation (server-side validation)

Since user can easily disable Javascript on his side, it's very important to also validate the submitted form on the server side. In order to add similar validation as we did in the previous point, update the mail.php file by adding the following code:



          <?php
          if(isset( $_POST['name']))
          $name = $_POST['name'];
          if(isset( $_POST['email']))
          $email = $_POST['email'];
          if(isset( $_POST['message']))
          $message = $_POST['message'];
          if(isset( $_POST['subject']))
          $subject = $_POST['subject'];
          if ($name === ''){
          echo "Name cannot be empty.";
          die();
          }
          if ($email === ''){
          echo "Email cannot be empty.";
          die();
          } else {
          if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
          echo "Email format invalid.";
          die();
          }
          }
          if ($subject === ''){
          echo "Subject cannot be empty.";
          die();
          }
          if ($message === ''){
          echo "Message cannot be empty.";
          die();
          }
          $content="From: $name \nEmail: $email \nMessage: $message";
          $recipient = "youremail@here.com";
          $mailheader = "From: $email \r\n";
          mail($recipient, $subject, $content, $mailheader) or die("Error!");
          echo "Email sent!";
          ?>

        

You can download source file from here.


Sending an email without reloading the page using AJAX

Our contact form is working correctly, however the user experience leaves much to be desired. Instead of reloading the page, we would like to send contact form on the same page. Let’s replace following JavaScript code in index.html file:



          document.getElementById('status').innerHTML = "Sending...";
          formData = {
          'name'     : $('input[name=name]').val(),
          'email'    : $('input[name=email]').val(),
          'subject'  : $('input[name=subject]').val(),
          'message'  : $('textarea[name=message]').val()
          };
          
          
          $.ajax({
          url : "mail.php",
          type: "POST",
          data : formData,
          success: function(data, textStatus, jqXHR)
          {
          
          $('#status').text(data.message);
          if (data.code) //If mail was sent successfully, reset the form.
          $('#contact-form').closest('form').find("input[type=text], textarea").val("");
          },
          error: function (jqXHR, textStatus, errorThrown)
          {
          $('#status').text(jqXHR);
          }
          });

        

We also need to adjust our PHP code. Instead of sending a simple string with the message, we will send a slightly more complex object which will contain both status and the message. If everything goes fine and the email was successfully sent. We will return status 1 and clean our form to make sure that user does not send it multiple times. In case of validation errors we will return 0 and keep the data within the form.



          <?php
          $name = $_POST['name'];
          $email = $_POST['email'];
          $message = $_POST['message'];
          $subject = $_POST['subject'];
          header('Content-Type: application/json');
          if ($name === ''){
          print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
          exit();
          }
          if ($email === ''){
          print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
          exit();
          } else {
          if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
          print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
          exit();
          }
          }
          if ($subject === ''){
          print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
          exit();
          }
          if ($message === ''){
          print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
          exit();
          }
          $content="From: $name \nEmail: $email \nMessage: $message";
          $recipient = "youremail@here.com";
          $mailheader = "From: $email \r\n";
          mail($recipient, $subject, $content, $mailheader) or die("Error!");
          print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
          exit();
          ?>

        

Voila! Now our contact form works without reloading.

You can download the source file from here.


Anti-spam

Once you create your contact form it's worth adding an anti spam mechanism. Unfortunately, there are hundreds of thousands of spambots browsing the Internet every second looking for unsecured forms and submitting them. How they work? They simply fill typical inputs like name or email and automatically submit the form. In the best case you will get occasional frustrating spam messages. In worst they can bring down your website by submitting the contact form hundreds of times a second.

The simplest (but also the weakest) way to secure a contact form is to add a custom field, then ask the customer to fill it in a certain way, and submit the form only if the entered value is correct. Real humans will easily perform this task, but bots most probably won't be able to pass the check.

Other questions

  • Q: How many eyes does a typical person have? (ex: 1) A: 2
  • Q: How many legs on a typical dog? (ex: 5) A: 4
  • Q: How many units in a dozen? (ex: 11) A: 12
  • Q: Name of the actor Di Caprio? (ex: Rafaelo) A:Leonardo
  • Q: How many days in a week? (ex: 8) A: 7
  • Q: How many days in July? (ex: 28) A: 31

If you want a more sophisticated solution read about Google's reCAPTCHA service


Other inputs

We've already used text inputs as well as the text area for larger pieces of text but there are yet more useful input types we can use to enhance our contact form.

Checkbox

HTML code:



          <div class="form-check">
            <input type="checkbox" class="form-check-input" name="updates" id="updates" value="1">
            <label for="updates" class="form-check-label">Notify me about new updates</label>
          </div>

        

JS code:



          formData = {
            'name'     : $('input[name=name]').val(),
            'email'    : $('input[name=email]').val(),
            'subject'  : $('input[name=subject]').val(),
            'message'  : $('textarea[name=message]').val(),
            'updates'  : $('input:checkbox[name=updates]').is(':checked')
            };

        

PHP code:



          if(isset( $_POST['updates']))
          $updates = $_POST['updates'];

        

Multiple checkboxes

How did you get to know about us?

HTML code:



          <div id="feedback">
              <h5><strong>How did you get to know about us?</strong></h5>
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" name="channel[]" id="checkbox1" value="nl">
                  <label for="checkbox1" class="form-check-label">Newsletter</label>
              </div>
          
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" name="channel[]" id="checkbox2" value="ad">
                  <label for="checkbox2" class="form-check-label">Advertisement</label>
              </div>
          
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" name="channel[]" id="checkbox3" value="ot">
                  <label for="checkbox3" class="form-check-label">Other</label>
              </div>
          </div>

        

JS code:



          var channels = [];
          $('#feedback input:checked').each(function() {
          channels.push(this.value);
          });
          
          formData = {
          'name'     : $('input[name=name]').val(),
          'email'    : $('input[name=email]').val(),
          'subject'  : $('input[name=subject]').val(),
          'message'  : $('textarea[name=message]').val(),
          'channel'  : channels
          };

        

PHP code:



          if(isset( $_POST['updates'])){
            foreach ($_POST['channel'] as $value) {
              //loop through all checked checkboxes and do logic
            }
          }

        

Radio/option buttons

What is your preferred contact method?

HTML code:



            <div class="form-check mb-3">
                <input class="form-check-input" type="radio" id="radio1" name="cmethod" value="phone" checked>
                <label class="form-check-label" for="radio1">Phone</label>
            </div>
                
            <div class="form-check mb-3">
                <input class="form-check-input" type="radio" id="radio2" name="cmethod" value="mail">
                <label class="form-check-label" for="radio2">Email</label>
            </div>
                
            <div class="form-check mb-3">
                <input class="form-check-input" type="radio" id="radio3" name="cmethod" value="post">
                <label class="form-check-label" for="radio3">Post</label>
            </div>

        

JS code:



          formData = {
            'name'     : $('input[name=name]').val(),
            'email'    : $('input[name=email]').val(),
            'subject'  : $('input[name=subject]').val(),
            'message'  : $('textarea[name=message]').val(),
            'cmethod'  : $('input:radio[name=cmethod]:checked').val()
          };

        

PHP code:



            if(isset( $_POST['cmethod']))
            $updates = $_POST['cmethod'];

        

Other contact form samples

CONTACT US

Contact Us

You can find more examples of Contact Forms in the links below:

Form components Contact sections

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue