Part 2: Create a beautiful contact form from scratch using Photoshop, HTML, and CSS

Forms are one of the most difficult tasks you can encounter when coding a website, well at least it was for me when I first started. Many designers do very good up until this point or get to this point and just give up on contact forms. Well if you’re one of those designers or are completely new to creating web forms have no worries. In today’s tutorial I will teach you how to create a contact form from scratch using Photoshop to design it and slicing it up for code using HTML, CSS. Part 2 of the 3 tutorials will cover how to code the form to HTML/CSS. Enjoy

Step 1

Since we have our design ready to go for coding lets begin. I have created a diagram of what to slice in this tutorial. I will explain below.
Contact Form

  1. When Slicing the logo make sure you turn off all layers except the logo image then save it as a transparent(PNG) image.
  2. This is our form background that will be repeated.
  3. This is our fields background image that wil be repeated.
  4. This is our Message field background image that wil be repeated.
  5. This is our send button that we will use as our submit button.

The HTML

Copy the code below into your HTML document then I will explain it below.

  • wrap – The wrap id is what will hold our contact form into place. I used the wrap id to center the form on the screen.
  • form – The form class is what will hold our form. I used this to make the form a specific width and add an background image to it.
  • input (name, email, website and message) – These are the fields for the form.
  • label – The label is what I use for the names. So the name field would be name name, full name etc.
  • span – I used the span tag to define a specific element. In that case the paragraph tag.
  • submit – The submit class is the send button for the form.

The CSS

Copy the code below into your css document then I will explain it below.

  • body – The body is what covers the entire background. So the pattern file you’ve downloaded in part 1 of this tutorial was set to the background image and it repeated itself.
  • form – The form is what hold our form. I made the form a specific width and gave it rounded corners using css3.
  • Input – The input was style and gave a width so all fields would be the same width.
  • Textarea – The text area is the area that holds the message text.
  • Input focus – The input focus is whenever you click on a field. I used a border so you would know what field you’re currently at.
  • Label – The label is what holds our field headings such as name, email etc. I applied a font size, and color to the labels.
  • Button – The button is used for the submit button. I create a button so users would not have to see the hideous default button.
  • Wrap – The wrap is what holds and contains the contact form.
  • Top name – The top name is the logo(Contact Us). I used an image to define the logo.
  • Span – The span is what I used for our little text to the left of the submit button.

You’re now done with the contact form coding. The first part of this tutorial we covered how to design and create a contact form then in part two of this tutorial you learned how to code the contact form. If you are still having a hard time trying to figure out how something was done download the contact form and tamper with the code. The next part of this tutorial will cover how to make the contact form work with PHP.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. kurt says:

    great tutorial. The best types of tutorials are the ones that show the complete development process from photoshop to coding. great job.

    SMH@ the wysiwyg editor generation of web designers. always looking for shortcuts.

  2. Thanks so much for providing individuals with such a spectacular possibility to read critical reviews from this web site. It is always very useful and also full of amusement for me personally and my office acquaintances to visit your web site no less than three times weekly to read the fresh guidance you have got. Of course, we are usually amazed for the surprising things served by you.

  3. Dennis.. says:

    Hi Marcel. Can I use this for my website? And another question whenever I put in the formular the header goes always (it’s centered)…i use two stylesheets…

    • Yes you may :). I am not sure why the header does not appear correctly and you may use two style sheets. Do you have a link to contact form so I can assist you?

    • Dennis.. says:

      thank you very much ;D You’re a great person…I solved the header problem…thank you.

  4. Katherine says:

    I don’t really get how the slicing works.. I keep getting the whole image but then the actual form is like literally positioned right above. I don’t know what to do 🙁

Leave a Reply