0

No products in the cart.

HTML5 Contact Form Using CSS & PHP

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:

contact form html5

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 <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:

form-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:

form php

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 ‘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 pm

    Wow! Thank you for adding my tutorial to your list. 🙂

  • Juan

    October 18, 2014 at 2:56 am

    Hi! 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 pm

    Hey 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 pm

    Hi! I already solved it! I found it has to be —> $from = ‘From: ‘ . $email;

    Thank you very much!!

  • Amanda

    October 21, 2014 at 10:58 am

    Very 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 pm

    Hi 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 am

    Thanks 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 pm

    I 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 am

    Can you explain how to make the message appear on the same page?

  • Mark-Anthony

    November 18, 2014 at 8:42 pm

    Hi 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 pm

    Hi 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 pm

    Hi 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 pm

    Hi 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 pm

    Hey,

    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 am

    Hi 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 am

    Hi 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 am

    perfect. Thank you so much, you save my time 🙂

  • Mark-Anthony

    February 10, 2015 at 10:11 pm

    You’re welcome! 😀

  • Nikki

    February 7, 2015 at 3:00 pm

    Mark:

    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 pm

    can you send me a link to where your form is hosted?

  • Jan

    February 27, 2015 at 9:11 am

    Hello 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 am

    Hi 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:

    < ?php if (isset($_POST['submit'])) { $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $from = 'From: mark-anthony.ca contact form tutorial'; $to = $email; $subject = 'HTML5 Contact Form Test'; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; if (mail ($to, $subject, $body, $from)) { header ('Location: contact.html'); } else { echo '

    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 pm

    Muchas gracias!!! lo necesitaba urgentemente!!!!

  • David

    February 25, 2015 at 10:28 am

    Hi, 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 pm

    Hi 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 am

    Hi 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 am

    Thank you Robin! I think this is a location issue.

  • Ferg

    March 1, 2015 at 10:00 am

    Hi 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 pm

    Thanks 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 pm

    Good 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 pm

    You’re welcome Ferg!

  • Kevin

    March 8, 2015 at 3:18 am

    Hi 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 pm

    Hi 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 pm

    i 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 pm

    Create a new page and link it to the contact form.php

  • Fred

    March 23, 2015 at 2:03 pm

    Hey..

    Can you upload this as a code?
    From a screenshot you can´t copy anything

    thxs

  • Mark-Anthony

    April 20, 2015 at 8:24 pm

    The code is available for download. You can copy it from the file directly.

  • Lizette

    April 10, 2015 at 10:18 am

    Never 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 pm

    Sorry for the late reply. I’m glad you fixed the issue and enjoyed the tutorial.

  • Naseer

    May 18, 2015 at 6:27 pm

    Works like a charm.. Thank you very much…

  • Jose Marzan

    May 29, 2015 at 5:20 am

    Hi 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 pm

    Hello. 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 am

    I 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 am

    First 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 am

    You’re email cannot be seen by robots within the php. 😉 it’s safe.

  • Michael M

    July 18, 2015 at 2:30 am

    Thank 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 am

    Hi 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):

    < ?php if (isset($_POST['submit'])) { $location = $_POST['location']; $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $email = $_POST['email']; $phone = $_POST['phone']; $service = $_POST['service']; $message = $_POST['message']; $from = 'From: Contact Form'; $to = 'youremail@gmail.com'; $subject = 'Email Inquiry'; $body = "Location: $location\n From: $firstname $lastname\n E-Mail: $email\n Phone: $phone\n Service: $service\n Message:\n $message"; if (mail ($to, $subject, $body, $from)) { header (‘Location: index.html’);
    } else {
    echo ‘

    Oops! An error occurred. Try sending your message again.

    ‘;
    }
    }

    ?>

  • Keith

    September 16, 2015 at 2:03 pm

    Your work surely is appreciated! Your new Form-to-Email version is anxiously anticipated – thank you!

  • Mark-Anthony

    September 25, 2015 at 9:36 am

    Hi 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 am

    mark
    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 am

    You’re welcome! Glad it helped you out. 🙂

  • denise

    December 9, 2015 at 5:47 pm

    I 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 pm

    There 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 pm

    Thanks 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 pm

    Hi 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 am

    Hiya 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 am

    Have 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 pm

    I 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 am

    That’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.

  • Neelam

    August 31, 2016 at 4:13 am

    Hi 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 am

    take out the ‘www’ from your email. should be info@yoursite.co.uk

  • Neelam

    September 26, 2016 at 5:41 am

    Thank you so much 🙂

  • Jan te Pas

    February 9, 2017 at 1:12 pm

    Hi 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 pm

    Try floating the checkbox to the left of the text field or display: inline-block.

  • Cassandra

    April 28, 2017 at 1:09 pm

    Hi. 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 pm

    Hi 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 am

    Hi 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 pm

    what is your web URL?

  • Samuel

    October 11, 2017 at 1:58 am

    Disregard my last message, I figured it out. Great contact form sir.

  • Mark-Anthony

    October 12, 2017 at 7:24 pm

    I took a look at your form, it looks great! 🙂

  • Samuel

    October 14, 2017 at 2:27 pm

    Appreciate that.

  • Cherwally

    November 19, 2017 at 9:00 pm

    Your 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 pm

    Wow! I’m glad this helped you out and you found it easy to install and modify. 🙂

    M.

Your email address will not be published. Required fields are marked *