CSS Contact Form
March 11, 2015 | 104 Feedbacks

Contact Form

A simple and easy to customize contact form.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

We have been receiving lots of requests about adding a contact form to our library. Here it is! A minimal and customizable snippet to throw a semantic form into your web projects on the fly.

There are some optional features (i.e. floating labels) that can be easily removed in case you want the form to be simpler. We included all common form elements like radio buttons, checkboxes, select, error messages etc.

All icons are from our Nucleo project.

Let’s dive into the code!

Creating the structure

Having the HTML structure of a standard form in your pocket is already a way to save time, isn’t it? The <form> element contains 2 <fieldset> elements, that split the form in two main blocks. Each form element (that usually contains a <label> + <input>) is wrapped into a simple <div>. This allows us to easily control spacing by setting margins just once.

Here is the html structure. You may notice some specific classes, we’ll discuss about that in the CSS section.

Adding style

The CSS is divided in 3 parts: 1) Form, 2) Custom icons and 3) Floating labels. This way, if you want the essential coding part, you can just grab 1) Form.

How to add a custom icon: you need to add a class to the element (input/select/textarea) that you want to stylize with the icon (i.e. class .user to the first input element). Secondly you need to add the .icon class to its parent. Finally in CSS you’ll define the custom background-image. If the input field is required, you need to define 2 background-images, just like in the example below:

Floating labels are activated through the .floating-labels class added to the .cd-form element. In case you never heard of this UX pattern, it was first introduced by Matt D. Smith. He also explained how he came up with this idea in this interesting article. In my opinion, it’s a great UX solution: it allows you to use labels as placeholders at first, then turning them into animated labels once the user starts typing. This way the user has always a clue of what kind of information has been provided already.

You’ll notice in CSS the .floating-labels class derives from the .js class, which is added by Modernizr when javascript is supported by the browser. This way if javascript is disabled by the browser/user, the form is still accessible with standard labels (the .floating-labels class produces no effect).

In order to stylize an obligatory field, we took advantage of the required boolean HTML5 attribute. While the error is just a class added to the form element.

Another interesting point is the way we created custom radio and check buttons. You’ll find the source code pretty straightforward. In a nutshell, we set position: absolute; and opacity: 0; for the radio and check input elements, and replaced them with custom ::before and ::after pseudo elements of the <label>.

Events handling

Javascript has been used to activate the floating labels. If a .floating-labels element exists in the DOM, we initialize the floatLabels() function: it grabs the form input fields (targeted as next elements of the .cd-label) and binds the checkVal() function to the keyup() event to detect if the user has started typing.

The checkVal() function checks the input value: if not empty, it adds the float class to its previous .cd-label element, otherwise it removes it.

Changelog

Mar 16, 2015
  • Added focus effect to radio and check buttons
Mar 12, 2015
  • Bug fixed - autofill not properly detected
