Removing title and better syling of embedded Wufoo forms

We love Wufoo but one thing that has been a bit frustrating is that our beautiful themed forms, which look great when viewed on their own, don’t quite look so hot when embedded in a page.

There are a number of recurring problems with embedded Wufoo forms (in no particular order):

1. The title is often a repeat of the page’s title
2. The background colour of the form is inappropriate or doesn’t match the rest of the site
3. Padding around the form makes the layout look odd in relation to the rest of the page
4. Fonts don’t match the rest of the site

The first three issues are actually quite easy to get around—I just hadn’t had the time or energy to look into it properly.

To make it easier for others, I have setup an open-source stylesheet hosted on GitHub

.embed .wufoo .info {
  display:none;
}

.embed #container, html.embed {
  background-color: transparent;
}

.embed form.wufoo, .embed .wufoo h1, .embed .wufoo h2, .embed .wufoo h3, .embed ul, .embed li, .embed ol, .embed .wufoo .section div {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0; 
}

• View/fork the repository: https://github.com/luciddesign/lucid_resources/blob/master/wufoo_embed.css
• Download/link to the CSS file: https://github.com/luciddesign/lucid_resources/raw/master/wufoo_embed.css

To implement, simply enter the URL of the stylesheet into the advanced option in Wufoo’s theme designer (see http://wufoo.com/docs/theme-designer/#customCSS)

(You might also notice we have a CSS reset file in the same repo which is handy for resetting browsers to “clean slate” state for more consistent cross-browser styling.)

If you have any comments or feedback, we’d love to hear from you. And, if you use this in your forms, do flick us a link to your form page on your website.

Posted on December 23, 2010 by Galen

Leave a Comment