On this Page
The Theme Designer allows you to create visual themes that can be applied to your Wufoo forms and reports to match your personal tastes or organization’s identity and web site.
Creating Your First Theme
To get to the Theme Designer, click on the “Themes” tab at the top of the Wufoo interface.
The Theme Designer is composed of two halves. The top of the Theme Designer that’s surrounded by a charcoal background contains a series of menus that can be used to create new themes and to manage and organize themes you’ve already created. The bottom portion contains a sample form that serves as a live preview to show you how changes made in the top half will affect the visual look of your Wufoo form.
To create a new theme make sure the drop down of themes (Theme Menu) is set to “Create New.” The Theme Designer will always start with a blank template for creating new themes. The themes in Wufoo are organized into a series of menus that display the appropriate options based on the property you’ve selected.
Each theme in Wufoo has been organized into 7 properties that can be accessed through the Properties Menu that sits to the right of the Theme Menu. The Properties Menu is divided into 7 parts:
When you click on a property in the menu, it will show additional menus and options to the right of the menu to help you select and change that aspect of your theme. For example, if you wanted to change the highlight color that surrounds a field when it’s selected you would click on “Backgrounds” in the Properties Menu and then “Highlight” in the Backgrounds Menu and then select a color from the color picker that displays. The theme preview will show your changes accordingly.
When you’re done with your beautiful creation, just click on the “Save Theme” button in the upper right hand corner. The Theme Designer will then prompt you for a name for your new theme.
Editing an Existing Theme
To select and edit a theme you’ve already created, just select your theme from the drop down of themes on the far left side. This will load the theme in the live preview. When you’re editing an existing theme, you will be presented with a series of additional buttons in the top right hand corner next to the “Save Theme” button that will allow you to Rename, Duplicate and Delete the selected theme.
How do I apply a theme?
After you’ve designed and saved your theme, you can apply it to a form by going to the Form Manager under the “Forms” tab and finding your form’s name. On the right side of the Form is a drop down menu with a Palette icon next to it. Select your theme from the drop down menu and it’ll apply to your form.
The same drop down can also be found in the Report Manager next to your reports’ names.
How do I change the logo?
Click on “Logo” in the Properties Menu. The default logo is the Wufoo logo. You can provide us with a link to your logo on a web site by clicking on “Your Logo”, decide not to have a logo or choose one of our pre-made logos below the dashed line.
Currently, Wufoo does not host custom logo images and so if you’re using your own logo, you’ll need to upload your logo image to your own web server or an image hosting service like Photobucket. After you upload your image to the web, enter the URL into the input asking “Where’s your image on the web?” and then click “Apply” to see how it’ll look in the theme preview.
The default dimensions for the area containing the logo is 640px long by 40px high. If your image is showing up as cropped, you can increase the height of this area using the height input under the URL input for your custom logo image.
How do I remove the Wufoo branding and ads?
You can always change the logo image shown on the upper-left hand corner of your forms and reports by creating a new theme, changing the logo and applying that theme to your forms or reports.
The Wufoo ad and link shown on the confirmation page, notification emails and confirmation emails are only shown on free accounts. Wufoo will remove these links if you upgrade to any paid plan. You can learn more about the benefits of upgrading to a paid plan on our FAQ page.
Using the Font Picker
When you access the Typography settings, you can use Wufoo’s Font Picker to choose from over 100 different fonts to use on your Wufoo forms. To change the font of a property on your form, click on the AaZz square to bring up the Font Picker interface.
You can access the different font categories on the left side of the font picker and page through the fonts using the numbered pagination buttons at the bottom. To pick a font, just select the font you want to use and the click on the Pick this Font button. The Font Picker will then close and it’ll show your font in the Form Preview in the Theme Designer.
There are three types of fonts to choose from in the Font Picker:
System fonts are fonts that are available on everyone’s computer. Because of this, they do not need to be downloaded when the form is loaded.
Bell and Whistle Fonts are custom fonts that are served from Wufoo’s servers that will be downloaded by your user’s browser when your form is loaded. Because of this, your forms will take a bit longer to load using these fonts over the system fonts.
TypeKit Fonts are fonts that are available from a hosted service that carries higher-quality fonts. You’ll need to create a TypeKit account and a “kit” pre-selected fonts from their site before you can use this integration. Learn more about our TypeKit integration.
Along the top of the Font Picker is a Font Preview that will show the font in various contexts to help you get a feel for the font. When you select a font, it’ll show that font in the Font Preview. If you click on the Font Preview, it’ll cycle through different text samples showcasing sentences using the entire alphabet.
Using Your Own CSS
If you’re a web designer familiar with CSS (Cascading Style Sheets) the Theme Designer also allows you to provide a link to your own CSS file so you can use your own custom CSS rules to further customize the look of your forms and reports. To use your own CSS file, click on the “Advanced” property and provide a link to your CSS file on the web. Like the logo images, we do not host these CSS files for you and so you’ll have to upload them to your own web server and provide a link that’s accessible over the Internet.
The styles in your custom CSS file cannot be shown in the live preview in the Theme Designer, but you can see a preview of how it’ll affect your theme by clicking on the “Preview” button in the Advanced Menu. The Theme Designer will then save the theme and open a new window showing how your custom rules will interact with the default and custom theme stylesheets on an advanced form preview.
When you save your theme, your CSS file will then be included as a link when your Wufoo form or report loads with that custom theme. It is important to note that your CSS file is added after the default Wufoo form stylesheet and any style changes you made using the Theme Designer. This means that the rules in your custom CSS file will override any previous rules from the Theme Designer or Wufoo.
For additional resources for advanced customization of your Wufoo themes, download the Wufoo Theme Kit.
Changing the Submit Button
You can change the text on your submit button or switch it out with an image of your choice using the Button properties in the Theme Designer. This is useful for designers that want to change the text of the submit button to fit the copy of their form, provide further instructions for the user or translate the action to their own language.
Click on “Button” in the Properties Menu. The default text is “Submit”. Because it’s UTF-8 compatible, you should be able to use most foreign characters. You can also provide us with a link to your logo on a web site by clicking on “Image”.
Like the logo properties, Wufoo does not host custom logo images and so if you’re using your own submit button image, you’ll need to upload your logo image to your own web server or an image hosting service like Photobucket. After you upload your image to the web, enter the URL into the input asking “Where’s your image on the web?” and then click “Apply” to see how it’ll look in the theme preview.
Removing the Form Title
If you’re embedding your form on your own web site and designing your own header and title for the form, you might want to hide the form title and form description.
The easiest way to do this is with a parameter in the embed snippet. Change the header parameter from show to hide as described here: http://wufoo.com/2011/07/26/sweet-code-manager-upgrades/
Alternatively, you can use the Theme Designer's custom CSS feature to insert CSS rules to hide the elements on the form. To do this, just upload your own CSS file to your web server with the following CSS rules:
Then specify the URL to your CSS file in the custom CSS option in the Theme Designer.
Why is my theme not applied to my embedded form?
For embedded forms, we strip out the background, header, and border styling to make for a more seamless integration with your website. If you'd like to have those elements applied to the form then you'll want add them directly to the container you've embedded the form in using HTML or CSS styling.