Webdevtuts » part2

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

Marcell Purham — Wed, 24 Nov 2010 16:41:04 +0000

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

Download Demo

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.

When Slicing the logo make sure you turn off all layers except the logo image then save it as a transparent(PNG) image.
This is our form background that will be repeated.
This is our fields background image that wil be repeated.
This is our Message field background image that wil be repeated.
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.


	
	
		
			
				Name:
				
			

			
				E-mail:
				
			

			
				Website:
				
			

			
				Comment:
				
			

			Double Check everything! I don't want to respond to the wrong information!

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 {
	background:url(images/background.png);
}
.form {
	background:#cdd6d8 url(images/form-bg.jpg);
	width:500px;
	float:left;
	border:1px solid #cfd7d5;
	-moz-border-radius:10px;
	margin-bottom:50px;
}

input#name,
input#email,
input#website {
	padding:15px;
	border:1px solid #e5e5e5;
	width:400px;
	background:url(images/input-bg.jpg);
	-moz-border-radius:10px;
}

.form li {
	list-style:none;
	margin-bottom:10px;
}

textarea {
	width:400px;
	height:150px;
	overflow:auto;
	padding:15px;
	background:url(images/msg-bg.jpg);
	-moz-border-radius:10px;
	border:none;
}

textarea:focus,
input#name:focus,
input#email:focus,
input#website:focus {
	border: 1px solid #a5a5a5;
}

label {
	font-family:'Tahoma';
	font-size:14px;
	color:#808080;
}

#button {
	background: url("images/button.png");
	width:129px;
	height:68px;
	float:right;
	text-indent:-9999px;
	border:none;
	display:block;
	margin:0 25px 0 0;
}

#button:hover {
	background: url("images/button-active.png");
}

#wrap {
	width:600px;
	margin: 0 auto;
}

#top_name {
	background:url(images/contact.png);
	height:75px;
	width:275px;
	margin: 10px auto;
}

span {
	font-size:10px;
	float:left;
	font-family:'Tahoma';
	width:300px;
	margin-top:7px;
	color:#454747;
}

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.

PSD to WordPress Series Part 2

Marcell Purham — Sat, 05 Sep 2009 02:49:13 +0000

I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress. If everyone likes this tutorial then we will also do a theme option for it. So let’s get this thing started.

Download Final

Welcome to part 2 of PSD to WordPress Series. In this part of the tutorial we’re going to slice and code our theme for valid Xhtml/css.

Note: I do not slice my layouts because I end up having so many unused images so in this tutorial we’re going to crop everything. Also When you have a cropped image I will not go over how to save.

Step 1

Open Photoshop (Continue where we left of from previous tutorial)

Step 2

Select the crop tool

Step 3

First thing we’re going to crop will be the header top. ( Press enter key when you feel you have the appropriate crop. ) Save as body-bg.jpg

Note: After you crop an image go to File>>Revert or press F12 to go back to last save point

Step 4

Now we will crop our logo. ( save as logo.jpg )

Step 5

To speed things up so we can get to coding this thing, I will go over the next 3 objects we will need to crop.

Post Thumbnail: Save as Post_thumb.jpg

Sample ad 125×125: Save as ad125.jpg

Flickr image: Save as flk_samp.jpg

Now that we’ve finished cropping the images that well need for our layout, we can get to coding it.( Woooooooooooooo! )

Note: Before we begin this tutorial Make sure you create a new folder so you can store files.

Step 1

Open dreamweaver ( Other text editors are fine! ) File>>New>>HTML>none

Step 2

We will first begin by creating our header section. Go ahead and copy & paste it . I will explain it below.




Home
Articles
Photoshop
Resources
Flash
Freebies

Step 3

For the navigation I used an unordered list with links inside. Also we will take care of the logo and clear class when we begin styling our theme.

Note: If you’re not familiar with that it is basically a push down for our theme. For example if you do not clear the floats the theme and everything will be completely disorder.

Step 4

Now we will begin adding the content. First we will create the page wrap to contain all of our content.

Step 5

Now we will create our main column which will hold all of our post, thumbnails and etc. The code below will go inside of the container tags.

Step 6

Ok so we have our main_col wrap created, we can now start to add our post to our theme. div class=”post_break” holds our posts information. When working with divs id can not be repeated so we used a class so that we can repeat it and have valid code.

div id=”post_thumb” is our thumbnail for our

div id=”post_info” is what we will used to define the author and tags.

div id=”post_text” will be used for our wordpress excerpt.
div id=”post_more” will be used to link our front page to the actual post. The will keep everything from overlapping and pushed the divs down. Now it’s time to Add the code below inside of the main_col div.



10 WordPress Theme You Probably Won't Forget
Posted in Articles, by Marcell, on May 5th | 19 comments



vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

Read More

Note: Copy and paste the code above 4 times.

Step 7

Now it’s time to create our sidebar. For the sidebar I used an unordered list for advertising since most people want to run ads on their blog. Copy & paste the code below inside of the main_col div.


Sponsors







Advertise here



Flickr

Step 8

For the last html markup we will now add the footer


Copyright 2009 Your Website.com All rights reserved

Step 9

Here is the final HTML code.

Home
Articles
Photoshop
Resources
Flash
Freebies

10 WordPress Theme You Probably Won't Forget

Posted in Articles, by Marcell, on May 5th | 19 comments

vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

10 WordPress Theme You Probably Won't Forget

Posted in Articles, by Marcell, on May 5th | 19 comments

10 WordPress Theme You Probably Won't Forget

Posted in Articles, by Marcell, on May 5th | 19 comments

10 WordPress Theme You Probably Won't Forget

Posted in Articles, by Marcell, on May 5th | 19 comments

Step 10

Now it’s time to style our HTML. We will begin by linking our stylesheet with our HTML document. Place the following code in the head section of the HTML.


Step 11
First let’s add our css reset into the top part of our stylesheet.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}

Step 12
Now lets add our basic typography into our stylesheet.
.clear							{ clear:both; }
a,a:hover,a:visited				{ color:#b8bab6; }
p							   { line-height:18px; }

Step 13
Ok we will now style our main divs.


body							{ background: #72434d url(images/body-bg.jpg) repeat-x ; font-family:arial; }
#Container						{ width:972px; margin:0 auto; }
#header							{ width:972px; margin:auto; }
#logo							{ width:317px; height:98px; background:url(images/logo.jpg); }
#main_col						{ width:640px; float:left; padding:15px; font-family:arial; }
#main_col p						{ font-size:12px; text-align:left; padding-bottom:2em }

Step 14
It’s time to style the navigation.


/*
Navigation
*/
#main_nav						{ float:left; margin:10px 0 21px 0;}
#main_nav li						{ display:inline; font-weight:bold; font-size:12px;}
#main_nav li a					{ color:#fff;}

Step 15
Post_break>The code below will style our post.


/*
Post
*/
.post_break						{ float:left; margin:10px 0 10px 0; }
.post_break h2					{ color:#222226; font-family: arial; font-weight:bold; font-size:24px; }
#post_text						{ padding:40px 0; font-size:12px; font-family:arial; }
#post_info						{ background:#000; float:left; color:#fff; font-size:12px; padding:5px;  margin:5px 0 5px 0;}
#post_info p						{ padding:0;}
#post_thumb						{ float:right;}
a.post_more						{ font-size:12px; color:#fff; float:right; margin-right:20em;}

Step 16
adverts This will style the code thumbnails in our sidebar


/*
Adverts
*/
#adverts						{ margin:0 0 0 10px;}
#adverts li						{ display:block; float:left; margin:5px 5px; }
#adverts 						{ }
#adverts						{ }
#flickr							{ margin:10px 0 0 10px;	}
#flickr li 						{ display:block; float:left; margin:5px;}

Step 17
sidebar This will style out sidebar and sidebar headings


/*
sidebar
*/
#sidebar						{ width:290px; float:right; background:#000;  }
#sidebar  h2						{ color:#fff; font-family: arial; font-weight:bold; font-size:31px; background:#71434b; padding:5px; margin:30px 40px 0 0; }
.side_more						{ font-size:12px; color:#fff; margin:0 15px; float:right;}

Step 18
footer The final code below will style our wonderful, but simple footer.


/*
Footer
*/
#footer							{ margin: auto; background:#000; height:50px; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#footer p						{ padding:15px;}

Here is the final css code! Hope this tutorial helps. Please leave comments giving feedback
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}

/*---------------------------------------------------------------Code starts--------------------------------------------------------------------------------------*/
.clear							{ clear:both; }
a,a:hover,a:visited				{ color:#b8bab6; }
p								{ line-height:18px; }

body							{ background: #72434d url(images/body-bg.jpg) repeat-x ; font-family:arial; }
#Container						{ width:972px; margin:0 auto; }
#header							{ width:972px; margin:auto; }
#logo							{ width:317px; height:98px; background:url(images/logo.jpg);}
#main_col						{ width:640px; float:left; padding:15px; font-family:arial;}
#main_col p						{ font-size:12px; text-align:left; padding-bottom:2em}

/*
Navigation
*/
#main_nav						{ float:left; margin:10px 0 21px 0;}
#main_nav li						{ display:inline; font-weight:bold; font-size:12px;}
#main_nav li a					{ color:#fff;}

/*
Post
*/
.post_break						{ float:left; margin:10px 0 10px 0; }
.post_break h2					{ color:#222226; font-family: arial; font-weight:bold; font-size:24px; }
#post_text						{ padding:40px 0; font-size:12px; font-family:arial; }
#post_info						{ background:#000; float:left; color:#fff; font-size:12px; padding:5px;  margin:5px 0 5px 0;}
#post_info p						{ padding:0;}
#post_thumb						{ float:right;}
a.post_more						{ font-size:12px; color:#fff; float:right; margin-right:20em;}

/*
Adverts
*/
#adverts						{ margin:0 0 0 10px;}
#adverts li						{ display:block; float:left; margin:5px 5px; }
#adverts 						{ }
#adverts						{ }
#flickr							{ margin:10px 0 0 10px;	}
#flickr li 						{ display:block; float:left; margin:5px;}

/*
sidebar
*/
#sidebar						{ width:290px; float:right; background:#000;  }
#sidebar  h2						{ color:#fff; font-family: arial; font-weight:bold; font-size:31px; background:#71434b; padding:5px; margin:30px 40px 0 0; }
.side_more						{ font-size:12px; color:#fff; margin:0 15px; float:right;}

/*
Footer
*/
#footer							{ margin: auto; background:#000; height:50px; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#footer p						{ padding:15px;}