*The first time you submit the form, the email may end up in your junk mail or spam box.
To change this information, you can change the $from and $subject variables to what ever you wish. 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 ‘’. 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. The main thing we need to change is the $to variable. 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. This will ensure that your images will appear when previewing your form in the browser.
Make sure to create your submit images at the exact width and height as indicated in your styling. If you would rather use an image for your submit buttons, I have included the styling (currently commented out) in the document. This portion is pretty straight-forward and you can change the styling for the H1 tags, inputs, textarea and submit buttons and hover states. I have placed comments for styling each element within the form. Next, we will take a look at the CSS file. You may also get rid of the Cancel input all-together if you would simply rather have the Submit option on its own. For example, you can change these to value=”Reset” or value=”Send” if you like. You may change these titles by changing the values for Cancel and Submit. The other option that you may change in the markup is the Cancel and Submit button values.
If you would rather have your text field titles beside or above the text fields, then place your titles between the tags and remove the placeholder attribute. Personally, I prefer using the placeholder attribute over the tag because it makes for a cleaner and simpler looking form. This is just a matter of preference so I have included the tag in the markup, just in case you want to use it and place your text field titles outside of 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. 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. The example above is using the “placeholder” attribute instead of placing the title of the form fields between the tags. The demo form that we have suggests two ways of adding titles to the form fields. Copy everything within the tags and paste them into your own contact.html document. I am using Coda 2, so my screenshots may look different from your setup. Open the contact.html document in Dreamweaver. The instructions below are a simplified overview of an in-class lesson. *Note: This tutorial was intended for the student’s in our Graphic Design for Print & Web program. Remember to relink the CSS style sheet and form.php file in your own HTML document. PHP will not function locally.Īfter customizing the form, you can simply copy the markup for the form and paste it into your own contact.html file for your project. It is important to know that the final form will only work if you have access to a web server (hosting). After explaining the HTML markup and CSS, I will be explaining how the PHP file works.
In this post I will be walking you through how to use or repurpose the contact form for your own project. 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. 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.