css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A contact form built with Bootstrap 3. Field validation with Bootstrap Validator.


  1. Great!

    How can a send to email the form?

  2. @Roberto_polimi:

    That depends on how you will be using the form. In basic html you would add your sendmail script in this line

    form class="well form-horizontal" action="FORM MAIL SCRIPT" method="post" id="contact_form"

    You could use the PHP sendMail() function by creating a page called sendmail.php. There are many tutorials online for the sendMail() function. Just Google "Php send mail".

  3. Hi there. Did you already solved the Captcha problem? Im having same issue. Thanks on advance!

  4. I love this, but want to send email from ajax and fire the #success_message after the mail sends if successful. Would you or anyone be willing to provide an example of how that could work with this?

  5. Hey buddy, this is awesome and very well put together. I am having one small problem I'm hoping you can help me with? The success message isn't showing after submitting. I'm quite sure I have everything set right without any conflicting code...any ideas? Your input is appreciated just as much as this code you created. Thank you

  6. Do you have your "on.success" function set up correctly?

    .on('success.form.bv', function(e) { $('#success_message').slideDown({ opacity: "show" }, "slow") $('#contact_form').data('bootstrapValidator').resetForm();

  7. @kevD711 the example is set up to send via ajax and fire the success message after the form sends

  8. @danimal7134 Do you have your "on.success" function set up correctly? Look at the js:

    .on('success.form.bv', function(e) {
            $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
  9. @jaycbrf I'm pretty sure I do. It is directly within the js you created. at about line 103. Is there something I need to put on the HTML page?

  10. Hi! Such a cool form.

    Im fairly new to this and I dont understand which types of links to CSS and JS I should include. Where do I find this?

  11. oddlobe (@oddlobe)

    You can download the files here and take a look.


    If you change any filed names be sure to update the js file to reflect the changes

  12. Thank you for all the help :)

    You are a legend Jay! Great and beautiful work.

  13. Hi Jay, really great form! Thanks for sharing it!

    Quick question: I call my php script like this: 'form class="well form-horizontal" action="../sendmessage.php" method="post" id="contact_form"' The issue is that once the form is sent, the page that is displayed is actually sendmessage.php which states "{"message":"Message has been sent successfully","status":1}" (indeed the message was sent successfully - I'm using PHPMailer)

    Since I don't want the sendmessage.php page to be displayed when the users click on the "send" button, I guess that I would need to call this PHP script via the javascript? What I'm not clear is how to adapt your code in order to do so. Could you help me please? Many thanks!

    For the benefit of other users, here is the content of my sendmessage.php:

    `CharSet = 'utf-8';

    //Enable SMTP debugging. $mail->SMTPDebug = false;
    //Set PHPMailer to use SMTP. $mail->isSMTP();
    //Set SMTP host name
    $mail->Host = "smtp.elasticemail.com"; //Set this to true if SMTP host requires authentication to send email $mail->SMTPAuth = true;
    //Provide username and password
    $mail->Username = "xyz";
    $mail->Password = "xyz";
    //If SMTP requires TLS encryption then set it $mail->SMTPSecure = "tls";
    //Set TCP port to connect to $mail->Port = 2525;

    $mail->From = $_POST['email']; $mail->FromName = $_POST['first_name'];

    $mail->addAddress("xyz@gmail.com"); //CC and BCC $mail->addCC("xyz@outlook.com"); $mail->addBCC("");


    $mail->Subject = "Nouveau message de " . $_POST['first_name'] . $_POST['last_name']; $mail->Body = $_POST['message']."

    From page: ". str_replace("http://", "", $_SERVER['HTTP_REFERER']) . "
    " . $_SERVER ['HTTP_USER_AGENT'] ;

    $response = array(); if(!$mail->send()) { $response = array('message'=>"Mailer Error: " . $mail->ErrorInfo, 'status'=> 0); } else { $response = array('message'=>"Message has been sent successfully", 'status'=> 1); }

    /* send content type header */ header('Content-Type: application/json');

    /* send response as json */ echo json_encode($response);

    ?> `

  14. @grek,

    Your success message and error messages are defined in the PHP mail script and do not direct the form to refresh after success. These functions are handled in the js file.

    My mail script includes these two lines to handle what the page does:

                // Where to redirect after form is processed.
                $url = 'javascript://history.go(-1)';
                META HTTP-EQUIV=Refresh CONTENT="0; URL='.$url.'"
  15. Thanks Jay. Does it mean that the contact page is "reloaded" then ? (rather than a smooth display of the success message without reloading). Would you mind posting your full php mail script pls? (I'm not sure how to integrate your piece of code in my phpmailer script) - i'm a total newbie in php and js :/

  16. Hi Jay, I have some question, If i leave action field in form definiton blank and change the $.post function to $.post("mail.php", $form.serialize(), ..... nothing is happened. I'm looking for way to send content of the form without reloading ... maybe it is possible to use .load() function to some 1x1px div or something like that, but I can't figure it out yet. Can you think about it please ? ;)

    also I don't understand this line : var bv = $form.data('bootstrapValidator'); for what it is used inside the function ?

    And I have to thank you for this form ;)

  17. @KokyCZ

    this form does send without reloading.

    var bv = $form.data('bootstrapValidator'); this is the line Bootstrap Validator uses to initialize

  18. hi, very nice post and great work thanks to share your knowledge to us. everything is fine with this form but when I assign submit button a name and connect data with mysql form not working until I change any field again and then form is submitted. I can't understand the problem can you help me to to overcome this problem

    these are my php code.

  19. why my php code is not showing in this comment??? I have created this pen to show my php code because in comments code not showing


  20. @waseemsoa sorry my friend, my PHP is not that great. I can not figure out your issue.

  21. Cool form. Could you share us your mail script? I'm new in php and js and I can't figure out how to send the form. I'm using a PHP script but once sent, it rediect to contact.php page. Thanks in advance

  22. @manueltuka Everything you need is in the comments above. I am using a basic sendmail.php that you can google.

  23. @jaycbrf seems no one on the comments above have solved the issue, or at least I haven't found the answer in the comments. The issue is PHP is loaded after form is sent, so it's not returning and showing the response directly on your HTML, any idea?, I have uploaded what I have now here: http://tuka.mx/beta/contacto/index.html

  24. I've got a solution from StackOverflow: http://codepen.io/anon/pen/MadxaE?editors=001

    Hope it helps, seems a submit handler is missing.

  25. @manueltuka I am glad you figured it out on your own. But nothing is missing from the JS. The submit handler is built into the validator script at the end. It seems as though you removed it and placed it at the beginning but wrote it a bit differently. I have been using this script on my website for 2 years without any problems.

  26. Im trying to get a PHP file to send mail. I cannot find anything online. Can someone help me? I want my form to go to my gmail account

  27. i have tried this one and it did not send to my gmail. do i need to authorize gmail to use my php?

  28. @ajmakhl sorry, my bad... That version of the php script has a built in captcha.

    If you download the form from here https://github.com/jaycbrf4/Boostrap-Form-Validation-with-BootstrapValidator/blob/master/index.htm

    and copy from lines 262- 271 and add to your form it will add the captcha.

    Other than that it should send to any address unless your ISP has strict spam rules in which case change the from email on line 11



  29. @jaycbrf Hi, if i use the contact.php and then i click on send, i will get the whole php file in my screen? What is wrong then?

  30. Are you testing this locally or on a server? You will have to upload to a server or use Wamp, Mamp or OSX's built in apache server for the php file to run.

  31. @jaycbrf Hi, yes i am testing this locally. So if i use wamp and upload my files then it will work? Can i use a gmail account aswell to get the email's?

  32. Hi, In some countries of Europe, our phones has only 9 digits. How can we change the validation of mobile phone? With this code, if we put only 9 digits it assumes it as wrong; if we put 10, it turns green...


  33. In the validator JS file, you will change your country code from US to your country. it will adjust the script. Country codes and phone # formats here: http://formvalidation.io/validators/phone/

  34. Hi Jay, this is very well built but I'm having one of the most easiest problems to fix.. getting this error where it says that in your validate-me.js file the second line is not a function. here is the error;

    validate-me.js:2 Uncaught TypeError: $(...).bootstrapValidator is not a function at HTMLDocument. (validate-me.js:2) at j (jquery-1.11.3.min.js:2) at Object.fireWith as resolveWith at Function.ready (jquery-1.11.3.min.js:2) at HTMLDocument.J (jquery-1.11.3.min.js:2)

    please point me in the right direction as I can't even get past the first phase haha. Much appreciated!

  35. I am not getting any errors. Are you sure your code is correct?

  36. Really Great Article ! Thanks for posting. I would like to know weather is this a free or premium paid plug in because As I read http://bootstrapvalidator.votintsev.ru/api/ , blog it has a commercial license need. Is this a same like a form validation paid plug in ? Because I was searching url validation json tag from bootstrapvalidator but could not find and validate it so just want to know more about this.

    Thanks for help.

  37. The plugin is free under the MIT license. The button at the bottom for Commercial Support is if you want to pay the author to solve an issue.

  38. Thanks for reply. I am trying to set server side form error using below tag but no effect

    $('#contact_form').data('bootstrapValidator').updateMessage("first_name", "blank", "The username is not available"); $('#contact_form').data('bootstrapValidator').updateStatus("first_name", "INVALID", "blank");

    updateMessage :- this method not available in v0.4.5 BootstrapValidator.js so I have updated it to latest one from google. then after I am able to get updateMessage method.

    So can you please help me , If with the same way which you mentioned here for client side validation , how to display server side validation messages ? Ex: If Product Qty does not match with sufficient inventory stock then give message to client.


  39. Hi!

    Maybe I'm an idiot. But where are the V and X icons? They don't show up and I can't find them anywhere in the CSS files!


    Forget it. It's Bootstrap! Had to use a newer version! So I was stupid.

  40. I modified this form a little bit to my needs.

    To send the form, I wrote a separate asp (yes i know, asp is old) file that will send the contents of the form through mail + an auto response. I also used the viewport metatag so it's compatable with smartphones, tablets,...

    I also included reCaptcha.

    Check it out on https://www.surfgate.be/form/form.asp and tell me what you think.


  41. Hi Jay, I'm using your awesome code and I can't seem to make the contact.php work properly, I had added an extra code at the end of the PHP to make it work, I don't know why because I'm simply new to this whole thing, this is how I got the form to send me the email but then it shows me a blank page and no success message as it was supposed to:


    // if the 'Gotcha' field is empty 
    if(isset($_POST['gotcha']) && $_POST['gotcha'] == ''){
         // then send the form to your email
    mail($emailadd, $subject, $text, 'From: '.$email_from.'');
    echo '';

    I placed

        echo "Success!";
    } catch(Exception $e){
        //Something went bad
        echo "Fail - " . $mail->ErrorInfo;

    That is what I had to add to the .php to make it send me the email, but it brokes the client experience since it sends you to a white page and nothing tells you if the email has been sent

    Thanks in advance!

  42. @Attacus The check mark and X are bootstrap Glyphicons and included in Bootstrap CSS

  43. @jerome94 - Sorry, I do not know why it would not work for you. I am and have been using this code on my website with no problems.

  44. @jaycbrf4 Sorry for not looking it before! the solution was at the comment section, I had the same problem as @manueltuka I have fixed the issue by using the solution he provided

    > I've got a solution from StackOverflow: http://codepen.io/anon/pen/MadxaE?editors=001 > Hope it helps, seems a submit handler is missing.

  45. Richard @Rich_Glen_Dango on

    Hi, i am just starting out..how did you do all of this without any css code? i cant see how you spaced the glyphicon's to be where they are etc with out using css... thanks. i know i can just cut and paste but really like to know the theory behind the code.

  46. @Rich_Glen_Dango it is all base bootstrap CSS.

  47. Richard @Rich_Glen_Dango on

    cool,,what does that mean ;)

  48. Frederik Hermund @CreativeSparkStudios on

    Thanks for the great script. It would also be great to see the PHP version of this with working Google reCAPTCHA v2. I did manage to implement it myself, but no so elegantly, and not with on-form feedback on the captcha status. Will be checking back for possible updates here :-)

  49. Hi Jay, Nice code pen. I would like ask if it is possible to use multiple countries for phone number validation? I also tried to check for German phone number by changing country value to DE, and providing a number such as 004917683568110 or +4917683568110 is a valid DE number but it says invalid. Do you have any suggestions? Thanks.

  50. @centelleoss this is an older version of bootstrap validator. There are country codes for the validators.

  51. Hey guys, I have a stupid question. I just started learning about html last week, somehow when I download this file, I can’t get it to validate or see the pictures such as the phone, the email icon or the house. Any help would be greatly appreciated!

  52. There are a lot of other files linked to it for it to work. The validation is handled by javascript files and the icons are FontAwesome. You have to link the CSS file and download the fonts. Check out CodeAcdemy.com and take the FREE html and CSS courses.

  53. Thanks! I will definitely check them out. Do you have all of these files in a folder?

  54. Jay,

    Just a quick question. I want t make the background full width, and have fooled around with form-horizontal, contact_form, but I can't get the background to change. Can you give me a hint?

  55. Not sure what you mean by background... The form is in a Bootstrap well. Remove the "well" class and the form will be the width of the container. If you want it full width, change the container to container-fluid.

  56. Hi Could you email me:


    I need some help with the css and stylesheets etc

    Thanks in advance

  57. Sorry - VERY busy

  58. I am using your form script along with your contact.php to send the email. When testing the form sometimes it sends the email and other times it doesn't. In all cases after the form is submitted it directs to the success page but still some of the emails are not being received. What would cause this? Does it have anything to do with the below piece of code from your contact.php file? What has to be less than 22 characters? Thank you for your help :)

    $j = strlen($key);
    if ($j >= 22)
    {echo "Name of form element $key cannot be longer than 22 characters";die;}
    $j = 22 - $j;
  59. Most valuable pen I’ve seen. Only room for improvement is to make the first to make the first and last name letters only with no spec chars allowed (ie $&@). I plan on making the tiny revision.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.