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.
[button_round color=”blue” url=”infotuts.com/demo/bootstrap-3-contact-form/”] LIVE DEMO [/button_round] [button_round color=”blue” url=”infotuts.com/demo/bootstrap-3-contact-form/download.html”] Download [/button_round]
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"; $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 🙂
Comments
109 responses to “Bootstrap 3 Contact Form With Validation”
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
Please get your file now 🙂
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,
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,
Same issue when I tried downloading the source code.
Can you please modify this as a pop up contact form, instead of regular form?
Hi I am having the same problem, would really like to download this please!
Please download now 🙂
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
Sorry, We dont have your email. Please Subscribe Below
Hi Mansky,
Email list has been refreshed please get your file now.
Thanks:
Sanjeev
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?
Hi, Nice tutorial . And nicely explained here. Thanks for the share .
Thanks! This is a fantastic piece of work! Seems easy enough to customize the look for my site.
Hi Sanjeev,
Thank you for the interesting article. Can you refresh the subscription list again?
didnt work when downloaded…Same issue as the others have…
Please get your file now. Email list has been updated.
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!
i entered my email address and i cannot download this. please help!
Please download your file.
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.
Please get your file now.
The styling on this page
https://infotuts.com/demo/bootstrap-3-contact-form/download.html
Is not coming though on Firfox 30.0 and niether is the submit button working, but it looks and works ok on Safari.
Hi Andy,
We have fixed that. Thanks for the heads up 🙂
Can you refresh the email list so that I can download this? Thanks!
Done. Please get your file 🙂
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
Is it possible to have each category go to a specific email address?
same issue // Sorry, We dont have your email. Please Subscribe Below
please let me download – thnx
it works now … many thnx
Can. You. Please. Update. Your. Sub. List. So. I. Can. Download. Thnx.
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.
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
Hi, Can you refresh your email list please so I can download the code.. Thanks
Done.. You can download now
Can you refresh the email list please so I can download the code, Thank you
Can you refresh the email list please so I can also download the code, Thank you
I can’t download the code please refresh the data please. thanks.
Hi,
I’m trying to download the contact form, please update so I can recieve the source files
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.
Please download your file.
Thanks
InfoTuts
Cannot download…Can you refresh your email list please so I can download the code.. Thanks
Done, please get your file 🙂
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
thanks Sanjeev!
appreciate your post, thanks for sharing
crispey
Cannot download…Can you refresh your email list please so I can download the code.. Thanks
same problem here for downloading the code 🙁
Cannot download… Please refresh your email list! 🙂
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
Done, please get the file 🙂
Also I am not able to download, anyone managed?
Please get your file now
hii i am also having same problem help me out please
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 🙂
I cant d/l your source, could you refresh your email list please? Thanks 🙂
i already subscribe but it says Sorry, We dont have your email. Please Subscribe Below.
Hi I’d like to download and dit the registration but no download.. 🙁 thanks for updating if you would.
Thank you very much! great work!
I am having trouble downloading the files…
it says sorry, we dont have your email…
I’m also having trouble downloading the files, can you please update the email list?
Thanks!
Email list is refreshed.
Thanks:
Sanjeev
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.
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’);
}
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!
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!
Awesome! Thanks for the quick response!!!
please update my email so that I could download it anytime thanks!
I can’t download even though I’ve subscribed
i can’t download source even though I’ve subscribed
why ?
Email list has been refreshed please download the file.
Thanks
Waiting for the mailing list to be updated!!!!
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
Hi… Just subscribed here.
Hope I’ve been registered in your database tomorrow for download this…
Cheers !
Hi,
Please get your file now.
Hi Sanjeev …
Nice bootstrap form !
I can’t download even though I’ve subscribed ..
Hi,
Please get your file now.
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.
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?
Sorry, never mind. I think I confused you script with a different one. =)
HELLO
I HAVE SUBSCRIBED AND I’M TRYING TO DOWNLOAD , WOULD YOU PLEASE REFRESH YOUR EMAILS 🙂
Hi,
List refreshed, please download your file.
I cant download the file, the form looks like just what I need! I would like to implement this.
Thanks
Awaiting e-mail database refresh.
Thanks, this form is great I am excited to get the files and make it work!
Email list has been refreshed. Please download the file.
Thanks:
Sanjeev
Hi.
Can you refresh the email list please? still can’t download the code after 12 hours,
Cheers 🙂
Hi,
Please download your file now.
Thanks:
Sanjeev
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.
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?
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!
Please try downloading the code now.
Thanks:
Sanjeev
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!
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
You can download the file now 🙂
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
Hey there!
I got the same problem, can’t download your code!
Can you pls help me?
Thanx in advance!
edit: worked fine for me, just had to wait a day! thx…
Can you refresh the mail DB? 🙂 want to work on this beautiful code!
ty
Hi.
Please get your file now 🙂
Can you refresh the mail DB?
Done. Please get the file.
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
Please get your file now 🙂
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
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!
Hello, I’ve not been able to download, please add me to email list.
Regards
Daniel
[…] Script: Click here […]
Hi, when I’m trying to download, the page says I am unable to download, but I’m already subscribed.
Please download the code now, you should be able to download.
Thanks for the quick response/turnaround.
Just having a play, if used credit will be given.
Thanks again.
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.