Bootstrap 3 Contact Form With Validation

As promised in my ‘Twitter Bootstrap contact form‘ post to write a tutorial on creating contact form using Bootstrap 3 with required validation and email functionality. This post will teach you how to create a responsive and ready-to-use contact form using Bootstrap 3 in few minutes. Bootstrap 3 has various significant changes in css classes and is responsive by default. For validation purpose I have used valildate.js jQuery plugin which I have used in many previous tutorials. I have written a little php code which will send email to the concerned person. You can download Bootstrap-3 from here.

bootstrap-3-contact-form-InfoTuts

           LIVE DEMO      Download

Let’s start with the tutorial, to add more fields to the form you simple need to add this code block in your form.

</p>
<div class="form-group ">
 <label class="control-label">Website</label>
 <div class="controls">
 <div class="input-group">
 <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
 <input type="text" class="form-control" id="lname" name="website" placeholder="website url">
 </div>
 </div>
 </div>
<p style="text-align: justify;">

You can add as many fields you want to add in your form and style them using bootstrap’s classes. Now As I told you that I am using validate.js jQuery plugin for client side validation purpose. And then I send json data to PHP file which finally sends the email to given email id. Below is our jQuery code to validate data fields in form and send Json data to email.php file.

</p>
$(document).ready(function(){
 $.validator.setDefaults({
submitHandler: function(form) {
 $.ajax({
 type: "POST",
 url: "email.php",
 data: { 'val':$(".myfirstform").serializeJSON() }
 }).done(function(data) {
 alert(data);

 });
 }
});
$(".myfirstform").validate(
{rules:
{name:"required",
email:{required:true,email:true},
website:{required:false,url:true},
cate:"required",
msg:{required:true, maxlength:300
}},
errorClass:"error",
highlight: function(label) {
 $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
 },

success: function(label) {
 label
 .text('Seems Perfect!').addClass('valid')
 .closest('.form-group').addClass('has-success');
 }
});
});
<p style="text-align: justify;">

Finally we have very simple PHP file which sends the email:

</p>
<?php
 $val= $_POST['val'];
 $toemail='sanjeev00733@gmail.com'; // change this to your email id
 $name = $val['name'];
 $email = $val['email'];
 $website = $val['website'];
 $category = $val['cate'];
 $msg = $val['msg'];

$subject = 'Message from Bootstrap Form Tutorial Demo - InfoTuts';

$headers = "From: admin@infotuts.com \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

&nbsp;

$message = "<b>Name :</b>".$name."<br>";
$message .='<b>Email :</b>'.$email."<br>";
$message .='<b>Website :</b>'.$website."<br>";
$message .='<b>Category :</b>'.$category."<br>";
$message .='<b>Message :</b>'.$msg;
mail($toemail, $subject, $message, $headers);

echo "Thanks for contacting us!";

?>
<p style="text-align: justify;">

You can implement this simple but fully functional form in your website easily. Share this tutorial with your friends and fans 🙂

