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 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. 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

NEW FEATURE: File Manager is only available in the new Wufoo experience. Try it out!

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.

 

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