Create a Contact Form in HTML5 and CSS3 for Dummies – Downloadable

Posted in Coding, HTML & CSS, Tutorials • Posted on 26 Comments

Today I will teach you how to create a simple contact form in HTML5 and CSS3 that you can download for free. Many WordPress plugins come with fully functional contact forms that can be installed and used right away, but we believe in beautiful design and in your right to style it however you choose. Therefore today’s video will focus on how to create, but mainly how to style, your contact form using CSS3.

There is not much HTML5 in this video tutorial, unfortunately, as the contact form is built with code available in previous versions of HTML, but you can use today’s tutorial as a way to reinforce many of the things we learned together in the previous tutorials. So without any further discussion, here it is:

Contact Form in HTML5 and CSS3, what you will learn:

  • the basics of CSS3 styling
  • how to create an HTML form
  • how to create an elegant CSS3 contact form

create-css3-contact-form

By the end of the tutorial you will have something similar to the screenshot above. Feel free to view the demo just after the video tutorial to get a feel of what you will be making in under 25 minutes. It’s a good exercise for both beginners and experts alike!

Challenge For You – Responsive and Validation

Can you make this form Responsive? I will give you a hint, but it will be somewhat irrelevant to a contact form, but surely you are smart enough to work your way through it, yes?

Hint: It’s all about media queries!

Of course it is crucial that you validate the fields so that you will not receive any unnecessary information, or secure that all the information you need from your contact form are all useful. In order to do that, you will need to include HTML5 validation in your code. It is pretty easy to do, all you need is patience and the willingness to test new stuff!

How to Make It Work

Although making it functional will require a little bit of server side programming, I’ll be glad to point you to the right direction!

In order to make this form function for your website, you’ll need to code it with PHP.

How to Make a Contact Form Using PHP

Note: this tutorial is over three years old but it will still work, you will just need to add security features (Google it!).

Good luck!

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

