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

Facebook
Twitter
Google+
Pinterest
+

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!

Facebook
Twitter
Google+
Pinterest
+

AwesomeWeb is Awesome!

Andreas W.

Submitted 9:02 AM .Oct 16, 2014

Hi Nick. If you have work that needs to be done, send me an email. I am glad to help out. Awesomeweb already helped me to earn an awesome 3,700 dollars since the start.;) ... yeah farewell Elance!

Comments

  1. Bunthoeun

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

    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

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

  6. Akhil Gupta

    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

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

  8. Guilherme Araújo

    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

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