109 thoughts on “Bootstrap 3 Contact Form With Validation”

  1. post is good.i am trying to download code.i have given my mail(badechanti@gmail.com) which i have already subscribe id but it is showing
    Sorry, We dont have your email. Please Subscribe Below.what i have to download.please help me.even i have tried again subscription it is showing already subscribed.but when i am trying download it showing Sorry, We dont have your email. Please Subscribe Below

      1. I am having the same issue when trying to download your code. I enter the email address and click on download but nothing happens.

        please send me code files.

        thanks,

      2. please update the subscription DB. I really want to get this code working on one of my sites. Subscribed but download button says not registered.
        (jeff@sweetcaliforniajobs.com)

        Thanks,

      3. Same issue when I tried downloading the source code.

        Can you please modify this as a pop up contact form, instead of regular form?

  2. I’m having same problem as purushottam. subscribed but still can’t download code. looking forward to getting this to work. It looks a lot better than other tutorials. dg2112@rogersDOTcom

  3. How do I change the action of the submit button to return the user to either the same page or redirect to the home page?

  4. Thanks! This is a fantastic piece of work! Seems easy enough to customize the look for my site.

  5. Hi Sanjeev,

    Thank you for the interesting article. Can you refresh the subscription list again?

  6. Hi,
    When testing my contact form remote I do get an email but the fields are blank.
    Have you any idea what might be wrong?
    Thanks in advance!

  7. I’m trying to add my emailaddress to the subscribers list to download this great script, but i don’t get the confirmation email. I always gets this message:

    You are already listed on the mailing list of InfoTuts. FeedBurner has emailed a new subscription confirmation message to b****@gmail.com. Please confirm your subscription by following the link provided in that email.

  8. I added new fields but how do I make them work ?

    Your Name
    Nick Name

    Facebook Link
    Twitter Link
    Instagram Link
    YouTube Link
    Myspace Link
    Soundcloud Link
    Home Page Link

    Phone
    Email

  9. same issue // Sorry, We dont have your email. Please Subscribe Below
    please let me download – thnx

  10. Same here as everyone else. I can’t download even though I subscribed. ?? I think if your going to force everyone to sign up to your rss feed just to download a demo that you are offering at least make it work.

    1. Hi Kevin,
      Demo works well. Please get your file. I know its a lil but annoying to wait till email list is refreshed. So I have disabled this download method for new posts.

      Thanks

  11. Hi, I’m trying to download the source files but it says the database needs to be updated. Can you please update it so I can download these files?

    Thanks.

  12. hi Sanjeev,

    i have got the same issue, i can’t download the files. would appreciate it if you could make them available to me.

    cheers

    crispey

  13. Hey Sanjeev,

    I signed up but still can’t download the code for the contact list. Can you please send it to me or let me know how I can download?

    thx!

    Gary

  14. Hello, I was trying to get it to download once I made the activation of the confirmation email. I am still unsuccessfully get the code 🙁 may you send me the code? Thank you 🙂

  15. Hi I’d like to download and dit the registration but no download.. 🙁 thanks for updating if you would.

  16. Hi Sanjeev,

    I plugged this on my website but when an input field becomes red, afterwards it cannot turn green anymore (even if it says “Seems Perfect”).

    Does that problem ring a bell to you?

    Thank you in advance and thank you for your amazing work !

    Thom.

    1. add the css class has-success and remove has-error like below to make it green on success
      success: function(label) {
      label
      .text(‘Seems Perfect!’).addClass(‘valid’)
      .closest(‘.form-group’).addClass(‘has-success’);
      $(label).closest(‘.form-group’).removeClass(‘has-error’).addClass(‘has-success’);

      }

  17. I tried to download once I received the activation of the confirmation email. I am still unlisted, when will you be updating your email list? Thanks!

  18. Great Tutorial
    This was exactly what i was looking for an easy way to provide some user feedback on forms.
    Subscribed to your feedburner.
    PLEASE update your email list so I can download the tutorial.

    Thanks!

  19. where do I put the files? i know to put the form intto the html page, but where to the other pages of code go? do I link them to the page? help. thanks

  20. Hi, very useful. Twitter Bootstrap is my all time favorite for front end designing. You have shared a nice tutorial on contact form using bootstrap.

    Thanks for sharing.

  21. How does one modify this script so that the contact_me.js can access the contact_me.php from a different ‘website’ within the same folder hierarchy?

  22. I cant download the file, the form looks like just what I need! I would like to implement this.

    Thanks

  23. Awaiting e-mail database refresh.

    Thanks, this form is great I am excited to get the files and make it work!

  24. Discovered when you have more than one select menu the upper/top select menu options are hidden behind the menu below it. Any idea how to correct this.

  25. Hello again, I figured out if you have two select menus, one on top of each other, if you scroll so the menus are near the bottom of the page, the menu will open up above the menu and the z index is correct as it will overlay anything above it, however anytime the menu opens from the bottom, it is hidden underneath any menu or input below it.

    I am guessing bootstrap-select.js needs to be tweaked?

  26. Thanks for the post, this is exactly what I was looking for. That said, I submitted my email and waited well over 24 hours but still cannot download. If this is a manual thing can you please refresh the email list. Thanks much!

  27. First of all i have to say, your post is awesome! 😉

    But i have a question. i want to use this method in a bootstrap modal, but it doesn’t work!
    When i click on the send button without writing something in the input-boxes, then normaly it
    should put the error message out. But in this case the modal disappears and nothing happens.

    Any ideas?

    should i send you my code?

    Thanks a lot!

  28. Can’t get the code…. Is this a security check you do to make sure the emails are real? This has been an ongoing issue for over a year. Anyhow, would love to download the code. Thanks

  29. Hi Sanjeev,

    I incorporated the bootstrap contact form in my Onepager.
    Validation works fine, and it also refers to the email.php.
    The only thing is that it does not send an email.
    I change the value of $toemail in de php off course.
    Is there any way to debug this, or is a log file created e.g.
    Brds,
    Frits

  30. Hey there!

    I got the same problem, can’t download your code!

    Can you pls help me?

    Thanx in advance!

  31. Hey, great tutorial. But trying to download the file, subscribed and all, but it says the email list will be refreshed after 12 hours?

    I have to wait 12 hours for access?
    Cheers

  32. Hi Sanjeev, your script seems perfect to me for its flexibility and its ability to serve multiple forms on the same page. I uploaded your index.html and email.php to the server (with my mailaddress in the php-file), but I didn’t get a mail. Validation seems to work and so does php I conclude from the pop up that confirms that the mail is sent. Should I do more than changing the mail address of the recipient?

    Hope you can help me. Thanks in advance.

    Rob

  33. I am having a similar problems as the folks prior to me. I have subscribed already but I am unable to download. Please let me know what I need to do.

    Thanks!

  34. Hello, I’ve not been able to download, please add me to email list.

    Regards

    Daniel

  35. Pingback: Free Bootstrap Contact Form

  36. Hi, when I’m trying to download, the page says I am unable to download, but I’m already subscribed.

  37. I have the form all set up and it works as expected but I would prefer the form submission to return to my home page instead of the “echo” statement notifying the user that the form has been submitted, could you tell me how to do this? Thanks.

Comments are closed.