Bootstrap Contact Forms: 2 Free Responsive Templates

Updated on: Aug 15 2015 by Anli

Bootstrap Contact Forms: 2 Free Responsive Templates

Until now I have published a lot of forms made with Bootstrap that you can use in your projects: 3 registration forms, 3 login forms and 1 multi-step registration form. Today I’ll add two other forms to this collection, two Bootstrap contact forms that you can download for free.

These forms are responsive and use PHP and AJAX to validate and send the message to your chosen email address. They also come with a fullscreen background, Font Awesome icons and are Retina ready. Below you’ll find the full list of features, the live preview link and the download link.

Features

  • Responsive Layout (Bootstrap framework)
  • 2 Different Contact Form Templates
  • Fullscreen Background (Images Slider also available)
  • Form Validation (to prevent users from leaving empty fields)
  • Font Awesome icons
  • Retina ready

The 2 Contact Templates

Template 1

Bootstrap Contact Form 1

Template 2

Bootstrap Contact Form 2

How To Use The Templates

Download the zip package below and extract it. You’ll see that each form template is in its own folder (named “form-1”, “form-2”) with all the needed files.

Use the “index.html” file to modify the HTML code. The style can be changed from the CSS files in the “css” folder (assets/css).

In the “contact.php” file (in assets) you can enter the email address where you want to receive the messages. I have also used some Javascript (jQuery) for the form validation (AJAX), for the text to display when the form is sent correctly and for the fullscreen background. You can find this code in the “scripts.js” file (assets/js).

The images are located in the “img” folder (assets/img). When you change the images, make sure you create also the “@2x” version (double size images) for Retina devices (iPhone, iPad).

Tutorials

How to Add a New Field to These Forms

Demo, Download and License

VIEW DEMO

DOWNLOAD: Bootstrap Contact Forms: 2 Free Templates (15769 downloads)

LICENSE:

You can use these contact form templates in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.

Photos by: StockSnap.io

Want More?

If you need a template with more layouts, color schemes and features, along with free support and free updates, you should take a look at the Marco template:

Marco: Bootstrap Multi-purpose Landing Page

Marco: Bootstrap Multi-purpose Landing Page

5 Comments So Far

  1. James says:

    Hello,
    i installed the template and i resive email but just the message filed
    no email address and no subject in the email body.
    what i’m doing wrong?
    great templates, Thank you very much for your great work.
    i added above the form url

  2. James R L says:

    Hello Anli,

    I got it to work and mails are coming in but when i click on “Send Message” button it takes me to contact.php and gives me this {“emailMessage”:””,”subjectMessage”:””,”messageMessage”:””}. How can I make go to a thank you page after hitting the “Send Button” . Btw, great work and I’ll be using this more often.

    James RL

    • Anli says:

      Hi James,

      I might create a tutorial about this in the next days.

    • Ruairí says:

      Hey James,

      I was reading the comments for a solution to this and worked it out myself.

      The line that is displaying
      {“emailMessage”:””,”subjectMessage”:””,”messageMessage”:””}.

      is at the end of contact.php:
      echo json_encode($array);

      Remove that and replace it with this code, that uses Javascript to redirect to any page of your choosing:

      echo ‘
      window.location = “http://www.google.com/”
      ‘;

      Great contact form, thanks Anli!

  3. ragu says:

    excellent job… but if i try to send message for my mail id its not working why and how to fix it please let me know.

Leave a Reply

To learn how we use your data when you comment, read our Privacy Policy here.