/    Sign up×
Community /Pin to ProfileBookmark

How can I make a good-looking form?

Copy linkTweet thisAlerts:
Jul 21.2008

Hi, today a friend of mine introduced me to browsershots.org. When I saw what my contact forms looked like in different browsers I couldn’t believe it.

To make forms look nice I usually create a div and assign it a background image using the background-image css property. I give the div the same height and width as the background image, and then I position the input fields using the margin-top and margin-left properties.

In Safari the text fields are way too long and get out of the image. In IE the vertical separation is too little and everything is screwed up. In Opera the text fields are too tall and screws up the form as well.

Many people recommended to me not to use divs with a background for forms. My question then is: how should I do it? Can I use a table with a background image? I don’t want to have a normal (ugly) contact form. Is there any way of making a form work across the browsers without giving up the nice design?

BTW, my website is [url]www.tryarg.com/WorldCup[/url] if you want to take a look at the form at the bottom to see what I am talking about.

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Mr__E__CrypticJul 21.2008 — you can size the input boxes with CSS;

eg:

in Css:

input.className

{

height: 20px;

width: 100px;

}

in the form HTML

<input type="text" class="className" etc etc. />

Also, your form should be nested between <fieldset></fieldset>

you can style this, or your form tag as you would a DIV

personally, I think I'd dacrifice the rounded edges and just use styling on the fieldset or form to achieve the blue bg, and outline.

you also have quite a few validation errors
×

Success!

Help @ZekeLL spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...