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.
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.
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… :-)
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?
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.
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.
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).
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.
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/
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.
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!
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!
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.
How bout you guys write a self-promoting article about how to make this site suck less…
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.
They look ugly to me… But that’s probably because I’m “spoiled” by custom (resource://res/forms.css) form fields.
Everyone really needs a hug, apparently.
Don’t be so quick to demand things for free guys.
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.
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.
That was a compliment, BTW. :-) And yes, big thanks to John for those screen shots.
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?
On behalf of all the lurkers, this is a cool post
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.
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.
thank you for the post, really useful to me!
ciao!
Nice trick with ems and line hight.I was ysing padding before, but this is far better. And wufoo is great tool, too.
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!
eeee… screenshot maybe? ;)
Wufoo works just fine for me using XP and Firefox. I’d love to use it now!
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 :-)
FireFox forms sucks no matter css you apply to them. Slow and ugly. I wish It never existed to confuse developer like my self