Wufoo

Using Custom CSS to Style Your Forms & Reports

If you’re familiar with Cascading Style Sheets (CSS), you can link your own CSS files to a theme so you can have complete control over the look and feel of your forms and reports.

To apply your own custom CSS to a form or report:

  1. Download the Wufoo Theme Kit and create your custom CSS.
  2. Host your CSS file in the File Manager or on a PCI compliant web server and grab the link to the file.
  3. In Wufoo, click Themes in the header of your account.
  4. From the Theme dropdown, choose an existing theme or create a new one.
  5. Select Advanced from the list of properties.
  6. Enter the URL of your CSS file.
  7. Select Save Theme.
  8. Apply the theme to any of your forms or reports.

You can use the File Manager to host CSS files directly in your Wufoo account. This will give you a URL to use when applying CSS to your theme.

To get started, add your CSS file to File Manager. Then click the More icon and choose Get Link.

If you don't host your CSS in the File Manager, you can host your file on your own server or another file hosting service.

To make sure your CSS properly displays in your form, it must be hosted on a site that uses the latest version of HTTPS.

You can use the Theme Designer and your custom CSS together to style your form. For example, to change the button text, we recommend using the Theme Designer, rather than building this into your CSS.

If there are conflicts, rules in your custom CSS override the settings in the UI of the Theme Designer.

When you're in the Theme Designer, the live theme preview at the bottom of the page won't reflect your custom CSS. Instead, click the Preview button in the Advanced section of your theme to see an example form with all of your Theme Designer settings, and custom CSS, applied.

Video Tutorial & Anatomy of a Wufoo Form Check out our Custom CSS guide for a video tutorial and a visual breakdown of all the CSS selectors that Wufoo's default stylesheet uses.