#CONTACT FORM HTML CSS PHP FREE DOWNLOAD HOW TO#

*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.

#CONTACT FORM HTML CSS PHP FREE DOWNLOAD HOW TO#

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.

Contact form html css php free download