Hello. Couple days ago I wrote tutorial about creating form with photoshop. Now I give You a quick tip how you can code it to html and css. I’ll be using CSS3 for this.
What will be needed in this tutorial?
Step 1. Folder and files structure
First create Your folder structure. We will need index.html, style.css, images folder and js folder.
In images folder we will have background image and icons from input fields
In js folder we will have cufon files for our font
For cufon go to Cufon page and download cufon-yui.js file. Also You have to create a js file for Museo Slab. You have nice documentation on the site so I will skip this. You can find ready js file in tutorial package.
Step 2. HTML structure
I will use a mix of xhtml and CSS3 in this tutorial. Create html file for now
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Museo_Slab_500_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('label', {
textShadow: '1px 1px 1px #000'
});
</script>
<title>Form</title>
</head>
<body>
<div id="wrapper">
<form action="#" id="form">
<label for="name">Name</label>
<input type="text" id="name" />
<label for="email">Email</label>
<input type="text" id="email" />
<label for="telephone">Telephone</label>
<input type="text" id="telephone" />
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" value="Send" name="submit" id="submit" />
</form>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
As You can see it’s XHTML Transitional 1.0. We have link to our stylesheet, link to jquery and two scripts for font, also we have trigget fo cufon labels. Form is really simple, only necessary things here. Right before
Thanks for all your help and your great post looking forward to more
I adore your wordpress web template, exactly where did you download it from?
Thanks. Well, I don’t think You’ll find it anywhere, because I designed and coded it for this blog exclusively.
Hello may I quote some of the information found in this site if I reference you with a link back to your site?
Hello. While they’re be clear backlinks than there won’t be any problem. Of course You can’t copy the whole tutorials, just some pieces of it.
it great man and i should u such an inspiration to people like me who are web developers…….continue with good work
mhhh this definetly what i have been looking for
Heyho, good entry! I will keep surfing your site
damn, this was awesome!
Hmm where can i change where emails go ?? :/
Or Where do they go automaticly?
Hello,
This is only html and css markup. If You want to use it in Your site or project You want to probably integrate it with php or javascript.
Best
mtuts
Will we see some tutorials about that ? (a)
And are u planning for other new tuts?
ur doing such a great job.
greets Sven
Not for now, sorry.
I don’t have much time now, couse I’m working about 14h/day.
There’s a lot tutorials about creating php contact form so You can check them out if You in hurry.
Best
mtuts
I am still able to use the design i made of ur tutorial with my own touch others BG etc?
Yes.
Best
mtuts
Thanks for sharing your work, its really good ui, Can you share the css for drop down input element?
Thank you very much! I love the result form.
By the way your wordpress theme is outstanding!!