Using Custom CSS to Style Your Forms & Reports
If you're familiar with CSS (Cascading Style Sheets), 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.
To apply your own custom CSS to a form or report:
- Click here to download the Wufoo Theme Kit!
- Once you've got your custom.css file ready, host it on a secure web server and grab the link. See the Hosting Your CSS File section below for more details about this—we strongly recommend hosting this over SSL.
- Back in Wufoo, click Themes in the header of your account.
- From the Theme dropdown menu all the way to the left, select an existing theme or create a new one.
- Select Advanced from the list of properties.
- In the "Where's your CSS file on the web?" field, enter the URL of your CSS file.
- Click Preview to preview the theme with the CSS included.
- Click Save Theme when you're done.
- Apply the theme to any of your forms or reports.
Hosting Your CSS File
There's no way to host your CSS file on Wufoo, so you'll need to upload it to your own server, or a hosting service like Dropbox.
We recommend hosting your CSS file securely over SSL to prevent browser security warnings from popping up when people try to get to your form. This is especially important if you're embedding your form on an SSL-encrypted site. Learn more: SSL Encryption
How Custom CSS Interacts with Other Theme Settings
You can use both the Theme Designer settings and custom CSS together to style your form—you don't have to use either or. For example, to change the button text, we recommend just using the Buttons property in the Theme Designer to do this, rather than building this into your CSS.
When there are "conflicts", however, 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.