| 
singapore-business-database

Tutorial on Creating A Custom Looking Form with CSS

Plain ol’ boring looking forms are not as cool as they once were…. well now that I think about it, I don’t think they were ever cool. They are just functional…. so why not make them look nice, add some design into them and make them match the rest of the page? This is exactly what I wanted to do in this post. I’ll walk you through adding a design to your form.

To do this you will need a custom designed form graphic, it needs to be a complete form design as you see in the above image, with the form fields and the button all on the image. If you have drop-down fields this will not work, this is only for text field forms.

Ok, so we have a graphic and what we’ll be doing is we’ll apply the graphic to the background of the farm DIV using CSS.

<div style="background:url(http://domain.com/images/formbg.jpg) top left no-repeat;width:470px;height:335px;"> FORM CODE GOES HERE </div>

The DIV we created above will hold the form code. At this point we have added the image background and specified the size of the DIV. Now let’s add the form code.

<div style="background:url(http://domain.com/images/formbg.jpg) top left no-repeat;width:470px;height:335px;">
<form method="post" action="">
<input name="name">
<input name="email">
<input value="" name="submit2" type="submit">
</form>
</div>

So here we added the simple form inside the DIV. The form is still very basic and needs some styling to position everything so it matches the design. Here is what it looks like at this point:

We’ll need to move the text fields and the button down and position them right over the elements on the image. We will also need to size them to mach the size of the elements on the image. So here is what we do, first we surround each element with a DIV so we can control each one separately and then we position them using MARGIN and PADDING attributes.

<div style="background:url(http://domain.com/images/formbg.jpg) top left no-repeat;width:470px;height:335px;">
<form method="post" action="">
<div style="width:400px;margin-left:40px;padding-top:130px;"><input name="name"></div>
<div style="width:400px;margin-left:40px;padding-top:130px;"><input name="email"></div>
<div style="width:400px;margin-left:40px;padding-top:130px;"><input value="" name="submit2" type="submit"></div>
</form>
</div>

Here is what it looks like after we position the fields:

Not quiet there but it will be once we size the fields to the correct height and width. That is what we will do now. The style to specify the height and width of the fields and the button will need to go right into the INPUT tags and not into the surrounding DIVs that we just created.

<div style="background:url(http://domain.com/images/formbg.jpg) top left no-repeat;width:470px;height:335px;">
<form method="post" action="">
<div style="width:400px;margin-left:40px;padding-top:130px;">
<input name="name" style="width:370px;font-family:arial;font-size:18px;">
</div>
<div style="width:400px;margin-left:40px;padding-top:130px;">
<input name="email" style="width:370px;font-family:arial;font-size:18px;">
</div>
<div style="width:400px;margin-left:40px;padding-top:130px;">
<input value="" name="submit2" type="submit" style="width:380px;height:55px;">
</div>
</form>
</div>

You will notice that the fields are positioned a little lower than where they look like they need to be.

After we make these fields transparent in the next step the fields move up because their borders are set to 0px. So basically you will need to position the fields a bit lower than it looks like they need to be, then after we make them transparent we will move them into the correct final position.

So next we set the fields’ background to transparent and border to 0px.

<div style="background:url(http://domain.com/images/formbg.jpg) top left no-repeat;width:470px;height:335px;">
<form method="post" action="">
<div style="width:400px;margin-left:40px;padding-top:130px;">
<input name="name" style="width:370px;font-family:arial;font-size:18px;background:transparent;border:0px;">
</div>
<div style="width:400px;margin-left:40px;padding-top:130px;">
<input name="email" style="width:370px;font-family:arial;font-size:18px;background:transparent;border:0px;">
</div>
<div style="width:400px;margin-left:40px;padding-top:130px;">
<input value="" name="submit2" type="submit" style="width:380px;height:55px;background:transparent;border:0px;">
</div>
</form>
</div>

Once these changes are made, you will not be able to see the fields and the button any more, so to align and nudge them to their final position we will just type some text into the hidden fields so we see where they are located. For the button you can just click on it and then drag the mouse off the button and then let go, this will draw a slight line around the button so you can see where it is located.

Looks like our form is ready!

Ok, till next time. Have a great day!

~ Valik

You Might Also Like:

  • Adding reCaptcha To A Custom Contact Form Page On WordPress
  • Logo Design Tips & Tutorials
  • Sweet Photoshop Text Effect Tutorials
  • Make Your Own Photoshop Brushes
  • Highly Detailed Icon Design Tutorials!