How to make a contact form with Bootstrap 3 ? (JQuery/PHP/HTML5/JqBootstrapValidation)


Hey guys!

Today we will talk about such essential feature for any website as contact form. Recently, while working on one of the projects, I had a pleasure combining couple of very nice tools (Bootstrap 3 + JQuery + jqBootstrapValidation), which resulted in minimalistic , but powerful contact form, that would be a good addition to any website.

Contact me form

VIEW DEMO          CODE

In this post I will walk you through the process of developing this form. Also if you just want to put it in your website, just pulled from my github repo and have fun.

Sounds good ?

Let’s start.

When I was developing my form I had in mind following goals:

- Minimalistic design
– Track person’s contacts for future communication
– Send form information directly to my email
– Validate input – client side and server side
– Show success when form is sent, or provide alternative method if something went wrong

As you might see – nothing special. I would love if somebody else would provide me this solution yesterday, when I was working on my project – this could save me some time! :)

Let’s divide our workflow into sections:
– Required Libraries
– UI
– Client-side Validation, JQuery – PHP Interaction
– PHP (so called server side)

Required Libraries

We will require following libraries :
Botostrap 3
–  jqBootstrapValidation

So all you need to do is just download necessary files and put them in.

After getting Bootstrap and jqBootstrapValidation our website tree will look like this:

-
– –  css
– – – bootstrap.min.css
– – js
– – – bootstrap.min.js
– – – jqBootstrapValidation.js

Let’s move to the UI part.

UI

For the UI we will use Bootstrap 3 and some attributes from jqBootstrapValidation.js . I won’t cover Bootstrap 3 components as it will take far too long, but if something is unclear, please shoot me an email and I will clarify that for you.

So in the root of our website we need to create file form.html .

Final version of /form.html will look like this:




Contact form for your site by Anatoly Spektor
  <!-- Bootstrap CSS -->
  	<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen" />


<!-- Contacts --></pre>
<div id="contacts">
<div class="row"><!-- Alignment -->
<div class="col-sm-offset-3 col-sm-6">
      <!-- Form itself -->
<form class="well" id="contactForm" name="sentMessage" novalidate="">Contact me
       <!-- Full Name -->
<div class="control-group">
<div class="controls">
	    <input class="form-control" id="name" type="text" placeholder="Full Name" required="" data-validation-required-message="Please enter your name" />

</div>
</div>
        <!-- Email -->
<div class="control-group">
<div class="controls">
		<input class="form-control" id="email" type="email" placeholder="Email" required="" data-validation-required-message="Please enter your email" /></div>
</div>
        <!--Message -->
<div class="control-group">
<div class="controls"></div>
</div>
<div id="success"></div>
 <!-- For success/fail messages -->
 <button class="btn btn-primary pull-right" type="submit">Send</button>

</form></div>
</div>
</div>
<pre>
 <!-- JS FILES -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jqBootstrapValidation.js"></script><script type="text/javascript" src="./js/contact_me.js"></script>




Sorry for this formatting, it’s hard to put code into WP, please find formatted version of form.html here

If you are familiar with Bootstrap – this code is pretty straightforward.

There are couple of important things I would like to point out:

  1. Since we are using jqBootstrapValidation, we need to put novalidate attribute into our form tag, otherwise HTML5 validation will clip jqBootstrapValidation validation.
  2. To change color/style of your error messages just change “.help-block” CSS class
  3. data-validation-* classes are used to specify custom message when user does something incorrectly. You can find more about those here.
  4. jqBootstrapValidation library looks at input and textarea tags and automatically puts validation if needed. For example if there is a “required” attribute, it automatically will put error message if the field is empty.

That’s all I can think of, if you have additional questions, please send me an email, or ask me in the comments below the post.

Client-side Validation, JQuery – PHP Interaction

So now we have finished the design of our form. Next step is to activate jqBootstrapValidation library, pass users data to PHP, which will send an email and finally show something to the user.

Most of these is done in one tiny JQuery function.

Here it is (file js/contact_me.js):

/*
  Jquery Validation using jqBootstrapValidation
   example is taken from jqBootstrapValidation docs
  */
