Contact Form HTML Tutorial: How To Create Simple Contact Form


very bad costumer service – This company has major flaws in their billing system. In my account, I am registered as Manual and they kept insisting that i signed up for Automatic. To add to this, there is a fee of almost $400.00 to renew the account but I was never informed. I already pay the yearly fee of about $20.00, and when I wanted someone to explain the difference no one provided an answer. Please, do not fall in this trap, these people are not helpful. I do not recommend this membership to anyone. Morna, Atlanta, theableadmin.com


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.

Here is the original article with download files, links and live demo – http://www.1stwebdesigner.com/contact-form-html-php/

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

To make form functional you will need to add PHP to it, here is tutorial how to do it – http://www.1stwebdesigner.com/custom-…

—–
If you are enjoying these video series and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site – 100% Responsive & Flat – http://rockingcode.com/

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!

What you are waiting for? Take your skills to the next level right now with http://rockingcode.com/

1stWebDesigner

33 Comments
  • Roy GE
    Posted at 02:02h, 28 May

    Thank you for this simple and nice useful tutorial 🙂

  • MOTIVECODEX
    Posted at 19:24h, 13 June

    Thanks, great video!

  • dyunior
    Posted at 13:58h, 29 June

    Hello just wanna share if you want your form to work, a PHP tutorial. No need to create the HTML markup just proceed to the PHP part. it work to me. ( watch?v=cLYUhH_T3S0 )

  • jer K
    Posted at 10:46h, 17 July

    Thank u 🙂

  • AirBabe
    Posted at 00:00h, 20 August

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

  • Goran Carević
    Posted at 14:38h, 11 September

    what program you use in this video

  • Igor Rogov
    Posted at 16:16h, 12 September

    Thank you! Very good tut!

  • Krisler12
    Posted at 12:10h, 24 November

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

  • Aviation NZ
    Posted at 13:38h, 26 November

    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.

  • Gulam Mohiuddin
    Posted at 09:20h, 29 November

    Nice Tutorial it really helped me alot…

  • Kyle Michaels
    Posted at 17:54h, 15 April

    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

  • MOHSINWORLD
    Posted at 06:36h, 27 June

    Share source files please

  • MOHSINWORLD
    Posted at 07:18h, 27 June

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

  • Jose Echevarria
    Posted at 00:47h, 05 July

    nice but how make it work?

  • Jam
    Posted at 19:08h, 08 July

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

  • SimonBaku
    Posted at 22:55h, 31 July

    How is called your editor for codes?

  • saanj177
    Posted at 19:12h, 02 August

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

  • Samuel Kiseve
    Posted at 11:37h, 25 September

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

  • Vlad Drule
    Posted at 10:45h, 07 February

    E plin netul de romani :)) Bravo Cristi !

  • jackendy cherenfant
    Posted at 06:54h, 21 February

    The Hover and focus state does not work for me, why?
    Thank  you!

  • Hifza
    Posted at 11:36h, 02 September

    how to link that with database??

  • Emad Bakeer
    Posted at 04:36h, 26 November

    thx u sir

  • yu huang
    Posted at 09:17h, 29 November

    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 !

  • shirish nagansurkar
    Posted at 05:38h, 08 March

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

  • Doge
    Posted at 07:53h, 08 March

    does this actually send to your E-mail

  • gabe nye
    Posted at 22:41h, 31 July

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

  • hardic100
    Posted at 19:59h, 03 September

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

  • Dipesh Wagle
    Posted at 09:59h, 07 February

    I loved the video …
    But!!!!!
    how to click on the send button or link it

  • Rajan Shah
    Posted at 09:19h, 07 October

    Thank you very much Christian !!

  • Nziggy Patrice
    Posted at 12:43h, 13 October

    You made my day man, thank you

  • Nooby_X Gamer
    Posted at 16:00h, 10 November

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

  • Bitrix24 Free CRM, Project Mgmt and Collaboration
    Posted at 09:55h, 26 March

    Hi Christian! Would you mind covering Bitrix24 as well? We are 100% free web form maker that comes with a free CRM as well. So all data entered in the form automatically ends up in the CRM and you can use our free email marketing (up to 5000 emails/mo) to reach those people. We support all form types – contact forms, squeeze pages, quote request, order forms, registration forms, etc. Pardon me for the shameless plug, but it looked like it would be appropriate here.

  • Wally De La Rosa Gomez
    Posted at 00:34h, 17 October

    This video was of great help to me