Mar 11, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • feamoignargfaionakfj9ajfopamjv

    Thanks! :)

  • http://lukespoor.me Luke Spoor

    Any chance of a bit of a PHP tut adding to this to make it a functional form?

    • Boon Ma

      I agree. We see a lot of contact forms that are not functional. Adding a PHP part would be extremely helpful for all of us beginners. Hope we can see it here soon! Anyway, appreciate your work Sebastiano.

      • http://www.nilpo.com/ Robert Dunham (Nilpo)

        There are already dozens of prebuilt php form mailing scripts out there. Any well-formatted html form will work.

        • Boon Ma

          Could you please give me a few links to these scripts so I can study them? Thanks!

    • Ashley Tonkin

      Hey Luke if you wish i could do some php for this to be a working form if you really wish.

      • Boon Ma

        Would you mind sharing the PHP part with me too :) I wish I am better with PHP but I am not.

        • Ashley Tonkin

          I’ll do the php part tomorrow as its past 2:30am for me right now.
          Once it’s done I’ll post a link for everyone to view/use

          • Boon Ma

            Great! Thanks a lot. Your kindness is appreciated very much :)

  • Zack Cote

    When I view the demo, it already appears with a validation error for the email address: http://i.imgur.com/dBAlJHn.png

    Not sure if this is just for example purposes, or an error.

    • http://codyhouse.co/ Sebastiano Guerriero

      it’s on purpose, just to show how an error would look like (and which class to use) ;)

      • Jannik Kramer

        Still, wenn using chromes auto-complete function, it does not update. You have to enter some text, so it fires the check-method i guess.

  • Peter Schmolze

    Really nice looking form, thanks for sharing! Just wanted to let you know that on Chrome 41 when it autofills with my information, the next input that it autofills will still have the label where my info is. So they are on top of each other.

    • http://codyhouse.co/ Sebastiano Guerriero

      working on this. Thanks for the heads up ;)

      • Peter Schmolze

        I noticed that when you change the ‘keyup’ event to ‘change’ it kind of works. After you click what autofill info you want to be used, it recognizes a change and moves the label on the other inputs that get filled.

        • http://codyhouse.co/ Sebastiano Guerriero

          true, seems like the best solution. Another solution was to continuously run a function, but seems too much. Resource updated!

  • dzek

    This is buggy when autocompletion comletes other fields. Placeholders stays with autocompleted values :(

  • http://www.zipbugdev.com Eric Evans

    I noticed you don’t have any label for the select tag. Wouldn’t it be better for screen readers to add an optgroup with the label=”Select Budget”? I love this form by the way, it’s probably one of the libraries I’ve most wanted from this site.

  • http://www.sfpcoder.com/ sina

    I am really appreciate your work.
    is it possible to send newsletter for every post u share?
    now I give ur stuff aggregately for 4 or 5 post

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! You can follow us on Twitter of Facebook (links in the footer). We publish an update there every time we publish a new resource. For now we are sending just a monthly newsletter with a list of all resources published (but in the future we may create another list for those who wants to be updates every week :))

      • http://www.sfpcoder.com/ sina

        thanks!
        I’ll be waiting :)

  • Keith Mason

    Hi Sebastiano, thanks very much for the great tutorial!
    Could you possibly add a php tutorial to this so that by the end we have a fully functional form?
    I would happily pay a donation for this also – as I certainly don’t expect you to do all my work for free ;-)

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Keith, this is an interesting idea we may explore in the future. For now we are focusing our efforts on front-end code only. As soon as we get big enough, we will def explore new possibilities like adding some back end code as well

  • Sam

    One word “lovely!” Would be very handy to have the .php to accompany this, as Boon Ma mentioned there is very little out there to help with this and would be a great addition to your great resource. Keep up the fantastic work! :-)

  • radogado

    Excellent. File input customisation? Demo: http://natuive.net/#form
    Regards.

  • Sam

    One word “lovely!” Would be very handy to have the .php to accompany this, as Boon Ma mentioned there is very little out there to help with this and would be a great addition to your great resource. Keep up the fantastic work! :-)

  • SergeyDruid

    Chrome Win7 x64: upon selecting the second input radio, it flows “up”. I think you can resolve this by adding to “.cd-form .cd-form-list li” float:left or making it display:inline

    • http://codyhouse.co/ Sebastiano Guerriero

      I see, I’ll look into this. Thanks for the heads up ;)

  • http://mds.io/ Matt D. Smith

    Awesome! Thanks for posting Sebastiano =)

    • http://codyhouse.co/ Sebastiano Guerriero

      welcome Matt! Kudos to you for coming up with such an elegant UX solution

  • Vicente d’Avila Melo Sarmento

    I missed a :focus style in those radios and check buttons for visual help to people who use keyboard only. Anyway, thank you for sharing!

    • http://codyhouse.co/ Sebastiano Guerriero

      good catch, def something I’ll fix soon

  • Alex McCabe

    I like this, but I don’t think that a function called checkVal should assign classes. The function does more than it’s name suggests. That’s just my two cents, as I really like this effect :)

  • Ashley Tonkin

    Hello everyone, For you who wanted a working form i have added the PHP code to it and made it open for everyone to use.

    http://mrashtonka.com/Cody/

    The form data gets saved to a Database and also sent to your email address, just a little security that i like to add also means you can always check emails even if you delete them, you can take that out if you wish.

    But everything is working I have tested it out myself.

    • Boon Ma

      Just saw your work. Thanks! I tried to test it with XAMPP but couldn’t make it work. Probably my XAMPP is a problem as I believe your code is good. I only changed the e-mail address in your index.php document but when I started my XAMPP and filled out the form the message never reached my e-mail address. Also, some parts of php code were visible in the form when I opened it. Don’t know what I am doing wrong. Thanks again for your work! Appreciate it very much.

      • Ashley Tonkin

        What php are you using as its done in php 5.5+ Also if you with to add me on skype so i can talk about the problems there your more then welcome to. Also using a localhost server is alright but if you dont have it set up to send emails then it wont work fully.
        But please do add me on skype as i would like to help fix the error/problems you are having with my code

        Skype: tonkadev

        • Boon Ma

          Hi and thanks for your reply! I installed the latest XAMPP 5.6.3. yesterday (ZIP installation). All I did is just a change of the e-mail address in your index.php document. Is there anything else I should change in your code???

          If not than I probably have to set up my XAMPP to send emails but I have no clue how to do that.

          Anyway, I am sure your code is good as you tested it. It’s just my insufficient knowledge on XAMPP and PHP. Hope to figure this out somehow. Thanks again!

          • Ashley Tonkin

            Hey Boon i think i know what the problem is, I have a database setup for this script.

            Ill get a copy of the database file and add it to the zip download file for you.

            If you have any other questions please just email me at mrashtonka@gmail.com

          • Boon Ma

            Thanks for update! Obviously I am the problem bcz I don’t know how to test this. Here is what I did:
            1. Downloaded your ZIP file
            2. Unzipped your file
            3. Changed the e-mail addres in your index.php
            4. Copy/pasted the whole file in xampp/htdocs on my C disc
            5. Started Apache and MySQL on my XAMPP COntrol Panel
            6. Called http://localhost/contact-form/index.php from my browser
            7. I got this message: SQLSTATE[HY000] [1049] Unknown database ‘cody’

            My knowledge on both PHP and XAMPP is very humble as I am new to this stuff so I am not sure what is it that I am doing wrong.

            I am really sorry if I bother you with this.

            Many thanks for your time and patience with me.

          • Ashley Tonkin

            You need to go into your phpmyadmin for MySQL and create a new database called cody, Then you import the .sql file that is in the zip folder you downloaded. once you have done that everything should be working fine.

            Please any more questions Email me as i wont be replying to this post anymore

          • feamoignargfaionakfj9ajfopamjv

            Could you add a little AJAX?
            Maybe I’ll do it in my free time :)

          • Ashley Tonkin

            What do you need Ajax for ?

          • David

            Hi Ashley, i’ve been trying for ages trying to get this form to work, the link you posted with the php code is no longer valid – can it be reposted / has it moved??

          • http://www.mrashtonka.com Ashley Tonkin

            Hey David add me on Skype and I’ll send you the files while I fix the server problem.
            Skype: tonkadev

          • David

            Thanks pal, i’ve added you on skype

          • Boon Ma

            How do I create a new database? I have never worked with databases so far. And how to import the .sql file? Is form.sql file the one I should import? Thank you again.

  • Marco Aurélio Rodrigues

    Awesome form Sebastiano. Thanks a lot for sharing this.

  • aslsergio

    Awesome form! Congratulations!

  • James Young

    Great stuff, thank you. I would love to see you tackle a Phone number input as part of this form – especially one that deals with aspects of International users and auto-formatting that guides user on best means of inputting their sequence of digits.

    • Ashley Tonkin

      Do you have any examples of this as I’m not 100% sure on what you mean by this. Also I’ll be happy to add this to my website and download of this form with php

  • silyy billy

    A small technical note : Exclude spambots ! We build an input with the attribute ‘ hidden’ . PHP checks if this field has a value. If so, a spambot has sent this form and we throw the data easily in the trash. Typical users do not see this box and it may not have filled so – it’s that simple. Who can write the PHP for this?

    • Ashley Tonkin

      Shouldn’t be to hard I’ll update it tomorrow for you on my website and download I have.

  • OgbaOghene Ozoro

    Any plan to accommodate event delegation?

  • http://www.dimasaresuki.com Muhammad Dimas Saputro

    beautifull form and very nice

  • Felicitas

    Hello,

    Thank you for the great instruction!

    I’m not that familiar with js tho. I just implemented this form into my webpage and made it look the way I like it, but how do I make it work now? I have absolutely no idea how to make it so the messages actually arrive in my inbox, or anywhere for that matter lol.

    Any help would be greatly appreciated!

    Thank you,

    Felicitas

    • http://codyhouse.co Claudia Romano

      Hi Felicitas, glad you like it! You can give a look at what @ashleytonkin:disqus did:
      http://mrashtonka.com/Cody/

    • http://www.mrashtonka.com Ashley Tonkin

      If you would like help to implement it into your own website and code I’ll be more then happy to help you out

  • Alex c:

    It’s easy to make this functional – a simple bit of HTML sets this to send data entries as an email to you simply by setting (make sure to keep the class added)… adding to a database isn’t too difficult either – check w3schools.com guides on PHP and MySQL

  • Indian-Share-Tips.Com

    Hi,

    Can you add aa demo of the product as the instructions are quite technical in nature. I want to implement same at our website.

    Regards

  • tony

    If anyone is interested, I have created a version that includes PHP with basic validation and adds the records to the database. Although, server validation could be passed through with Ajax as well.

    • Nathan

      Could you explain to me how exactly you do this? All I need for it to do is send an email with validation, but I can’t seem to get it to work

      • http://codyhouse.co Claudia Romano

        you can give a look at what @ashleytonkin:disqus did:
        http://mrashtonka.com/Cody/

        • tony

          Yep, this is a good example. The code there is more in-depth than mine.

        • David Hakkert

          THIS FORM IS AWESOME! Could you provide me with the html/css/php for this exact form? I would be honored if I could implement this in my site :)

        • Nathan Okh

          Its not available anymore…

      • http://www.mrashtonka.com Ashley Tonkin

        If you need help I’ll be more then happy to help you implement it into your own code.

        • David Hakkert

          Hi Ashley, Could you provide me with the PHP file you are using here? http://mrashtonka.com/Cody/

          • feamoignargfaionakfj9ajfopamjv

            Eee, what?

            Big blue top bar with text “Download ZIP File”…

  • http://ash.guru/ Ash Stallard-Phillips

    I am using this with the Contact Form 7 plugin for WordPress which will automatically wrap span elements around each form field. This means if I add a label before the form field it wont float because the javascript is looking for the “next” element.

    How can I change the js so it will target the form field within the next span element?

    • http://codyhouse.co Claudia Romano

      Hi, in the main.js, in the checkVal() function, try replacing inputField.prev(‘.cd-label’) with inputField.parent().prev(‘.cd-label’). I’m not sure about the html structure you have, but if the plugin wraps a span around the input (with no other changes), that should work.

      • http://ash.guru/ Ash Stallard-Phillips

        Nope, that’s still not working. I have used static HTML which works fine without the parent span element. Could it be something to do with the “inputFields” variable?

  • Adam

    This contact forum is amazing and I really want to implement this into my own portfolio website that I’m re-designing at the moment. I think I’ll be okay with that. The only problem I think I’ll run into is setting the form up so that the emails actually get sent to my email account. Would anyone be able to help me out with that?

    • http://www.mrashtonka.com Ashley Tonkin

      Hey Adam I’ll be willing to help you with that if you like ?

      I’m busy this week but I can help you out next Monday if that suits you

    • Nathan Okh

      Hey did you ever get help with this?

  • Ethan

    This is exactly what I’ve been looking for – thank you!
    Two questions ;
    I somehow made the floating text (within the entry fields that moves above them) mis-aligned – now they sit too low and and dont go completely above the fields’ top borders. How do I fix that while maintaining approximately the same layout I have made so far?
    Also,
    How (specifically) do I make the form function on my server? I do not understand what I need to do to the code to make it work.

    Thank you so much!

  • vannquish

    Fantastic looking form! Got it setup using Ashley’s download + PHP & MySQL. Is it possible to display a confirmation or thank you message to show we’ve received the enquiry? ATM it just refreshes the form.

    • http://www.mrashtonka.com Ashley Tonkin

      Yes that’s very do able if you want I can do it over the weekend and let you know when I’ve updated the form to download ?

      • vannquish

        Really? Thanks. Was just in the process of switching the layout to horizontal using materializecss.com. Shall I wait until you have uploaded the new version?

        • http://www.mrashtonka.com Ashley Tonkin

          That’s up to you but I more then likely won’t be able to do it this weekend due to basketball (I’m a coach and ref) we have a tournament on here

          • vannquish

            No worries, I’ll add it to my site and apply your changes once they’re done. Thanks for your help

          • vannquish

            Hi Ashley, Did you get chance to look at that notification add-on? How did the tournament go?

          • http://www.mrashtonka.com Ashley Tonkin

            Hey man, sorry i’ve been really busy now im working full time, ill try and find time on the weekend to do it, If you would like to add me on skype we can talk more about it on there and ill update you when i’ve added the notification part to it.

            Skype: tonkadev

  • Jeremy

    Looks good, but in the latest version of Firefox/Mac the has two arrows, the native and the styled.

    • http://codyhouse.co Claudia Romano

      Hi Jeremy,
      I just checked it on Firefox 38.0.5 (Mac) and only the styled arrow is visible. Are you experiencing this issue on our demo or on a local version? Thanks

      • Jeremy

        Hey, you’re right I was stuck on version (31) and the update was timing out. You’re right, it’s working on v38. Thanks!

  • http://www.foodiebuddha.com Foodie Buddha

    Hi there, Great work on this form – i’m playing around with it for a site i’m building. Two quick questions – any way to easily add a calendar option for this so that people can pick a start and end range for a trip? Additionally, what’s the best way to validate a text box entry for phone numbers and validate for numbers (i need both types)?

    • Iben

      Hi Foodie, first of all the calendar function can be accomplished with HTML5 (http://www.w3schools.com/html/html_form_input_types.asp). And second, a service named http://www.flipmail.co has smart validation options for contact form building and works with just HTML.

      • http://www.foodiebuddha.com Foodie Buddha

        Awesome stuff Iben – one last question – do you have any tools for incorporating paypal into the form? eg – a person chooses price a or price b from a drop down (or radio button) and then after submitting the form gets taken to a payments page.

  • Zeraxas

    Great form, I like it so much. That’s why I played with it a little bit and tried to add some features, with goal to study. In the end, I get this one http://zeraxas.github.io/Form-example/
    It’s would be nice, if someone take a look on it. Anyway, I learned a lot of new stuff, so Thanks!

  • http://www.mrashtonka.com Ashley Tonkin

    Hello everyone, For you who wanted a working form i have added the PHP code to it and made it open for everyone to use.

    https://github.com/MrAshTonka/contact-form

    The
    form data gets saved to a Database and also sent to your email address,
    just a little security that i like to add also means you can always
    check emails even if you delete them, you can take that out if you wish.

    But everything is working I have tested it out myself.

    • Joshua Huff

      How can I get this to show up on my webpages I’m working on? Right now it just shows up as a big block with a bunch of text in it…. I’m very inexperienced in the use of PHP and MySQL so I can almost promise you there’s something I’m doing completely wrong…. It would be amazing if you could help as this would help me get what it feels like is a HUGE wall out of my way and will move me closer to the completion of my project! I can’t wait to hear from you!

      • http://www.mrashtonka.com Ashley Tonkin

        Hey Josh, If you add me on skype ill be more then happy to have a look at what you’ve done and willing to help you set it all up :)

        Skype: tonkadev

        • Joshua Huff

          I’ve added you. I also added a message to my request to add you as a contact so please read that as well. It’s just providing you with my email address and asking that you also contact me there because I might be able to get in touch with you quicker and easier that way and sending my files to you than I could on Skype, but I’m not sure. I figure it’s just best to have both options there and available. :)

    • John

      Ashley, I have downloaded your code and I am having trouble setting up this form. When I direct my browser to the index.php my browser loads and empty page. Any help would be greatly appreciated.
      Thanks

  • https://acrodevice.com Jonas Pranio

    Hello,

    Very good job ! But how to receive e-mail on my mailbox ?

    • sassa

      hello, did you get to make it work? how please

      • Ashley Tonkin

        Hey guys your welcome to have a look at the work i had done awhile ago with this contact form.
        I added php to it so it sends the information to a email address and also saves it into a database.
        You can get a copy from github https://github.com/MrAshTonka/contact-form

  • Emir

    Hello, can be added date inptut?

  • http://adamthomasportfolio.com Adam

    Hey is there any chance I can get some help with setting this up within my Dreamweaver website, and also getting the PHP to send the email correctly to my inbox? Many thanks! :)

  • amit kumar

    When looking in mobile and tapping on the text input at the bottom of the page, a virtual
    keyboard appears (as expected). The problem is that the virtual keyboard
    overlaps the focused text input. I can’t see what is
    being typed. I also cannot scroll down further to the bottom to see the
    text box, because the page always cover the whole area. Any Solution for that? Thanks

  • Rabii Brahimi

    Very amazing work :) i like it
    Could you please advise if i can still use a different Icon i am using et-line-font and want to replace the existing Icons with the same ones i am already using. Could you please help :)

    Thanks

  • anerdsexistence

    Very nice. If users drag across the label, sometimes the input behind it will not be focused. Solution:

    This also prevents highlighting.

  • anerdsexistence

    Also, checkVal should be run upon page load incase the user had entered text into the form and then used the back/forward buttons. This will make sure that the labels are floated.

  • Aishwarya Taneja

    How to set upload field for adding files and storing it?