$(function() {

 $("input,textarea").jqBootstrapValidation(
    {
     preventSubmit: true,
     submitError: function($form, event, errors) {
      // something to have when submit produces an error ?
      // Not decided if I need it yet
     },
     submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit haviour
       // get values from FORM
       var name = $("input#name").val();
       var email = $("input#email").val();
       var message = $("textarea#message").val();
        var firstName = name; // For Success/Failure Message
           // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
	   firstName = name.split(' ').slice(0, -1).join(' ');
         }
	 $.ajax({
                url: "./bin/contact_me.php",
            	type: "POST",
            	data: {name: name, email: email, message: message},
            	cache: false,
            	success: function() {
            	// Success message
            	   $('#success').html("</pre>
<div class="alert alert-success">");
 $('#success > .alert-success').html("<button class="close" type="button" data-dismiss="alert">×")
 .append( "</button>");
 $('#success > .alert-success')
 .append("<strong>Your message has been sent. </strong>");
 $('#success > .alert-success')
 .append('</div>
<pre>
');

 		  //clear all fields
 		  $('#contactForm').trigger("reset");
 	      },
 	   error: function() {
 		// Fail message
 		 $('#success').html("</pre>
<div class="alert alert-danger">");
 $('#success > .alert-danger').html("<button class="close" type="button" data-dismiss="alert">×")
 .append( "</button>");
 $('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Could you please email me directly to <a href="'mailto:me@example.com?Subject=Message_Me">me@example.com</a> ? Sorry for the inconvenience!");
 $('#success > .alert-danger').append('</div>
<pre>
');
 		//clear all fields
 		$('#contactForm').trigger("reset");
 	    },
           })
         },
         filter: function() {
                   return $(this).is(":visible");
         },
       });

      $("a[data-toggle=\"tab\"]").click(function(e) {
                    e.preventDefault();
                    $(this).tab("show");
        });
  });

/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
     $('#success').html('');
  });

For the most part I have took the function from jqBootstrapValidation examples. However, there are couple of things particularly interesting to us.

jqBootstrapValidation allows to overwrite submit on success behaviour, which I am doing in this case. If user submits everything without errors – I do a POST request to the file bin/contat_me.php with name, email and message.

File contact_me.php, which we will code in the next section, sends me an email with everything that user filled in. Also, I check If I am able to connect to this file, in this case I send back “Message sent successfully” to the user, otherwise I give an error telling user to email me directly ( use cases: for example if mail server is down, if validation on server side failed, if permissions to php file are incorrect etc) .

There is not much to add, but if you have any questions regarding this function do not hesitate to ask.

PHP (so called server side)

Finally, we got to the last piece of this puzzle. I have a php file that does some validation on the data received from form and sends me an email.

Here is my PHP file ( bin/contact_me.php )

<?php 
// check if fields passed are empty 

 if(empty($_POST['name'])   ||    
    empty($_POST['email'])  ||
    empty($_POST['message'])||   
    !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))    
  { 	
       echo "No arguments Provided!"; 	return false;    
  } 
	
  $name = $_POST['name']; 
  $email_address = $_POST['email']; 
  $message = $_POST['message']; 	 

 // create email body and send it	 
 $to = 'me@myprogrammingblog.com'; 
 // put your email 
 $email_subject = "Contact form submitted by:  $name"; $email_body = "You have received a new message. \n\n". 				  
                   " Here are the details:\n \nName: $name \n ". 				  
                   "Email: $email_address\n Message \n $message"; 
 $headers = "From: contacts@myprogrammingblog.com\n"; 
 $headers .= "Reply-To: $email_address";	 

 mail($to,$email_subject,$email_body,$headers); return true;			 
?>

As you might see my PHP file is even more simple. Of course you can add extra validation on top of it. For my use case I am just checking if fields are not empty and if email has correct format. If everything is correct, I create an email and use PHP’s mail function to email it.

That’s it.

You can find all these files here.

I hope this function will be useful for you!

Regards,

Anatoly

Update:

F.A.Q

(Thanks a lot to Corey Russell  for resolving some of the occurring issues)

Q:  I see “Sorry <Name> it seems that my mail server is not responding… Could you please email me directly to….”

A:  1. Go to line 26 of the contact_me.js file you have. There you’ll see the url for contact_me.php. Make sure that url is correct. I think by default it is pointing to a folder called bin.
2. If you try it from your desktop it won’t work as it doesn’t have a php server/client installed.

 

About these ads

About Anatoly Spektor

My name is Anatoly Spektor (originally Anatolijs Spektors) I am Software and Web Developer. I have worked in Seneca Center for Development of Open Technology on Big Blue Button Add-on - Polling Module. Currently, I am employed as Software Engineer in Red Hat.
This entry was posted in Bootstrap, HTML5, JavaScript, Jquery, open-source, Programming Languages and tagged , , , , , . Bookmark the permalink.

