Bootstrap Contact Forms: 2 Free Responsive Templates

Published on: Jun 14 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 (9320)

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

33 Comments So Far

  1. nick says:

    Why the form is not sending emails 🙁 .. Btw excellent job i love you work!

  2. Patrick says:

    Hi, not really good at PHP
    What would I need to add in the PHP file if I want to add another field (name) on the contact site?

  3. Dan says:

    I would like to add the contact form to my index.html page, how can I do that? Thanks!

  4. Manthan says:

    Hello,

    When I’m clicking on send message it is showing message send but i’m not getting any mails on my provided email id in contact.php

    Thank you,
    Regards,
    Manthan Patel

  5. Snoeck says:

    Hello,

    I’m trying to use your template, but I get the message:
    Missing the stylesheet/style.css

    Do you know what I’m doing wrong?

    Thanks a lot!

  6. Nathaniel says:

    Hi,

    What are the steps to install te theme? When i’m installing the theme WordPress says ‘missing style.css’ but it is uploaded. What do I have to do?

    Thank you!

  7. Ton Paliin says:

    I use to have a fixed layout of PHP contact form from a tutorial site. But I needed a responsive one, Luckily I found this one. But unfortunately, I’m having hard time to make the code to have success message sent, until I learned when I changed the contact php to a different name, I need to change the index.html and the script.js. After I gave up for hours and tried finding other responsive, I tried again to understand your design, and luckily I was able to figured it out. Thank You so much. Though I will try not to remove the many css that I don’t need because there are some fonts I’m not using that I can delete from css that will lessen the file size. Thank You so much. This is the image of my contact form. https://tagtd.com/pakitaito.jpg

  8. Ton Paliin says:

    YOU ARE THE GREATEST! AND i will never remove you on my CREDITS page, thank you.

  9. Rai says:

    hI,

    GREAT GREAT WORK. THANKS.

    i thougt i had it but after some days i tried again but no receiving any e-mails anymore.
    i uploaded the index now, everything seems to work but dont receive any email.

    i even get the thank you page.

    see www . railexbeatz . nl.

    i hope you can help me out.

  10. kokos says:

    Great work but does not work unfortunately. I tried other contact form tutorials but without any success as well. Could the problem be host related?

    • Anli says:

      The forms use the PHP “mail” function. Maybe try to ask your hosting providers.

      • kokos says:

        It finally worked, thanks! The only problem now is that it only supports english characters. When people try to send a message in other languages the email comes in symbols and squares. Any ideas on how to fix this?

  11. 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

  12. Pragya says:

    Do you have full theme’s download link?

  13. marco says:

    Your template work pretty good in my case.
    I added a line in the .php in order to open a new successful page, but, how may I just create a message (or modal window) that says “Your message has been sent” or something like that?

  14. 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!

      • Alexandre says:

        Hi Ruairi,

        Thanks for the tips.
        I removed the following part at the end of contact.php

        echo json_encode($array);

        and replaced it with the following bit as you said :

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

        But it is still not showing another landing page. I have an error message.
        It’s too bad because the form is working and i receive emails.

        What could i do ?
        Thanks a lot for your help and feedback.

        Best,
        Alex

  15. 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.

  16. Steve says:

    Anli,

    Thank you for making these forms and allowing us to use them. Very generous of you! I’m trying to get the form to work, however it does not seem to send email. Can you please let me know what the issue may be.

    Many Thanks!
    Steve

  17. Alexandre says:

    Hi,

    I’m nearly there 😉 The form sends messages (i receive them) but when I click on send, a white page appears with the following code :

    {“emailMessage”:””,”subjectMessage”:””,”messageMessage”:””}

    How could i repair this ?
    Please help me… your form is very nice and i only want this one on my website 😉

    Thanks in advance.
    Best

    Alexandre

    • Anli says:

      It seems that you haven’t included the code in “scripts.js” where I use AJAX to validate and send the message without reloading the page.

  18. Monika says:

    Same problem here, emails not getting through, not in spam, validation JS working properly. Have other php on the same server working properly though. Any ideas? thank you

Leave a Reply