Contact Form HTML Tutorial: How To Create Simple Contact Form

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.

You will learn:
- the basics of CSS3 styling
- how to create an HTML form
- how to create an elegant CSS3 contact form

-----

You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website.

We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well!

[armaan]

I observed that none of the youtube programming related videos press that submit button after making the contact us page

[kylemichz]

Hey Christian, whenever i watch your Tuts, i feel so happy and how great you do share it. Thank you so much and you really Rock. Peace

[shirishnagansurkar]

thanks Chistain u r so good not too fast not too slow it was a happy learning with u thanks a lot.

[Saikace]

Am very appreciative Christian, you've made me a web developer. Thanks.

[vladdrule]

E plin netul de romani :)) Bravo Cristi !

[Happystoreup]

Thank you so much! You make it easy to understand!

[AviationNZ]

Great tuts, Christian. Although I'm already a quite experienced designer, I don't know that much about HTML5/CSS3, so I enjoy your tuts!
I was wondering.. How is this going to work in your RWD theme? In your RWD theme tut you spoke about adding this contactform in it, and so, it'll be RWD too. I can't find the tut you were talking about (where you use this contactform as RWD in your RWD theme).
Maybe you could post a link or make one, if you haven't made that tut yet.

[AREDTWO]

Please make another video with the php code to make the form work. Thank you.

[gabenye]

How do i make this send emails to an email i want

[DefaultName-bink]

Nice CSS for html contact form, Need to learn php part,

[namelessnewoob]

good video thank you, greetings from Brazil !!!

[lightmanfilms]

Sorry, just a question. To be able for a customer to send feedback or just the contact form does it needs any additional coding for the send button? I mean, what really happens when i upload my website on the hosting and a random customer presses the send button? How does it work? Thanks

[Krisler]

1stwebdesigner If you use html5 the website will automatically auto-adjust for PC and mobile devices and tablets ?

[sravankumar]

Hey @1stwebdesigner your videos are very informative, thanks for the post . I was wondering if you could make a tutorial on how to make an awesome login page using php css and html.( it would be awesome if u could design whole website ).
thanks!!

[mohsin]

Please bring us another tutorial about how to add this form with PHP script and provide us backup file. Thank you.

[GulamMohiuddinMD]

Nice Tutorial it really helped me alot...

[saanj]

Hi, Can you please tell which IDE you are using and is it available for windows PCs too?.. I really liked way your IDE showing the interface for box-shadow.. 

[yuhuang]

I suddenly recognize that I do not know why, that is just so funny. Anyway, it is a very good tutorial and thank you very much !

[hardic]

Can you name the software that you are using and is it available for Windows too ?

[Jam-ktsw]

I want to thank you, but my .submit input code/tag doesn't work the submit became red, wondering how i could fix this