26 Comments Best Comments First
  • peter

    Wednesday, May 8th, 2013 13:24

    10

    A HTML5 form with no HTML5 validation…

    +14
  • Tahir Raza

    Wednesday, May 8th, 2013 18:57

    11

    Good for Beginners..Thanks for sharing!

    +13
  • Charles Mohr

    Thursday, May 9th, 2013 17:35

    15

    Bravo! I am going to incorporate this into my php handler! Very clean!

    +13
  • Akhil Gupta

    Thursday, May 9th, 2013 02:49

    12

    you taught us how easily we can make contact form.. thanks for this tutorial.. :)

    Do you have any tutorial for how we can add payment gateways to our contact form?

    +12
  • Mathew

    Wednesday, May 8th, 2013 10:32

    2

    Can’t download it! :/

    +8
    • Rean John Uehara

      Wednesday, May 8th, 2013 11:33

      5

      Hi Matthew, everything should be working now!

      +7
  • Guilherme Araújo

    Wednesday, May 8th, 2013 11:56

    7

    I’m trying so hard to create a functional contact form unsuccessfully. This tutorial made for you for me is like a gift! Congratulations!

    I just want to ask you guys one question: where do the message go after the user press the ‘send’ button? Will the message go via e-mail or stored on the website database?

    Greetings from Brazil!

    +8
  • Ruth

    Wednesday, May 8th, 2013 10:30

    1

    I can’t download the contact form. It tells me it is an illegal request. Please help. Thanks!

    +7
    • Rean John Uehara

      Wednesday, May 8th, 2013 11:34

      6

      Hi Ruth, done fixing the link. Should work now. Sorry about that!

      +1
  • Bunthoeun

    Tuesday, July 23rd, 2013 11:23

    26

    Thanks from the far distance,

    This is very help full website.

    I want to know how to set the pictures grayscale and then color when hover.

    I hope to see the tutorial next time.

    Thanks…..

    +7
  • Ramandeep Singh

    Thursday, May 9th, 2013 08:47

    13

    Thanks, i was looking for a CSS3 form

    +5
    • Karthikeyan

      Wednesday, July 17th, 2013 09:11

      25

      Yes Ramandeep Singh, There is not validation at all..

      0
  • Armands

    Tuesday, May 14th, 2013 12:13

    19

    Thanks! After this tutorial my contact form looks much better!!! :) You have done a great work!

    +4
  • Greg

    Tuesday, June 18th, 2013 16:18

    23

    Looks nice, but you would have an accessibility issue with the color contrast.

    Also, having the label to the right of the input is non-standard. While a screen reader has no issue, because you used the for tag, a person using a magnifier could possibly have issues with it.

    +4
  • Jeremy

    Wednesday, May 8th, 2013 12:34

    8

    Is there a .js or a call to action so that the form actually gets emailed to the admin?

    +4
  • Leigh Jeffery

    Thursday, May 9th, 2013 12:32

    14

    Thanks so much:) some great little tips and trick in here….text instead of input tag, super!! Nice job:)

    +4
  • Steven Ray Austin

    Wednesday, May 8th, 2013 10:43

    3

    When I try to download this email form, I get an alert ‘Illegal special request’. How do I download this form to use?

    thanks,
    Steve

    0
    • Rean John Uehara

      Wednesday, May 8th, 2013 11:33

      4

      Hi Steven, should be working by now.

      +1
  • Dani

    Wednesday, May 29th, 2013 03:46

    21

    You can control the blue border on safari by setting the outline to none in css. The blue effect will disappear this way.

    0
  • Jothi Basu

    Wednesday, May 15th, 2013 02:38

    20

    Hope it would help me a lot… Anyway, thanks for the tip Vasile :)

    0
  • murat bozok

    Monday, May 13th, 2013 13:18

    18

    Thanks for sharing! ;)

    0
  • Gayatri Mehta

    Saturday, May 11th, 2013 14:30

    17

    Awesome knowledge gain from you previous video…Thank You. However couple of questions after watching this one (contact form)
    – Why would you not use HTML5 form tags like input type=”email”
    – Is this contact form a responsive design ? In your previous tutorial you showed how to create a separate @media style to make the webpage responsive. So what about this page ?

    0
  • Yayan

    Saturday, June 15th, 2013 06:17

    22

    This is useful tutorial, thanks :D

    0
  • Karthikeyan

    Wednesday, July 17th, 2013 09:10

    24

    Hi,

    HTML 5 placeholder is not working in IE 8.. working fine in other browsers

    Thanks

    -1
  • Arunshory

    Saturday, May 11th, 2013 08:13

    16

    Thanks. It is a very useful one and good guide to learn contact form in html5,CSS3.

    -1
  • Bunthoeun

    Tuesday, July 23rd, 2013 11:23

    26

    Thanks from the far distance,

    This is very help full website.

    I want to know how to set the pictures grayscale and then color when hover.

    I hope to see the tutorial next time.

    Thanks…..

    +7
  • Karthikeyan

    Wednesday, July 17th, 2013 09:10

    24

    Hi,

    HTML 5 placeholder is not working in IE 8.. working fine in other browsers

    Thanks

    -1
  • Greg

    Tuesday, June 18th, 2013 16:18

    23

    Looks nice, but you would have an accessibility issue with the color contrast.

    Also, having the label to the right of the input is non-standard. While a screen reader has no issue, because you used the for tag, a person using a magnifier could possibly have issues with it.

    +4
  • Yayan

    Saturday, June 15th, 2013 06:17

    22

    This is useful tutorial, thanks :D

    0
  • Dani

    Wednesday, May 29th, 2013 03:46

    21

    You can control the blue border on safari by setting the outline to none in css. The blue effect will disappear this way.

    0
  • Jothi Basu

    Wednesday, May 15th, 2013 02:38

    20

    Hope it would help me a lot… Anyway, thanks for the tip Vasile :)

    0
  • Armands

    Tuesday, May 14th, 2013 12:13

    19

    Thanks! After this tutorial my contact form looks much better!!! :) You have done a great work!

    +4
  • murat bozok

    Monday, May 13th, 2013 13:18

    18

    Thanks for sharing! ;)

    0
  • Gayatri Mehta

    Saturday, May 11th, 2013 14:30

    17

    Awesome knowledge gain from you previous video…Thank You. However couple of questions after watching this one (contact form)
    – Why would you not use HTML5 form tags like input type=”email”
    – Is this contact form a responsive design ? In your previous tutorial you showed how to create a separate @media style to make the webpage responsive. So what about this page ?

    0
  • Arunshory

    Saturday, May 11th, 2013 08:13

    16

    Thanks. It is a very useful one and good guide to learn contact form in html5,CSS3.

    -1
  • Charles Mohr

    Thursday, May 9th, 2013 17:35

    15

    Bravo! I am going to incorporate this into my php handler! Very clean!

    +13
  • Leigh Jeffery

    Thursday, May 9th, 2013 12:32

    14

    Thanks so much:) some great little tips and trick in here….text instead of input tag, super!! Nice job:)

    +4
  • Ramandeep Singh

    Thursday, May 9th, 2013 08:47

    13

    Thanks, i was looking for a CSS3 form

    +5
    • Karthikeyan

      Wednesday, July 17th, 2013 09:11

      25

      Yes Ramandeep Singh, There is not validation at all..

      0
  • Akhil Gupta

    Thursday, May 9th, 2013 02:49

    12

    you taught us how easily we can make contact form.. thanks for this tutorial.. :)

    Do you have any tutorial for how we can add payment gateways to our contact form?

    +12
  • Tahir Raza

    Wednesday, May 8th, 2013 18:57

    11

    Good for Beginners..Thanks for sharing!

    +13
  • peter

    Wednesday, May 8th, 2013 13:24

    10

    A HTML5 form with no HTML5 validation…

    +14
  • Jeremy

    Wednesday, May 8th, 2013 12:34

    8

    Is there a .js or a call to action so that the form actually gets emailed to the admin?

    +4
  • Guilherme Araújo

    Wednesday, May 8th, 2013 11:56

    7

    I’m trying so hard to create a functional contact form unsuccessfully. This tutorial made for you for me is like a gift! Congratulations!

    I just want to ask you guys one question: where do the message go after the user press the ‘send’ button? Will the message go via e-mail or stored on the website database?

    Greetings from Brazil!

    +8
  • Steven Ray Austin

    Wednesday, May 8th, 2013 10:43

    3

    When I try to download this email form, I get an alert ‘Illegal special request’. How do I download this form to use?

    thanks,
    Steve

    0
    • Rean John Uehara

      Wednesday, May 8th, 2013 11:33

      4

      Hi Steven, should be working by now.

      +1
  • Mathew

    Wednesday, May 8th, 2013 10:32

    2

    Can’t download it! :/

    +8
    • Rean John Uehara

      Wednesday, May 8th, 2013 11:33

      5

      Hi Matthew, everything should be working now!

      +7
  • Ruth

    Wednesday, May 8th, 2013 10:30

    1

    I can’t download the contact form. It tells me it is an illegal request. Please help. Thanks!

    +7
    • Rean John Uehara

      Wednesday, May 8th, 2013 11:34

      6

      Hi Ruth, done fixing the link. Should work now. Sorry about that!

      +1

Comments are closed.

50.19.169.37 - unknown - unknown - US