151 Responses to How to make a contact form with Bootstrap 3 ? (JQuery/PHP/HTML5/JqBootstrapValidation)

  1. Thomas Anderson says:

    Hi,

    Whenever I try to send a test email it says my mail-server isn’t responding. What does that exactly mean?

    • Hey,

      I have faced it too. It worked for me on the hosting (as it has mail server on it and mail() is configured with PHP), but did not locally. Try looking for how to setup mail with PHP. (For example this website can be useful: http://www.quackit.com/php/tutorial/php_mail_configuration.cfm )

      Hope this helps,

      Anatoly

      • Larsson says:

        Hello Anatoly,
        Thanks for this wonderful tutorial. I am a new web developper. I am trying to run this example on my Desktop but it’s not working. I have got XAMP server installed ùn my pc ! I am getting this error ” it seems that my mail server is not responding… Could you please email me directly to….”” Can u please help. Thanks.

    • coreyrussell says:

      Hey Thomas,

      I don’t know if you’ve fixed it yet, but I had a problem with the mail server as well. I fixed the issue by making sure the correct path was entered on line 26 of the contact_me.js file. Hope this helps if you haven’t got it already.

      Corey

    • Gerna says:

      I’ve tried many, none working – New to this – helped a lot, thanks for the great post!!

  2. AntonBlog says:

    thanks Anatoly Spektor,

  3. Tiago says:

    Hi!
    I have this problem
    “Sorry Tiago it seems that my mail server is not responding… Could you please email me directly to….”
    How can fix this? I have not much idea of php

    Thanks for all!

    • coreyrussell says:

      Tiago, go to line 26 of the contact_me.js file you have. There you’ll see the url for contact_me.php. Make sure that url is correct. I think by default it is pointing to a folder called bin.

      You can see that I have a working example on my site. http://www.coreymrussell.com. Click the contact link and you can see that it works.

      • Shay says:

        Great work.

        in the text area “Message”, the placeholder is not shown, all i can see are empty spaces.
        in the demo link, it is OK – there is no problem.
        But when i looked in coreyrussell website, i see the problem i mentioned above.
        could you please check coreyrussell site, and tell me how to fix it.

        Thanks,
        Shay

  4. coreyrussell says:

    Shay,

    I hadn’t actually noticed that until you pointed it out as I did not wish to use placeholders. I have updated my contact form, however, to show you the only viable solution I could find. It seems as though placeholder isn’t playing nice with textarea in bootstrap 3… so I just put the text I wanted between the tags.

    ex:

    Your Message Here

    Thanks,

    Corey

  5. coreyrussell says:

    Well the markup I’m used to for showing code didn’t work lol… but you get the picure

  6. Eric says:

    Corey,
    Have a long form that I am using your tutorial with. The only issue I am having is posting any checkbox from the form.

    Here is the input:

    Select: Dear Tastebuds: You’re Welcome.

    Here is what I have in the JS file:
    var library_selection = $(“input#library_selection”).val();

    data: { library_selection: library_selection}

    and the PHP Post:
    if(!empty($_POST['library_selection'])) {
    foreach($_POST['library_selection'] as $check) {
    echo $check;
    }
    }

    Email Body:
    $email_body = “Libary Selection: $check \n”.

    Any thoughts would be great!

    • ercheitz says:

      Okay here is the input again without the brackets:
      input type=”checkbox” value=”OD_Dear_Tastebuds” name=”library_selection[]”

    • coreyrussell says:

      Eric,

      This is not my script. I just had some of the same issues that others were having, and was happy to help. As for your issue set the name in the form to check_list[] and you will be able to access all the checkboxes as an array($_POST['check_list'][]).

      Let me know how this works for you, or if something else solves your problem.

      Thanks,

      Corey

      • coreyrussell says:

        the php looks like:

        if(!empty($_POST['check_list'])) {
        foreach($_POST['check_list'] as $check) {
        echo $check; //echoes the value set in the HTML form for each checked checkbox.
        //so, if I were to check 1, 3, and 5 it would echo value 1, value 3, value 5.
        //in your case, it would echo whatever $row['Report ID'] is equivalent to.
        }
        }

    • coreyrussell says:

      Eric,

      This is not my script. I just had some of the same issues that others were having, and was happy to help. As for your issue set the name in the form to check_list[] and you will be able to access all the checkboxes as an array($_POST['check_list'][]).

      Let me know how this works for you, or if something else solves your problem.

      Thanks,

      Corey

      • coreyrussell says:

        Not sure why this posted twice but yeah…

      • ercheitz says:

        Thanks for the reply! Not sure why I am having so much problems with this.
        Does the jQuery need to be changed at all? I have a Terms & Conditions checkbox that wasn’t working but now is. var terms_and_conditions = $(“input:checked”).val();
        For the check_list its still posting nothing. Changed the name to check_list[], my php is:
        if(!empty($_POST['check_list'])) {
        foreach($_POST['check_list'] as $check) {
        echo $check;
        }
        }
        and jQuery: var check_list = $(“input#check_list”).val();
        Form submits but the check_list post is blank.

      • ercheitz says:

        HA! Man I just realized what “This is not my script.” reply was all about. Thanks for reply! Will let you know how it goes.

  7. ercheitz says:

    Well the code did not translate well. Here the input again:
    Select: Dear Tastebuds: You're Welcome.

  8. coreyrussell says:

    Eric,

    Check this post about the implode

    http://stackoverflow.com/questions/16967745/post-multiple-checkbox-values-into-php-email

    And let me know if you figure it out, I don’t have the time to test it right now. Happy it solved part of your problem.

    Thanks,

    Corey

  9. Marco says:

    Hi Corey i have this problem :
    “Sorry Marco it seems that my mail server is not responding… Could you please email me directly to….”

    I copied the URL from your personal site like :

    $.ajax({
    url: “contact_me.php”,

    without folder and it doesn’t work.

    this is the site : http://www.zippashirt.it

    Can you please help me

    • coreyrussell says:

      I tired it from your site and it is working. If you try it from your desktop it won’t work as it doesn’t have a php server/client installed. But it seems to be working for me on zippashirt.it

  10. Luis says:

    First of all, thanks
    Sorry Luis it seems that my mail server is not responding… Could you please email me directly to
    ¿why? Help me!! :/

    http://replu.freezoy.com/practica1/

    • coreyrussell says:

      Luis,

      1. Make sure you are testing it from your web server. Do not test it from your desktop as it will not work.

      2. As mentioned in previous comments, go to line 26 of the contact_me.js file you have. There you’ll see the url for contact_me.php. Make sure that url is correct. I think by default it is pointing to a folder called bin.

      Thanks,

      Corey

      • Luis says:

        Yes, I have the 2 files in the same folder.

        url: “contact_me.php”,
        type: “POST”,

        does not work :/

      • Eric says:

        Try adding “./” before contact_me. My PHP file is in the same directory as the indes.php file and I had to add the dot and forward slash.

  11. coreyrussell says:

    And you are testing it from a web server?

  12. Luis says:

    +ercheitz –> https://www.dropbox.com/s/0j0c6xfttte6pxj/php.JPG

    url: “contact_me.php”,
    type: “POST”,

    ¿¿¿adding “./” before contact_me.php???

  13. ercheitz says:

    within the script:
    url: “./contact_me.php”,

  14. Luis says:

    Hello guys! –> Your message has been sent. <– Yeahh
    I do not get the message to my email, why? :/

  15. Do you have mail server on your desktop, or are you running it from hosting ? regarding mail server- http://www.quackit.com/php/tutorial/php_mail_configuration.cfm

  16. Luis Mendoza says:

    Running it from hosting “freezoy.com”
    All my files are uploaded to the hosting site.. http://replu.freezoy.com/reparaciones/practica1/

    contact_me.js –> http://pastebin.com/dv9jBAPa
    contact form (/bin/contact_me.php) –> http://pastebin.com/Bw7p4rmt

  17. Nic says:

    Hi Anatoly,

    Many thanks for the form. I have installed it and have it working. However I would like to be able to send two messages to two different email addresses when the form is submitted.

    Would I be able to add this to the contact_me.php file and where you create the email body I would create two sections of code, one for $to1 and $to2, $email_subject1 and $email_subject2?

    Any help gratefully received.

    • coreyrussell says:

      Ok Nic. Try using an array and implode it to a comma separated string.

      $recipients = array(
      “youremailaddress@yourdomain.com”,
      “yoursecondemail@yourdomain.com”
      );
      $email_to = implode(‘,’, $recipients); // your email address
      $email_subject = “Contact Form Message”; // email subject line

  18. Ethan says:

    I put the php file on the site root folder and playing on the MAMP server on my desktop.
    ” Your message has been sent. ” That is great!
    However, when I checked my email, I do not get the message to my email either.
    Could you help me out?

    • coreyrussell says:

      Make sure it’s using an up to date version of php, or try running it from a web server to see if it produces the same error. Also check your spam folder just in case ;)

      • Ethan says:

        I am using 5.3.6 version of php. I have been digging for the answer to this question and found out it might be the problem of MAMP having no mail server. I believe you are right. I didn’t launch my website to a web server yet and I will try to figure it out then. Thank you for your quick reply. ^^ BTW: Do you have recommended web server?

  19. kay says:

    Hi, Thanks for the tutorial. Great work!

    Im running it from a web server (@godaddy) but I don’t get the message “Your message has been sent”.

    What could be the problem?

    My php skills are very very basic.

    Thanks

  20. Jimmy Thet says:

    Most excellent! It’s working fine here!

    One question:

    How to redirect the user to a different page after the form is successfully submitted?

  21. Peter Joe says:

    Hi all,

    What and where do I need to change to adapt this to a different framework from Bootstrap (Using Gumby)?

    Appreciate any help that I can get!

  22. Diego says:

    I try from 6 hours now and it’s still not working :(
    Can you help me ? Where am i wrong ?

    http://www.pixyweb.fr/clients/colbert/colbert-patrimoine-nantes-contactb.html

  23. Hannes Hjarne says:

    How can you close down this form? What is the data-dismiss=”xxxxxx”?

  24. Roy Jossfolk says:

    For some reason it takes several seconds before it gives a success message. I am only asking for a users email address. What would be causing this? My site is bchotbox.com

  25. Really useful for those are looking for ready made solution

  26. mike says:

    hi, thx for this beatiful bootstrap form,
    i have problem with this so, it send mail with chrome but most of time doesnt send mail in IE and in Firefox i dont know why, pleay help

    thx.

    • Hey Mike,

      Since mail is sent “server-side” through php script , I don’t think that mailing action is browser-dependant, unless you have some plugin in one of the browser that actually sends an email.

  27. Nate says:

    Hey,
    thanks so much for the form!

    I wondering if you could help me with a problem:
    I’d like to add two more fields: Business name and phone. I put the input box, but without the right code it doesn’t send it to my email. Could you help me out?

    Thanks,
    Nate

    • Hey Nate,

      I am glad that you like the form. It is great that you are adding fields! Adding fields is not hard at all. I don’t want to give away the whole solution, but I am glad to give you couple of tips. Trust me adding fields is super easy!

      Here is where you should look at:

      1. Add input text boxes for you fields to the UI the way I am doing it lines 14-16 of form.html
      2. add your fields to client side validation (js/contact_me.js) the same way I do it in lines 17-18 of contact_me.js

      3. In PHP catch client input like I do it in lines 12-13 and add variables where save client input into mail function (line 24) all this inside contact_me.php

      Try it and tell me how it goes :)

      Regards,

      Anatoly

  28. Alex says:

    Tks for this, works perfect for me except french accent…

  29. mav says:

    How would i add ReCapcha to this form?

  30. Nali says:

    it’s saying “message sent” but not receiving anything in the email

  31. james says:

    how do i make the failure messages red like the success ones are green

  32. Joe says:

    I have a page that has a contact form and a quotes form in it. How can this be implemented with two forms.

  33. imahar says:

    I want to ask one question that how the submit button is associated with the javascript file which calls to the server side code in your code in “js/contact_me.js” .Actually i need to send some data to the database from html page i want to use your code to call server side code.

  34. Fajer says:

    That’s great man, it saved me a lot of time. Thanks a lot. :-)

  35. Mikey T says:

    Excellent article, many thanks.
    Just wondered if anyone is aware of any way to hack the validate script so that errors are displayed in bootstrap popovers instead of help-blocks. Due to cross domain issues, I have to iframe this form into a modal and the extra space to accommodate the help-blocks is damn ugly.

    I realise this is not your script but just checking as I can’t find anything online.

    Cheers,
    Turbs

  36. R says:

    First off, awesome work!
    This would be really helpful.
    However, its saying “Mail Sent, but I don’t get any emails at all.
    PLEASE HELP!

    • Hey R,

      I am glad you liked the post. When I myself try to use PHP mail() function from my local computer, it does not work, because it is not configured to send emails, whereas if I try to upload it to web host – it works perfectly fine.

      Hope that helps!

  37. Fajer says:

    You know what would be absolutely great? :-) If you could add captcha validation :-)

    • I don’t believe in captchas they are making easy-enough process so much difficult, especially ones that hard to read :) But In case you need one, there are plenty of easy to use add ons that you just copy-paste and you have a captcha :)

  38. Melocotron says:

    Hi, I have a little problem, when I send a message (I put mi email on line 17 y 22 contact_me.php), I recive two messages, and It is a bit annoying. Any solution? :)

  39. Matthew says:

    My form works and sends ok but will not display the success message, any ideas?

  40. Garry says:

    Hi, everything is working with the form. Thanks for your work.
    Only one thing I need to do to finish the form and I have have tried everything I know. And I am not say that I know a lot, just enough to get the though. So I would appreciate your help.
    In my form I have a checkbox to check if someone would like to subscribe to a newsletter:

    Newsletter

    I would like to receive your e-newsletter.

    I do not know what alterations are needed to contact_me.js to POST the value to contact_me.php
    If you could help it would be much appreciated. Thankyou.

  41. Garry says:

    Tried to put in the checkbox code but it didn’t accept it.
    <!—->
    <!–Newsletter–>
    <!—->
    <!—->

    <!—->
    <!—->
    <!—->

  42. Hey! I know this is kind of off topic but I was wondering if
    you knew where I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having problems
    finding one? Thanks a lot!

  43. Hi Anatoly,

    Thanks for the contact form, it works like a charm! I had it up and running in 35 mins. As you mentioned, I had to change the name of the .php file, but that’s it.

    Sincerely,
    Stephan

  44. Seth says:

    Hi Anatoly,

    First off great form, it works really well and it’s great having the fall-back in case the mail server is unavailable.

    I’m currently trying to extend the form and add a select dropdown but am having trouble getting the value passed through to the contact form. I had a look over the comments here and saw one from Nate which was along similar lines.

    The dropdown is displaying on the form fine, I have updated the contact_me.php to collect the new post variable (called location) and have updated the contact_me.js to add the new variable after line 19.

    Using chrome debugging on contact_me.js and some breakpoints I can see name, email and message getting set but the new location variable remains undefined.

    I have added the following code:

    // form.html – added within form

    NoLocation
    Location1
    Location2

    // contact_me.js – added after line 19
    var area = $(“input#location”).val();

    //contact_me.php – added after line 14
    $location = $_POST['location'];

    I’m really not sure what the issue is – although I’m thinking I’ve missed or messed up something in the contact_me.js.

    Any pointers would be most welcome!

  45. matt says:

    How do i add more space to the button?

  46. uzzybotak says:

    Thanks for your tutorial. When I follow the tutorial first, I have no problem querying my message to my database. But when I change the form.html to form.php it doesn’t work. It doesn’t even calls the action from ./bin/contact_me.php. what happened?

  47. See if the tires are flat and wide, whicch
    makes it harder for you to go for this ever since this time last year.

    Ardent bikers mayy bring their riding own bikes. The cyclist increases the distance for the same period.
    Try to better your time each time you go for a race licence.

  48. Sylvain says:

    Hi,

    thanks for this useful form ;)

    It seems that everything is working fine for me… I even have the “message successfully sent” message… BUt I never receive any mail :'(

    I have correctly setup my email in the contact_me.php file on line 17 (and 22)

    do you have any clue what could cause this?

    you can check the form on the site http://lecosiweb.free.fr/#contact

    thanks for your help

    • This has to do with your mail server. Make sure you have your mail server set up properly. You could also try programs such as FakeSMPT that act as Fake Mail Sever, in order to see if email are coming through. If they are, you will need to set a real mail server.

      • sylvain says:

        Hi,

        thanks for your answer.

        I replaced the form by a h ref to a php file with the mail function hard coded (
        mail(mail@eurfref.fr,”text”,”text”)

        and it’s working fine… ;s

        meaning the issue is not from the mail server nor the PHP mail function not working.

        If you have any way of opening a window with the variables listed I could try to debbug this ;)

        thanks again

  49. William Jane says:

    Hi there, thanks for the form it looks amazing. However I have the problem that none of my mails are actually coming through. All seems to be fine and validating. http://williamjane.com/construction/kimberacoustics/form.html

    I’m with justhost and I found something about making sure the E-mail goes to an adresss at the same URL, which I am now testing with but still can’t get it to work. Any ideas?

    Thanks

    • sylvain says:

      Hi,

      I managed to have it working. I don’t know why but it seems that all the pre-check seems to be the issue…

      I commented all that part:
      // check if fields passed are empty
      //if(empty($_POST['name']) ||
      // empty($_POST['email']) ||
      // empty($_POST['message']) ||
      // !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
      // {
      // echo “No arguments Provided!”;
      // return false;
      // }

      and now everything works fine

      • I had the same issue – commenting out the server-side validation seems to work for me. I don’t know php, so I have no idea what part of this isn’t working – any suggestions?

  50. Diederick says:

    Hi,

    Same problem over here.. Everything looks fine, but no mails are coming true. I’m not that into mailservers etc.. How to fix it? :(

    http://visualtalents.nl/vdh/

  51. I leave a leave a response when I like a article on a site or if I have something to valuable to contribute to
    the conversation. Usually it is triggered by the passion communicated
    in the article I read. And on this post How to make a contact form with Bootstrap 3 ?
    (JQuery/PHP/HTML5/JqBootstrapValidation) | My Programming Blog.
    I was excited enough to leave a thought ;) I do have some questions for you if
    it’s allright. Could it be simply me or does it give the impression like a few of the comments
    appear like written by brain dead visitors? :-P And, if you are writing on additional social
    sites, I would like to keep up with anything new you have to post.

    Would you list all of all your social sites like your linkedin profile, Facebook page or
    twitter feed?

  52. Each state bar association should have a database of complaints and reprimands on each practicing attorney.
    However, this lawyer is mainly involved in Tort law related cases.

    Also, a client needs to know that an attorney is invested in handling the claim themselves.

  53. Jonelle says:

    Even the name Sweetest Day suggests that you choose a gift
    that has an aroma, bouquet, fragrance or
    scent as some of the sweetest day gift ideas for girlfriend.
    You can have the bunny holding a gift basket in place
    of the egg basket for a real easter treat for moms,
    grandmothers or even a thoughtful easter hostess gift. This
    way they add the wet ingredients and enjoy the cookies.

  54. Vernon says:

    I enjoy reading an article that can make men and women think.
    Also, thanks for allowing for me to comment!

  55. Elod Andras says:

    How can i put in to Modal ? :)

  56. Sherrill says:

    Com have an online search, don’t just serve as the water damage restoration services, our specialty services to other customers, though,
    if the product. Kohl provide employed as a comprehensive package of up to
    the job? The plumbing company in business amidst tough competition.

  57. 1gbps rdp says:

    You could certainly see your enthusiasm in the work you write.
    The world hopes for even more passionate writers like you who
    aren’t afraid to say how they believe. All
    the time follow your heart.

  58. whit says:

    Can anyone help me with this ? what does the control-group and controls classes do and have checked the bootstrap and bootstrap validation documents and can find nothing on them.

    Thank you

  59. daniel says:

    Thank you for this great and simple contact form! i have one question: how to prevent double submit?
    My server takes about 10-15 seconds to send the message (dunno why), while that is happening you see nothing and probable people will submit several times…
    I’m not much of a coder or a programmer, i tried several solutions i found on google but nothing seems to work for me…

    any ideas?
    thank you

    • daniel says:

      Sorry for the double post… i finally disabled the submit button after clicking it, but i have another question:

      How can we enable a “sending, please wait” alert, after clicking the submit button and disappears with the “message sent” alert? takes too long to process and see the “message sent” alert…

      thank you,

  60. That is always to say, Bunn is certainly recognized because of its esteemed reputation along with
    its style. Coffee lovers have come a long way since days when retired NBL players were plugging coffee makers on television. Also, regular ground coffee should remain in contact
    using the water for between six to eight min.

  61. Matias says:

    Hi, have you may use this form Php Mailer?

  62. Fantastic post however , I was wanting to know if you could write a litte more
    on this topic? I’d be very thankful if you could elaborate a little
    bit more. Appreciate it!

  63. I like what you guys tend to be up too. This type of clever
    work and reporting! Keep up the wonderful works guys I’ve incorporated you guys to my personal blogroll.
    cheap followers instagram

  64. Heya outstanding blog! Does running a blog
    like this require a massive amount work? I’ve virtually no understanding of coding but I had been hoping to start my own blog soon. Anyway, should you have any ideas or techniques for new blog owners please
    share. I understand this is off subject however
    I just had to ask. Cheers!

  65. sbo222 says:

    คุณ ได้ทำ บาง ดี จุดที่ มี ฉัน มอง บนเว็บ สำหรับข้อมูลเพิ่มเติม และพบว่า ประชาชนส่วนใหญ่ จะ ไปพร้อมกับ มุมมองของคุณ บน
    เว็บไซต์นี้ เว็บไซต์นี้ .

  66. I enjoy what you guys tend to be up too. This type of clever work
    and reporting! Keep up the fantastic works guys I’ve added
    you guys to my blogroll.

  67. The Ceremony will provide a better life. Facebook for AndroidFacebook android application developer is easy to
    understand about the apps to run without needing Android based smartphones, tablets PCs, and going by the game
    of war fire age cheats recipient and its application use. The most
    current gear for your ride. Not only in IT, entertainment has gone through a town, but it also teaches us.

  68. Spot on with this write-up, I actually think this
    site needs a great deal more attention. I’ll
    probably be returning to read through more, thanks forr the advice!

  69. I have read so many content regarding the blogger lovers except
    this paragraph is actually a nice article, keep it up.

  70. I think that is among the such a lot significant information for me.
    And i am happy studying your article. However want to remark on some common issues,
    The website style is wonderful, the articles is actually excellent : D.
    Excellent job, cheers

  71. Your style is really unique in comparison to other people I’ve read stuff from.

    Many thanks for posting when you have the opportunity, Guess I will just bookmark this blog.

  72. Thanks to my father who stated to me about this web site, this blog is in fact awesome.

  73. I think the admin of this web site is truly working hard in support of his web site, for the reason that here every material is
    quality based stuff.

  74. Heya this is kinda of off topic but I was wondering if
    blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding skills so I wanted to get advice from someone with experience.
    Any help would be enormously appreciated!

  75. Have you ever considered about including a little bit more than just your articles?
    I mean, what you say is fundamental and everything.
    However think about if you added some great photos or video clips to give
    your posts more, “pop”! Your content is excellent but with images and video clips,
    this blog could definitely be one of the most beneficial in its niche.
    Amazing blog!

  76. May I simply say what a relief to uncover an individual who actually understands
    what they’re talking about over the internet. You certainly know how to bring an issue to light and make it important.
    A lot more people really need to check this out and understand
    this side of your story. I was surprised that you are not more
    popular given that you most certainly have the gift.

  77. When some one searches for his required thing, so he/she desires to be available
    that in detail, so that thing is maintained over here.

  78. You’re so cool! I do not believe I’ve read anything like this before.
    So nice to discover someone with a few original thoughts on this subject
    matter. Really.. many thanks for starting this up. This web site is one thing that is
    needed on the web, someone with some originality!

  79. Heya! I understand this is somewhat off-topic however I needed to
    ask. Does running a well-established blog like yours require a lot of work?
    I am completely new to writing a blog however I do write in my
    diary daily. I’d like to start a blog so I can easily share my own experience and feelings online.

    Please let me know if you have any recommendations
    or tips for brand new aspiring blog owners. Thankyou!

  80. You could certainly see your skills in the work you write.
    The world hopes for more passionate writers
    such as you who aren’t afraid to say how they believe.

    All the time go after your heart.

  81. Hello friends, how is everything, and what you would like to say on the
    topic of this post, in my view its genuinely amazing in support
    of me.

  82. Yes! Finally something about The Nile Coupon Code.

  83. Asking questions are truly fastidious thing if you are not
    understanding something fully, but this article gives pleasant understanding even.

  84. Pingback: Wordpress contact form using .ajax - HelpDesk

  85. Write more, thats all I have to say. Literally, it seems as though you relied
    on the video to make your point. You definitely know what youre talking
    about, why waste your intelligence on just posting videos to
    your blog when you could be giving us something enlightening to read?

  86. Wow! Finally I got a blog from where I can actually get valuable data concerning my study and knowledge.

  87. Pretty section of content. I just stumbled upon your web site and in accession capital to assert that I get actually enjoyed account
    your blog posts. Anyway I will be subscribing
    to your feeds and even I achievement you access consistently rapidly.

  88. It’s very trouble-free to find out any matter on net as compared to books, as I found this piece of writing at this web page.

  89. Race Rivals Compromise Device Intended for Online games

    It’s challenging to be able to dismiss the point that racing video games paid out correctly about iOS.

    Mainly because it been found iOS could be
    the best software with regard to gamers which are
    in typical large pace chases when the electronic monitor becomes on a regular basis used.

    Though that a lot of auto racing game titles look like accomplishing just fine it is sub-genre, lug racing,
    hasn’t accomplished the identical amount of success.

    Cie Games is the firm that will endeavors to switch of which
    with the help of a few flame within the songs making use of
    their fresh online game – Race Challengers. According to these individuals their greatest problem is
    always to demonstrate in which velocity concerns in excess of command as well as along the way to be
    able to grow outside of a finite specialized niche target audience.
    Is going to do these people received. Adrenalin is actually moving,
    engines roar restlessly, waiting for that particular determining
    instant. An instant explained by way of easy bell that lets out large octane critters with their
    leashes.

    Racing Competition Hack into bring your speed for you to any individual ready to verify their
    own resolution resistant to the grizzled gladiators involving backstreet rushing.
    Think you are able to take the warmth? There is certainly just
    a great way to are aware that. You should choice your life on it
    as well as change similar to your health count on that.
    At least in case you are interested in winning backgrounds.

    Steerage seriously isn’t your current issue! That game is just not
    in relation to manage; this can be a online game concerning call in addition to
    reply. If you need to are the full in the avenue all
    you can ever before need to have could be the expertise to help
    shift in the appropriate time and to learn how to rev a engine,
    prior to the race.

    If that’s not way too hard to grasp, you will find this kind
    of video game to become rather fascinating. Many it will
    take is to mass media + a similar moment if the RPM light-weight should go natural.
    Rather straightforward isn’t. Effectively, that’s should you be not necessarily colorblind.

    With all the Auto racing Opponents Be unfaithful, You are
    able to opt to sporting one particular gamer backgrounds or wage against
    arbitrarily decided on strangers on the net. Nevertheless, your key with the
    online game is at editing of vehicle’s powerplant.
    A lot more backrounds anyone win the harder electronic income you can win. A lot more money the higher quality improve you may make on your own auto.
    The higher quality the automobile a lot more events you can get.
    Easy seeing that that! Right now, will you nonetheless think
    you might have what can be done to become crowned full in the road?

  90. biolyn says:

    Hello there! Do you know if they make any plugins to protect against hackers?
    I’m kinda pafanoid about losing everything I’ve worked hard on. Any tips?

  91. Rahul says:

    I used same UI code and same js files. but it give error message “Sorry Rahul it seems that my mail server is not responding… Could you please email me directly to”

  92. Rahul says:

    I am using this code in my html website. I used same UI code and same js files. but it give error message “Sorry Rahul it seems that my mail server is not responding… Could you please email me directly to”
    How to fix it?

  93. Rahul says:

    Hi, Thanks for the tutorial. Great work!

    Im running it from a web server (@godaddy) but I don’t get the message “Your message has been sent”.

    What could be the problem?

    My php skills are very very basic.

    Thanks

  94. Linnea says:

    As Gou said at the National Utility Contractors can do by themselves
    provide rather than do this? In addition, the damage
    caused by a certified and guaranteed work provided by
    Youtube to help you track, the more confident you’ll be living there during construction. Ace Roofing has served on the blueprint, the very best equipment to the project.
    They tell us what independent contractors.

  95. johanvl says:

    When I ran the whole thing by itself, it worked like a charm. But now I want to integrate this in another existing form, it does NOT work. It looks like it’s refreshing to itself with the variables loaded (like I’m doing a GET), but that’s it. No email, no nothing.. What am I missing?

  96. Article writing is also a fun, if you be familiar with after that you can write if not it is difficult to write.

  97. expungement says:

    Very good article. I definitely love this site.

    Keep it up!

  98. Pingback: Business Casual - Casual Corporate Bootstrap Template « TemplateScream

  99. Keust says:

    Hi Anatoly,

    Really nice script! The only thing i am trying to find out is how to push an telephone number trough the digital line….

    In HTML i added:

    In JS I added:
    var telnr = $(“input#telnr-contactformulier”).val();

    But i really dont know any PHP. So how can i load extra lines of information in to the e-mail?
    Do i refer to the code in JS (‘ telnr’) ?

    What does the \n means or what does it do?
    $email_subject = …..
    “Email: $email_address\n Message \n $message”;

    Thanks in advanced for you’re reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s