HTML5 Contact Form Using CSS & PHP

• by Mark-Anthony
• in Tutorials
• posted June 7, 2014

Some of my students were interested in learning how to create a simple contact form using HTML5, CSS and PHP to use within their current web composite projects. Although, this is not a requirement for the project and they have not covered forms and PHP in our program yet, I decided to create a simple “template” as an option for them to include in their projects.

In this post I will be walking you through how to use or repurpose the contact form for your own project. After explaining the HTML markup and CSS, I will be explaining how the PHP file works. It is important to know that the final form will only work if you have access to a web server (hosting). PHP will not function locally.

After customizing the form, you can simply copy the markup for the form and paste it into your own contact.html file for your project. Remember to relink the CSS style sheet and form.php file in your own HTML document.

*Note: This tutorial was intended for the student’s in our Graphic Design for Print & Web program. The instructions below are a simplified overview of an in-class lesson.

Download Form

Demo

 

The Markup:

Open the contact.html document in Dreamweaver. I am using Coda 2, so my screenshots may look different from your setup. Copy everything within the <form> </form> tags and paste them into your own contact.html document.

<form action=”form.php” method=”post” enctype=”multipart/form-data”>

<h1 class=”title”>Contact</h1>

<label></label>
<input name=”name” required=”required” placeholder=”Your Name”>

<label></label>
<input name=”email” type=”email” required=”required” placeholder=”Your Email”>

<label></label>
<textarea name=”message” cols=”20″ rows=”5″ required=”required” placeholder=”Message”></textarea>

<input id=”cancel” name=”cancel” value=”Cancel” />

<input id=”submit” name=”submit” type=”submit” value=”Submit”>

</form>

The demo form that we have suggests two ways of adding titles to the form fields. The example above is using the “placeholder” attribute instead of placing the title of the form fields between the <label> </label> tags. The reason I did this is because the placeholder attribute within HTML5 allows us to assign a value to a text field, which gives the user a clear indication of what information needs to be entered in the text field. When the text field is selected by the user, the placeholder text disappears and, if nothing is entered by the user, the placeholder text will reappear when de-selected. Personally, I prefer using the placeholder attribute over the <label> tag because it makes for a cleaner and simpler looking form. This is just a matter of preference so I have included the <label> tag in the markup, just in case you want to use it and place your text field titles outside of the text field. If you would rather have your text field titles beside or above the text fields, then place your titles between the <label></label> tags and remove the placeholder attribute.

The other option that you may change in the markup is the Cancel and Submit button values. You may change these titles by changing the values for Cancel and Submit. For example, you can change these to value=”Reset” or value=”Send” if you like. You may also get rid of the Cancel input all-together if you would simply rather have the Submit option on its own.

The CSS:

Next, we will take a look at the CSS file. Open this document in Dreamweaver. It can be found within the css folder. I have placed comments for styling each element within the form. This portion is pretty straight-forward and you can change the styling for the H1 tags, inputs, textarea and submit buttons and hover states. If you would rather use an image for your submit buttons, I have included the styling (currently commented out) in the document. Make sure to create your submit images at  the exact width and height as indicated in your styling. This will ensure that your images will appear when previewing your form in the browser.

The PHP:

Now that we have our HTML markup and CSS ready to go, the last thing we need to do is set up the PHP file to send the inputted information to our email. Open the form.php file in Dreamweaver. The main thing we need to change is the $to variable. replace ‘youremail@gmail.com’ with your own email address. If you were to save the file and upload your web files to a server, the form would now send the information to your email. However, when you receive the email you will see that the subject of the email would say ‘Email Inquiry’ and the email would indicate that is from ‘YourWebsite.com’. To change this information, you can change the $from and $subject variables to what ever you wish.

*The first time you submit the form, the email may end up in your junk mail or spam box.

Once the user hits the submit button in the form, and everything goes well, they will get a message that says “Thank you for your email!”. If there is an error processing the form, the user will see an error message that says “Oops! An error occurred. Try sending your message again”. You can also change these messages if you wish within the if statement’s <p> tags.

Save. Upload. Test:

The final step is to save all of your files and correctly link them within your HTML so that the form works correctly. Save your HTML markup in your own contact.html document. Copy and paste the CSS into your own CSS stylesheet and update the styling of your form elements. Save your form.php file in the root of your website’s folder structure. Ensure that your HTML form markup is correctly linking to the form.php file’s location and your stylesheet is correctly linked as well.

*If you do not have hosting or access to a server, the form will not send the information that is submitted. However, you will at least have a styled HTML5 form that  you can now include within your composite project.