Wufoo Form Styling

DanCarl97

Hi All,

If any of you have used the Wufoo Form Content Block, you'll know that it look absolutely awful (Wufoo's fault, not Smugmug's). So I've spent a good hour styling and that to make it look a lot more... Smugmug. So that it fits with my site.

Here's the finished result: http://www.meljones.info/Contact

I thought I'd share the CSS code I used to help you guys get started if you want to.

Here's my CSS Code:

textarea, input {
	 color:#DEDEDE !important;
	 background:none !important;
	 background-color:#080808 !important;
	 border-color:#1A1A1A !important;
	 border-width:1px !important;
	 border-style:solid !important;
	 outline-width:0;
	 padding:6px 12px 5px !important;
	 border-color:#212121 !important;
}
textarea:focus, input:focus {
	background-color:#1A1A1A !important;
}
 
input[type=button],input[type=submit] {
	background-color:#96F !important;
	color:#fff !important;
	border:none !important;
	padding:10px !important;
	min-width:80px !important;
	font-size:12px !important;
	line-height:18px !important;
	cursor:pointer;
	text-transform:uppercase;
	font-weight:400;
	font:99% arial,helvetica,clean,sans-serif;
}

label {
    font-weight: normal !important;
}

You'll need to upload that somewhere (such as dropbox) and copy it's URL. Then you can go into the theme editor on Wufoo.com and in the advanced option, you can paste the link to the css.

To make it closer to the look of your site, all you should need to do is change any of the background colours and border colours that need to be changed and the text colour.

Thanks,
Dan

ChancyRat

The wufoo part seems to be broken on your page.

I didn't have that hard a time customizing wufoo. The only annoying part is that I couldn't use the Buda font which is my site font. Wufoo doesn't give access to google fonts.
www.joinrats.com/Contact/

DanCarl97

ChancyRat wrote: »

The wufoo part seems to be broken on your page.

I didn't have that hard a time customizing wufoo. The only annoying part is that I couldn't use the Buda font which is my site font. Wufoo doesn't give access to google fonts.
www.joinrats.com/Contact/

How is it broken for you? I've tested it on multiple computers and even different locations. It seems good to me. (It might take 10 seconds to load sometimes.)

ChancyRat

DanCarl97 wrote: »

How is it broken for you? I've tested it on multiple computers and even different locations. It seems good to me. (It might take 10 seconds to load sometimes.)

Working now! Popped into place immediately.
The first time, it had a box with nothing inside it except in the center was one of those little icons indicating a broken image. I didn't wait 10 seconds to see what would happen, I would link slow loading would still not show one of those broken-type icons in a box?

ChancyRat

It turns out I had left the tab open in a browser so I was able to capture the image. After I snapped it, I refreshed the screen and the form again promptly popped into place.
Scaled down to fit DG's limits.

DanCarl97

It looks like some kind of browser error (looks a bit like Google Chrome). I think it's either that or a server error. Sometimes pages just fail to load for no reason though.

ChancyRat

Was indeed Chrome. I've never seen that happen.

Ed LO

Thanks for this Dan - useful bit of code.

I have two very quick questions:

1. When you say put it in dropbox, how do you do that? I'm guessing in a TextEdit file and then use the link for that from Dropbox?

2. How have you managed to change your font? h1, h2, h3 and p fonts for Wufoo are pretty shambolic and I want to be able to use the Google fonts I use in my SM site - a la ChancyRat.

Advice would be helpful. Thanks.

Ed

DanCarl97

Ed LO wrote: »

1. When you say put it in dropbox, how do you do that? I'm guessing in a TextEdit file and then use the link for that from Dropbox?

I don't know if you can do this in textedit but basically yes, and then save that file as a .css file. And then use it's Public Link for Wufoo.

Ed LO wrote: »

2. How have you managed to change your font? h1, h2, h3 and p fonts for Wufoo are pretty shambolic and I want to be able to use the Google fonts I use in my SM site - a la ChancyRat.

I'm actually using the Wufoo default. I'm unsure if you can try changing them in the .css file; you might have to add a !important to the style.