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.

Jump to...

 

Applying Custom CSS to a Theme

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 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. Click Advanced from the list of properties.
  6. Enter the URL of your CSS file.
  7. Click Save Theme.
  8. Apply the theme to any of your forms or reports.

 

Hosting Your CSS File

There's no way to upload your CSS files to Wufoo, so you have to host it on your own server, or a hosting service like Dropbox.

To make sure your custom CSS works in your form or report, it must be hosted on a site that uses the latest version of HTTPS.

 

How Custom CSS Interacts with Other Theme Settings

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.

 

Previewing a Theme with Custom CSS

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 and to see a video tutorial and a visual breakdown of all the CSS selectors that Wufoo's default stylesheet uses.
If you're familiar with CSS, you can link your own CSS file to a theme so you can have complete control over the look and feel of the forms and reports that use that theme.

Create online forms

Add HTML forms to your site in a snap—no coding required.

Change Language