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

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!

Christian Vasile

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.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Bunthoeun says

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

  2. says

    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.

  3. says

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

  4. Gayatri Mehta says

    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 ?

  5. Leigh Jeffery says

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

  6. Akhil Gupta says

    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?

  7. Jeremy says

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

  8. Guilherme Araújo says

    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!

  9. Ruth says

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