A complete PHP contact form

Hi everybody !

As you may know, I’m not really a web developer. I sometimes develop a few web applications, but most of the time I use Java frameworks. A few weeks ago, I had to develop some kind of contact form for a website using classical web technologies: PHP, HTML, CSS and JavaScript.

Before coding anything, I had a quick look on the internet in order to find some interesting resources, but sadly I couldn’t find any complete solution. There were HTML+CSS templates, but without the contact management, or PHP source code without any HTML+CSS pretty template, or even some kind of crappy PHP source code without any security concerns.

That’s why I decided to build my own solution, based on a few resources I found. First, I started from Stéphanie Walter‘s wonderful CSS3+HTML5 contact form without any images. I don’t like to use images everywhere on a website, and I like clean and light design, so her solution was exactly the kind of form I was searching for:

If you want to understand how to implement this kind of form, have a look to her great tutorial !

Then, I added a few PHP source code, in order to manage the mails sent from the form, with a few basic security management: escaping special characters, checking for injections in the mail field, and validating that every filed has been properly provided. At this point, I had a completely working solution, but I was not completely confident about the security. I thought about adding some kind of Captcha mechanism on the form, but Captcha are too boring, and clearly ugly.

As I didn’t want to add such a crappy thing on my beautiful form, I searched on the internet about another solution for securing contact forms without using Captcha, and I found this really interesting article from the jQuery documentation !

So I put everything together, and here is the result !

A complete PHP, HTML5, CSS3, jQuery contact form, which allows to send mails with a quite correct level of security. If you have any comments/suggestions, feel free to fork my repository and make a pullrequest, or you can also create an issue with your remarks, or even leave a comment right here :)

I hope it’ll help some of you !

  • Pingback: A complete PHP contact form | Webmaster Gurus

  • Galohernandez

    Hi, thanks for this contact form but maybe because i am newby i am not able to make this work, i am putting this in my host in hostgator but i get no message at all in my email. I fill the field inside php where is says “YOUR MAIL HERE”. My mail is gmail but i get no response, any ideas. Thanks a lot

    • http://www.antoineneveux.fr/ Antoine Neveux

      Hi Galohernandez !Thanks a lot for your feedbacks about this article. I currently use the exact same piece of code in one website, and it works perfectly. Perhaps you could have a look at hostgator’s mail policy. Some hosts don’t allows their users to send mails through the mail() php function.Moreover, it can sometime take quite a long of time to get the mail you sent. On some hosts, the mails can sometime take hours, or days, to reach the inbox.
      I guess the problem comes from the host (hostgator), you can test it on another host, if you have access to one, or contact the support team of hostgator to have more information about this ;)
      Good luck trying to make this work !

    • http://www.antoineneveux.fr/ Antoine Neveux

      Sorry @6081359051228a9e4af362e5fe92147e:disqus , it seems that I did some mistakes during the refactoring process. Everything is now fixed on github:
      https://github.com/aneveux/contact-form/commit/83e33ed3befd480796cb378e01811fc089a53404

      Again, sorry for the mistake :s

  • Peter

    Hi there Antoine,
    I am trying to put this contact form on my site but as Galohernanedez said it just doesn’t work. My host permits mail() so its not a thing. Also i managed to send mail by other php contact forms. As I check the code i dont see anything bad, but also Im a complete noob (hence i woulndnt look for already written code). Anyway I managed to send mail from other forms which i dont like so much.

    Ok so basically what happens: I put in some info in the form and i dont get h2 with paragraphs like “Something went wrong while sending your message…” or anything at all. I also dont get success message. When i click “send” site just reloads and placeholders are back. I think native browser checking works, I get prompts if I write bad email etc.

    So here are my thoughts. Maybe You did put some bad/old files to download? Or I am just makings something really bad? From what I understood the only thing to change is to paste legit email in place of “YOUR-EMAIL-HERE”?

    I hope we could sort it out because this form is sick!

    • http://www.antoineneveux.fr/ Antoine Neveux

      Hi Peter,

      I’m so sorry, thanks to @6c6664375fa8dddd06f8b59f061f9b2c:disqus, I saw that there were 2 mistakes in the source code I added on github. I fixed the bugs following the remarks, and it’s now working properly. The corrections can be found on github (https://github.com/aneveux/contact-form/commit/83e33ed3befd480796cb378e01811fc089a53404) and you can now use directly the source code for your contact form.

      Again, sorry for these mistakes in the source code… I need to be a little bit more attentive while making some refactoring :)

      Following the modifications, you’re right, you just need to modify the “YOUR-EMAIL-HERE” part ;)

  • phini

    Hello there! I’ve noticed two issues with your contact form:
    1) form is not of a class “secure”, which results in not sending ‘ts’ variable -> security protection kicks in(that js security code requires the form to be of that class);
    2) textarea has no ‘name’ attribute
    After fixing these issues, you contact form seems to be working properly now :)

    • http://www.antoineneveux.fr/ Antoine Neveux

      Thanks a lot for your help ! Actually, the version of the form I added on github is a refactored version of the one I use on my website, and it seems that the refactoring was not so good… I fixed the form following your remarks, and it’s now working properly. Again, thanks a lot for your help ;)

  • http://www.facebook.com/carlos.maia.10 Carlos Maia

    I´can get it to work. Everytime i try to send the form it appears the same thing:

    Oops !

    Security protection… Please try again, and submit your form
    quicker ;)

    What is the problem or what should i change or remove to dont get this error

    • http://www.antoineneveux.fr/ Antoine Neveux

      Hi Carlos,
      I’m really sorry about this, I just had a look and finally found what can lead to some errors.
      In fact, when PHP is > 5.1, the mktime() function I was using was returning some warning messages, that were included in the ‘ts’ field, then, the comparison and the hash were wrong.

      Long story short, I just pushed on github a new version of the contact form, using the time() function from php, which is now properly working when PHP is > 5.1.

      Again, sorry for this error, and I hope you’ll enjoy this new version ;)

      Thanks a lot for your feedbacks ;)

  • http://twitter.com/mtungate Mike Tungate

    Works perfectly. Thanks!

  • Marcus Olley

    Hello Mr Antoine Neveux,

    I am a total noobie and I’ve just started working with HTML5 e.t.c. previously designed websites in Flash and this is all new to me. I tried your zip file but couldnt get it to work plus there is no html file and dont understand why the php is inside the html mark up and the form action is refering to ./index.php, I would really like to use it. I have almost finished a HTML5 website template for my own site but cant get the contact / order form correct. I was wondering if you could help if you have the time. I have uploaded my website (if it lets me upload :) ) if you have a chance to look at it I would be very very grateful.

    • http://www.antoineneveux.fr/ Antoine Neveux

      Hi Marcus,

      Actually, this is a quite a classical php project. There’s no html file because the html content is directly in the main php file, but due to this, you need to run it in an Apache server instead of just opening the webpage locally in your browser. If you’re a beginner, you can have a look at EasyPHP software, which is quite easy to use and well documented.

      Regarding the form referring to itself (linked to index.php), it’s just in order to have only one page and avoid using 2 different pages for only a small contact form.

      Hope it’ll help you for your website ;)

  • Nada

    Thanks a lot but I really don’t have much experience in PHP and i wanted to add my email so I can use it in my website but I wasn’t able to do that would you please tell me how to do that ?

    • http://www.antoineneveux.fr/ Antoine Neveux

      Hi there,

      Actually, the only thing you have to do is searching in the file for this: “YOUR-EMAIL-HERE” and then replace it by your actual email. Everything else is managed ;)