WriteToMe: a simple email form with PHP and jQuery



Hello folks and welcome to another amazing tutorial about the wonderful and enchanted world of the Internet…too much sugar for me today.

Anyway, in this tutorial I’m gonna show you how to create a custom contact form for your website, without using any plugin or external repository. Before starting tho, I think I should answer the question that probably came on your mind…


“Why should I follow this tutorial instead of using some awesome plugin?”

The answer is easy, because you can!

Using pre-made code means that you don’t have the full control of what’s going on under the hood, and the more plugins or external resources you use, the more heavy and hard to maintain your website becomes.

Being able to know what’s going on in your source code can bring a lot of benefits to your website in terms of loading speed and security; but unfortunately not all of us have the knowledge nor the time to build everything by ourselves or study the source code of every plugin we install, so, what could be the solution, or at least a good and not so complicated practice to adopt? For me is to spend some time to create my own code in order to manage the simplest aspects of my website, for example, as in this case, a contact form.


The result

Before starting let’s take a look at the final product, and if you don’t have time to follow this Tutorial, you can also find the link to download the full package from Github.


Demo or Download


As you can see we have a pretty standard form with a bunch of fields. The system detects which one is required and avoid to send the email if one of the fields is empty. The entire process is managed via jQuery post(), an asynchronous method to dialog with a PHP file in our server without reloading the page.

All the animations are meant to entertain a little bit our users, trying to give them a process as less painful as possible (let’s be honest, filling forms is sooo boring)!



The basic structure of our form, including the initial and final state of our sending process.

Due to the fact that we don’t want to reload the page or change page after the email has been sent, I like to build the HTML structure with all the elements that I’m gonna use during the process. Of course you can always manipulate the DOM with javascript, jQuery or whichever method you like to use, but in cases like this one, where we handle pre-made statuses and a really limited amount of answers, having everything ready to go in your page makes things easier to handle.

Let’s take a look at the code to understand it better:

  • div.loading

This div is hidden and contains the loading animation that I’m gonna use during the email sending process. It’s simply a div in an absolute position that, after it appears, it prevents users to edit the form or click multiple times on the sending button while the PHP code is processing the request.

  • div.mail-front / div.mail-back

Because I decided to use a flip card animation for my email form, I had to create the front and back div, then simply style them with CSS.

  • input type and required attribute

It’s always a good behaviour to specify which input type we’re handling in our forms. A lot of browsers today support the HTML5 input formats and they can handle for us a first step of validation and, in case of mobile devices, request the right keyboard to the operating system. The required attribute also prevents the submission of the form in case one of those fields is empty.



Nothing complicated here. The CSS is pretty linear and simple to understand if you have a basic knowledge of the styling process. Anyway, just as a little advice, I suggest you to be organize and meticulous while you apply your style. Always try to separate the styles in groups based on their use, include cross-browsing declarations and keep it as clean as possible. Working with huge files will be easier and less confusing for other people.



The sending process and the asynchronous call to PHP is handled by jQuery thru the $.post() function. The code grabs all the filled inputs and send them to the sendmail.php file.

Before sending the email we can easily check if the insert address is valid. To do so we can use a RegExp function to check the format of the email address with a custom function I called isValidEmailAddress().



The final part of our Tutorial is the PHP file. This file receives the variables from the jQuery call and builds the HTML mail with all the necessary informations.

As you can see a further validations is used here, in case something goes wrong the system will return different answers for the jQuery to handle.

Pay attention to the $_POST[“foo”] variable, an empty hidden input inside the HTML form. This variable is necessary for a further validation step. Basically Spam Bots or crawlers in search for an open email form to send some useless email, usually fill every input fields they find inside the page. The foo input is empty and hidden so a regular user shouldn’t be able to set a value, but not the Spam Bots, so if the system detects that the variable is not empty, it means the form has been sent by a Bot and not a user.

With this check we can easily skip the entire sending process and just return a fake positive sending message and kick the Bot out of our website. We don’t like bullies!


This is a really simple email form with limited options and probably is not really suitable for production sites, but hopefully will help beginners or students looking for a starting code to run some tests or have fun. Feel free to use this code wherever you need, fork it on GitHub or write a comment if you find a bug or you want to suggest some improvements.


Demo or Download


..and after all, always remember that Sharing is Caring,