If you like the way our form fields look on Wufoo, here’s how we did it.

The Image

Download it and upload it to your images folder.

The Markup

<textarea></textarea> 

The CSS

input.text, textarea, select{
    font-size:1.1em;
    line-height:1.3em;
    border-top:1px solid #7c7c7c;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #ddd;
    background:#fff url(/images/fieldbg.gif) repeat-x top;
}

And now you have inputs that are pretty in Firefox and IE. In fact, the textareas are actually prettier than in Safari. Nice apples. Feel free to leave the select stuff out and/or change other stuff according to your needs. The most important part is the border and background.

HTML Form Builder
Kevin Hale

How to Make Firefox Forms Suck Less by Kevin Hale

This entry was posted 5 years ago and was filed under Notebooks.
Comments are currently closed.

· 29 Comments! ·

  1. CM Harrington · 5 years ago

    I took a look at Wufoo a few weeks back, and it was pretty broken both on Safari 2+, and Camino 1+. I went back today, and it’s still rather broken.

    Am I missing something? I can send screenshots, if you’d like.

  2. jtnt · 5 years ago

    How to make this post suck less: Post a working example (or at least screenshots) so I can see a working example without having to go to Wufoo (clicking 5 times to actually get to see what these look like). I’d hate to think this was just a shill post for Wufoo… :-)

  3. Xaprb · 5 years ago

    Who says Firefox forms suck? Is it Firefox forms, or HTML forms that suck? Do IE or Opera forms not suck, by default (I doubt it)? What exactly does ‘suck’ mean — exactly what is wrong that you’re fixing anyway?

    • Just playing devil’s advocate.

    And by the way I agree with jtnt. I can’t get Wufoo to work for me at all (Firefox 1.5 on Gentoo) so I can’t see what you’re talking about.

  4. Joshua Bryant · 5 years ago

    Wow, you guys are harsh.

    First, Wufoo did not look broken in Safari 2 for me, or maybe I just didn’t look hard enough.

    Second, it would be great if you actually added some image screenshots, etc… to this post so we could just see what they look like without having to load up another browser, but it could have been said nicer, lol.

  5. Xaprb · 5 years ago

    Ah — I see now. I did a little sample page with a form, both with and without your code and image applied, and looked at it. So, by default, Firefox’s form controls (at least on Gentoo) have a barely visible bottom and right border, and a kinda ugly top/left border that looks like someone made it with a chisel. It’s hard to see where the inputs really are.

    Your less-sucky-code gives the objects a better defined bottom/right border, makes the left border look the same as the right, and makes a nice curved-shadow-looking top border.

    It does look better, but it’s not really rocket science; if someone really were wondering how come Wufoo’s forms look so great, they’d probably be able to figure it out pretty easily. (I say that not having looked at the Wufoo source code, so I could be wrong).

  6. Xaprb · 5 years ago

    Joshua and Kevin — to clarify, I don’t agree with jtnt that the post sucks. I just agree that screenshots and sample code would be good. Sorry if I came across as harsh.

  7. John Resig · 5 years ago

    Alright, to stop the complaining - I’ve thrown up screenshots of how it looks in FF 1.5 Mac/Win, IE 6, Safari 2, Opera 8.5 Mac/Win, along with some sample code, on my site: http://ejohn.org/apps/wufoo/

  8. Ryan Campbell · 5 years ago

    John, you’re the man. Thanks for putting that up. To the other guys - I’d like to think we do a pretty good job here at Particletree of giving out code with examples. In this one case, Kevin didn’t have time to get everything together. So, yeah screens would have helped, but no need to be harsh about it.

  9. Coda Hale · 5 years ago

    Wufoo on FF 1.5.0.1, SuSE 10.0 (OSS) no worky.

    On top of the lovely patterned background there is a box like this:

    ++ | dark red | ++ | cream | | | +—+—+ | light | white | | cream | | +—+—+

    (Sorry if the formatting doesn’t work.)

    There are no labels or controls beyond a small info button in the upper right hand corner of the dark red header. There’s a flash of something useful when it first loads, then bupkis. This is with Flash 7, since Macrodobedia has not seem fit to release a new version of Flash for Linux since forever ago.

    Finally, thank you for the code & screen shots—I’m totally stealborrowing this technique!

  10. Ian · 5 years ago

    Thanks for the code and the screenshots :)

    You guys offer this information for free and I appreciate it.

    I think some people can be overly harsh with their criticism - especially when it comes to things/information offered up for free.

    Keep up the good work! Wufoo is a fantastic looking product and I can’t wait to use it!

  11. Avinash · 5 years ago

    Wow, I saw Wufoo now for the first time, and I have to say I am impressed at what I saw. It worked fine, I saw no bugs. The interface was clean, and frankly, I can’t wait for it to release.

    As for this post, while I knew the technique, it is well presented and useful. Sure, screens would have been nice, but whatever. If you really are a web developer, it shouldn’t take more than 5 minutes to get something working.

  12. Go Away · 5 years ago

    How bout you guys write a self-promoting article about how to make this site suck less…

  13. Kevin Hale · 5 years ago

    You know, I guess I need to apologize here on my own site for referencing a project that’s been our sole work over the last few months.

    Nearly all of the articles and features written on this blog was inspired by work that we’ve done professionally and so if it wasn’t for the work that we reference on this site, we wouldn’t have any content ever.

    Yes, we promote some of our projects on here, but I think it’s within our rights (at least I thought so) since it’s our web site. To say that talking about or guiding people to the stuff we work really hard on makes our site suck … well, I think that’s just not fair. Also, Wufoo is just in demo mode. It’s not even in public beta and we’re definitely not asking anyone to pay for anything since we’re not ready. Everyone is more than welcome to NOT click on any of the links.

    I really do enjoy the community that we have going in our comments. We receive so much valuable feedback through this medium that I couldn’t imagine finding a better set of readers to help keep us in check. That said, it completely confounds me when I see so much anger for such little things. I can’t see how a comment like that would make me want to share other techniques or improve on what was presented. Sigh.

    John, thanks for making those screenshots. I really appreciate it because I just didn’t have time to create comparisons and I figured it would be better to post the information than nothing at all. You get a hug.

  14. Veracon · 5 years ago

    They look ugly to me… But that’s probably because I’m “spoiled” by custom (resource://res/forms.css) form fields.

  15. Nathan · 5 years ago

    Everyone really needs a hug, apparently.

    Don’t be so quick to demand things for free guys.

  16. Philipp Keller · 5 years ago

    Yeah, the screenshots, John Resig posted look good. Woofoo doesn’t seem to work in my firefox too.. (Firefox 1.0.5).

    Keep on the good work.. I’ve read some pretty decent articles on particletree so far.

  17. jtnt · 5 years ago

    I didn’t mean the post sucked, really. I was just playing on the post’s title when making my point. Which I still stand by 100%. Related, I also hate it when sites posts examples and tell you to “view source to see what’s going on.” What the? Show me the pertinent source! If you’re going to be helpful, go all the way! That’s my main point. SHOW me!

    And I agree with Xaprb. Explain why you think Firefox’s form elements suck and why your way is better.

    Really, the reason why you get such critical responses like this from people is that on the whole we are used to a pretty high level of post from you guys, so when we run across ones like this that are lacking, we feel sorta cheated.

  18. jtnt · 5 years ago

    That was a compliment, BTW. :-) And yes, big thanks to John for those screen shots.

  19. Adam Hopkinson · 5 years ago

    I think i read a while back that wufoo needs Flash 8? Maybe this is why it doesn’t work for some of you.

    And the project looks great from where i’m standing - i’ve always hated forms and hope to use wufoo widely, so what’s wrong with a little self-publicising?

  20. sam · 5 years ago

    On behalf of all the lurkers, this is a cool post

  21. Zach Harkey · 5 years ago

    Excellent post. Screw the haters. Wufoo looks awesome, if I did it I’d link to it with every word I wrote.

    One question. Is it possible to get this effect on the select fields too? They seem to retain the Firefox stank bevel.

  22. louis · 5 years ago

    nice post.

    i was playing with wufoo today at work and its a fun little ap with a very handsome ui. i love it.

    i could not get it to work on my ie/pc, but it looked great on mac.

    when i got home it still does not work on ie here, and firefox opens the site but nothing is clickable.

  23. Francesco~ · 5 years ago

    thank you for the post, really useful to me!

    ciao!

  24. Marko · 5 years ago

    Nice trick with ems and line hight.I was ysing padding before, but this is far better. And wufoo is great tool, too.

  25. ctrl_freak · 5 years ago

    I’ve found that it looks best if you change the background images stripe colour to #EEEEEE and make it repeat normally.

    fieldbg.gif PS - Don’t link to that please!

    Then for buttons:

    font-family: Tahoma, Verdana, Arial, sans-serif; border: 3px double #CCCCCC; background-color: #FFFFFF;

    Sexc!

  26. demander · 5 years ago

    eeee… screenshot maybe? ;)

  27. bobf · 4 years ago

    Wufoo works just fine for me using XP and Firefox. I’d love to use it now!

  28. Xaprb · 4 years ago

    Hey — I was NOT hating or complaining. If you read my comments and imagine me saying these things not in a put-you-down way, but a “I don’t see it, tell me more” way, maybe it will not sound harsh. Remember, it’s written. It’s just like email, 99% of the “tone” is in the eye of the beholder. Somebody says “these guys are complaining” and suddenly it’s hard to read my comments in a non-bitchy way. Again, I was NOT bitching, just matter-of-factly writing “this is what I see.”

    But, this is probably not that important anymore :-)

  29. Viz · 4 years ago

    FireFox forms sucks no matter css you apply to them. Slow and ugly. I wish It never existed to confuse developer like my self