HTML5 Contact Form Using CSS & PHP • by • in • 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. A contact form has several components: the actual HTML code you place in your HTML file, the CSS styles usually placed in a CSS file and some PHP or AJAX code, used for validating the input fields and actually sending the information collected by the form. 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. Contact form html5 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 tags and paste them into your own contact.html document. Contact 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 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 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. 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. 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. Form 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 ‘[email protected]’ 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.
0 Комментарии
Оставить ответ. |
АвторНапишите что-нибудь о себе. Не надо ничего особенного, просто общие данные. АрхивыКатегории |