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.
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.
Comments
30 HTML5 CSS3 Contact Form Tutorials for beginners
September 20, 2014 at 8:20 pm[…] HTML5 Contact Form Using CSS & PHP […]
Mark-Anthony
September 20, 2014 at 9:24 pmWow! Thank you for adding my tutorial to your list. 🙂
Juan
October 18, 2014 at 2:56 amHi! I’ve been looking for a simple but effective tutorial and I think yours is perfect! I’m TOO newbie and I downloaded a html5 template with a contact form. I want to adapt it to this and maybe change the way of notifying that the email was sent correctly, but I still have to learn a lot…
I still have one question. A php-form a sponsor of mine is using, sends me an email to my account as if these emails were sent by the clients themselves. I mean, in “from” field I can see the client’s email and by replying the email they receive my answer… It’s just easier to answer these way. Is it anyway possible to implement this here as well?
Thanks again for your tutorial.
Regards,
Juan
Mark-Anthony
October 18, 2014 at 4:34 pmHey Juan,
You can do this by placing the $email variable inside of the $from string, like this —> $from = $email;
Juan
October 18, 2014 at 6:42 pmHi! I already solved it! I found it has to be —> $from = ‘From: ‘ . $email;
Thank you very much!!
Amanda
October 21, 2014 at 10:58 amVery nice tutorial, thanks!
One question. When I click on the “submit” button it takes me to another page that displays the “Thank you for sending this”-text. Is there any way to make that text appear on the same page as where the contact form is? Maybe under it or similar?
Thank you.
Mark-Anthony
October 21, 2014 at 8:05 pmHi Amanda,
You can do this by replacing the if/else statement with:
if (mail ($to, $subject, $body, $from)) {
echo ‘
Thank you for your email!
‘;
} else {
echo ‘
Oops! An error occurred. Try sending your message again.
‘;
}
Amanda
October 22, 2014 at 7:29 amThanks for your quick answer.
Sorry, maybe I’m missing something, I still can’t get this to work.
In the new code you sent me you’ve used ´ instead of ‘. Using ´ gives me an error, so I’ve replaced them with the ‘. I can see that you have removed the tags, other than that it’s the same code as the original, is it not? It is still sending me to another page when I press submit.
Thanks!
Mark-Anthony
October 29, 2014 at 6:03 pmI used the same code; I just replaced the string to get the sent message to display on the page instead of loading a new page.
Nemanja
November 6, 2014 at 10:32 amCan you explain how to make the message appear on the same page?
Mark-Anthony
November 18, 2014 at 8:42 pmHi Nemanja,
Replace the if statement’s redirect for the contact.html after submit to:
if (mail ($to, $subject, $body, $from)) {
echo ‘
Thank you for your email!
‘;
}
Steve
November 6, 2014 at 2:38 pmHi Mark,
Very nice form. If you don’t mind, I have a question, as I am a newbie to PHP. How would I go about adding to the PHP file, a redirect to a specific page after a person clicks the submit button?
Thank you.
Mark-Anthony
November 18, 2014 at 8:43 pmHi Steve,
the current source files have a redirect in the form.php file. change the contact.html page to the page you wish to redirect to after the form is submitted. You can open the php file in any html editor you have.
Vedant
November 30, 2014 at 8:56 pmHi mark, i was wondering why whenever i hit submit the server just downloads the form.php file. Im really new at this, and i need alittle bit of help.
Thank you.
Mark-Anthony
December 2, 2014 at 9:12 pmHey,
If your website is forcing your browser to download PHP files, Apache doesn’t recognise PHP as a valid file type. You might need to reconfigure httpd.conf so that it acknowledges PHP and its installation directory. Your files are being hosted on a server, correct? You won’t be able to test the form locally.
Fran
December 22, 2014 at 6:53 amHi Mark,
As a first-timer to PHP I found this very useful. I just had a question though.. Whenever I submitted my form, the webpage would just go blank and not display one of the two messages, and the email did not come through to my inbox. Any ideas? Thanks.
Mark-Anthony
December 26, 2014 at 11:29 amHi Fran,
The PHP form will not work unless the files are hosted on your web server. If you are testing your form locally on your machine, the form will not send.
Doyz
February 7, 2015 at 7:16 amperfect. Thank you so much, you save my time 🙂
Mark-Anthony
February 10, 2015 at 10:11 pmYou’re welcome! 😀
Nikki
February 7, 2015 at 3:00 pmMark:
I appear to be having the same problem Fran experienced, and I can gladly tell you that I uploaded the files to the server where I would like it all to function.
But like Fran said, form.php is blank, and zero e-mails are received in my inbox.
Do you happen to have any suggestions? (Yes, I am on a PHP server…)
Many thanks for your support!
__
Nikki
Mark-Anthony
February 10, 2015 at 10:12 pmcan you send me a link to where your form is hosted?
Jan
February 27, 2015 at 9:11 amHello Mark! Thank you for a great tutorial. I’m experiencing the same problem as Nikki and Fran. I’m using your code on my demo website (www.tvojfarmar.sk) in Kontakt section. The result after submiting is just blank page. Any ideas? Thank you!
Mark-Anthony
February 27, 2015 at 11:23 amHi Jan,
I’m working on some new contact forms that should be free of any issues. I’m also going to create variations of the forms, ie: uploader, phone number, success message on same page and new page.
For a quick fix, replace the code in the form.php with this code:
Oops! An error occurred. Try sending your message again.
‘;
}
}
?>
To make the form return to the home page or to your contact page, change the redirect URL, which is in line 16 of the code: header (‘Location: contact.html‘);
If this is not a rush issue, I should have all the forms completed by next week and ready for download.
Yube
February 18, 2015 at 12:14 pmMuchas gracias!!! lo necesitaba urgentemente!!!!
David
February 25, 2015 at 10:28 amHi, I would like to add an extra box for a telephone number but I’m struggling with the php side. I’m also having the same trouble as Amanda and Nemanja where the thank you text redirects to another page, in your examples above it seems all you’ve done is removed the p tags and shortened the text.
Mark-Anthony
February 26, 2015 at 12:40 pmHi David, to stop the redirect to a new page, change the URL in the form.php file to the same URL as your contact form.
I’m currently working on upgrading these forms so you should be able to download and use two versions of the form. One that redirects to a new page and a version that has a “successfully sent!” message in a pop-up on the same page.
To add a Telephone field, add this to your HTML form:
And add this to line 4 of your form.php:
$tel = $_POST[‘tel’];
And replace this on line 10 of the form.php:
$body = “From: $name\n E-Mail: $email\n Phone: $tel\n Message:\n $message”;
Robin
February 27, 2015 at 8:43 amHi Mark !
The tutorial looks really great, but I just wanted to tell you that in my case the PHP pictures wasn’t displayed, and I had to go through the source code of the webpage to find the exact location of the JPG file and file have access to weird.
This may not be a problem from your website, using Google Chrome from China has led to some unexpected Internet browsing issues that I never had met before…
Congrats on the website !
Mark-Anthony
February 27, 2015 at 11:18 amThank you Robin! I think this is a location issue.
Ferg
March 1, 2015 at 10:00 amHi Mark,
Thanks for a great tutorial – it’s been a big help to me:-)..
One issue I have encountered is that the field validation isn’t displaying as expected on Firefox (browser).
Any suggestions on how to fix this?
Many thanks,
Ferg
Mark-Anthony
March 1, 2015 at 6:26 pmThanks for the feedback, Ferg!
What version of FF are you using? Is it updated to the latest version?
Ferg
March 2, 2015 at 4:30 pmGood shout, Mark – my version was pretty old, I’ve updated it and it works perfectly!
Thanks for your help!
Mark-Anthony
March 5, 2015 at 6:02 pmYou’re welcome Ferg!
Kevin
March 8, 2015 at 3:18 amHi Mark
The php doesn’t works on Internet Explorer, it just gives a blank page like Fran, Nikki and Jan mentioned above, and no email coming thru the server to my email address.
but when I tried on Chrome, it displays the echo message on Chrome, and the email coming thru my email address, so it works fine on Chrome.
Could you let me know what’s the problem please?
Thanks
Kevin
Mark-Anthony
April 20, 2015 at 8:26 pmHi Kevin,
Not sure what the problem is. I’ve tested it in IE and it works fine. However, I’m working on updating the contact form tutorial. Sorry for the delay.
Ben
March 12, 2015 at 9:54 pmi use a template to designed http://bravefootingslogistics.com/ and it came with a form all in a single page.
I didnt see any form.php file in the folder of this template, please how can i recieve the form’s email ?
Mark-Anthony
April 20, 2015 at 8:27 pmCreate a new page and link it to the contact form.php
Fred
March 23, 2015 at 2:03 pmHey..
Can you upload this as a code?
From a screenshot you can´t copy anything
thxs
Mark-Anthony
April 20, 2015 at 8:24 pmThe code is available for download. You can copy it from the file directly.
Lizette
April 10, 2015 at 10:18 amNever mind! I already fixed it! I changed a part of the code and didn’t change the other half!
Mark-Anthony
April 20, 2015 at 8:23 pmSorry for the late reply. I’m glad you fixed the issue and enjoyed the tutorial.
Naseer
May 18, 2015 at 6:27 pmWorks like a charm.. Thank you very much…
Jose Marzan
May 29, 2015 at 5:20 amHi Mark-Anthony, thank you very much for this tutorial. i am a beginner web developer and has a lot of experience in desktop programming. i was looking for a tutorial til i found this. Cheers!
daniel
July 7, 2015 at 2:25 pmHello. Great form. I was just wondering if there is a way you can show us how to implement a working anti spam field. Thank you.
Mark-Anthony
July 14, 2015 at 8:00 amI can certainly do that in my next version that I’m working on. However,
Be patient with me. I’m occupied with client work at the moment but I’ll do my best to get something up soon. 🙂
xaxe
July 8, 2015 at 4:44 amFirst give u the thanks Mark to this good tutorial. However i would like to know something else, is visible our e-mail inside of the file php for the “robots”? can anyone else see that e-mail if they see the code? The point is that i like a lot your example but iwould like to do it more “secure”, with some capchta or whatever else.
Mark-Anthony
July 14, 2015 at 7:57 amYou’re email cannot be seen by robots within the php. 😉 it’s safe.
Michael M
July 18, 2015 at 2:30 amThank you so much for your tutorial. I have learned a lot. However, how do I redirect to the index.html page after the form has been submitted? Thanks!
Mark-Anthony
August 26, 2015 at 9:29 amHi Michael, Sorry for such a late reply. I’ve been really busy with work lately. Try adding a location like this at the end (I’ve made it bold):
header (‘Location: index.html’);
} else {
echo ‘
Oops! An error occurred. Try sending your message again.
‘;
}
}
?>
Keith
September 16, 2015 at 2:03 pmYour work surely is appreciated! Your new Form-to-Email version is anxiously anticipated – thank you!
Mark-Anthony
September 25, 2015 at 9:36 amHi Keith, I’ve completed the forms but I haven’t had time to write out the tutorial. I began taking my Masters in Education earlier this year so my tutorials have slowed down lately. Sorry for the delay. I’ll try my best to get them done soon.
jeremiah
October 21, 2015 at 6:03 ammark
this contact form is a huge blessing to me. i will be using this in the contact section of my site. the one i was originally using was giving me a headache. im going to trashing that one and using this one! thank you so much
Mark-Anthony
October 23, 2015 at 9:57 amYou’re welcome! Glad it helped you out. 🙂
denise
December 9, 2015 at 5:47 pmI was looking for something smart and simple and now I’ve found it!
One question though: the Cancel and Submit buttons – although they are both given the same height and width, when you look at them on screen the Cancel button is slightly wider than the Submit button I’m wondering if there is any way of fixing this? My pal, who I’m researching this for, is very pernickity and he’s bound to ask!!
Mark-Anthony
December 9, 2015 at 6:12 pmThere may be a border still on the cancel button. If so, add border: none; to the cancel button styling. The other solution may be to increase or decrease the margin or padding spacing by 1px. I’m also picking and not sure why I didn’t notice that. 😉
Sarah
January 22, 2016 at 6:38 pmThanks for this tutorial! It has worked well except, I’m not receiving the emails.. I noticed someone else had mentioned that too. But I don’t receive any of the emails I’ve tested a few times. As well as I don’t really understand how to echo “thank you for your email” on the current page that the contact form is on. Could you maybe help me
thank you!
Mark-Anthony
February 6, 2016 at 7:34 pmHi Sarah,
Have you looked in your junkmail? Maybe the emails have been skipped your inbox. Can I see what you’ve placed in your form.php file? Send me an email please. 🙂
M.
Hugo
April 24, 2016 at 3:44 amHiya Mark,
I’ve got the same problem as Sarah above me. Everything works fine, exepct receiving the emails, neither in my junkbox.
<?php
if ($_POST['submit']} {
if (mail ($to, $subject, $body, $from)) {
echo 'Bedankt voor uw bericht $naam, wij proberen zo snel mogelijk te reageren.’;
} else {
echo ‘Oeps! Er ging iets fout, probeer het bericht opnieuw te versturen.’
}
}
?>
Verzenden
Mark-Anthony
April 27, 2016 at 9:35 amHave you added more fields to the form? I’d need to see if you’ve updated or changed in the form elements so that I can help you further. By default, everything should be working if you simply enter your email in the send variable.
Anthony
February 24, 2016 at 1:59 pmI learnt a lot from your tutorial thank you so much
After a bit more learning I was able get the contact form to work as expected I however have an issue when sending an email from the form
When i view the sent email the reply address has the added ” @web2049c1.megawebservers.com” at the end of the email
example domain.com@web2049c1.megawebservers.com I changed the email address but with the same result
So it’s not any particular email address regardless of what email i use the added @web2049c1.megawebservers.com shows up
Was really hoping you or any of your members could shed some light on this issue
I’ve searched my entire web for any leads to the above mentioned link but to no avail
any help would be greatly appreciated
regards
Mark-Anthony
April 27, 2016 at 9:38 amThat’s probably the name of your hosting provider, which emails are being routed from. You could add a reply to $email which would send a reply to the senders email address.
Steve
August 7, 2016 at 5:37 am****UPDATE: Nevermind! I got it working! Just found a couple of syntax errors involving ” marks in the code.
Thank you so much for this code. IT WORKS!
Neelam
August 31, 2016 at 4:13 amHi Mark! I just discovered that the contact form works if I redirect it to a gmail Id. But it does not work if I redirect it to info@www.mywebsite.co.uk Help!
Mark-Anthony
September 25, 2016 at 11:15 amtake out the ‘www’ from your email. should be info@yoursite.co.uk
Neelam
September 26, 2016 at 5:41 amThank you so much 🙂
Jan te Pas
February 9, 2017 at 1:12 pmHi Mark Anthony, Great tutorial. But i added a checkbox, all went wel, but the text is not aligned to the checkbox. It comes in two lines. I want [ ] Send me an CC. Now i get:
[ ]
Send me an CC.
Give me a hint, please
Mark-Anthony
April 28, 2017 at 2:16 pmTry floating the checkbox to the left of the text field or display: inline-block.
Cassandra
April 28, 2017 at 1:09 pmHi. I tried utilizing your tutorial and when I do a test email, I keep getting the error message. I am not sure why this would be happening. I do have it uploaded to the server so it is online and running. I also tried it on my phone and still no avail. Any suggestions?
Mark-Anthony
April 28, 2017 at 2:15 pmHi Cassandra, sorry for the late reply. Have you changed the submit value by any chance? Look over the code in the tutorial and verify that it matches your code. As soon as I wrap up my studies, I will be updating a lot of my tutorials and uploading more content.
M.
ashok shedge
August 12, 2017 at 5:47 amHi i added code as per you give and change email id and uploaded on server but when click on submit button error was occurred (SMTP server response: 553 sorry, that domain isn’t allowed to be relayed thru this MTA (#5.7.1) ) i don`t know what is the problem please help me
Mark-Anthony
August 24, 2017 at 9:06 pmwhat is your web URL?
Samuel
October 11, 2017 at 1:58 amDisregard my last message, I figured it out. Great contact form sir.
Mark-Anthony
October 12, 2017 at 7:24 pmI took a look at your form, it looks great! 🙂
Samuel
October 14, 2017 at 2:27 pmAppreciate that.
Cherwally
November 19, 2017 at 9:00 pmYour Contact Form works like a dream;)
Thank you so much for providing us the code and all the info about how to install.
It was up and working for test in a matter of 5 minutes.
All we have to do is to upload the zip content to our public_html folder,
edit the PHP file and change the destination email and as well the sender website.
I tested and works flawless;)
Thanks again, much appreciated.
Mark-Anthony
November 21, 2017 at 2:25 pmWow! I’m glad this helped you out and you found it easy to install and modify. 🙂
M.
Cyril Dinard
December 29, 2018 at 7:20 amHi,
I try to test the form but it does not work with me!
Test link: https://www.cyril-d.fr/form/contact.html
Any idea?
Thanks in advance.
Mark-Anthony
January 4, 2019 at 10:37 amMake sure the send button value property = submit and yoru form/php file is in the root folder of your site files.