Navigation Buttons
You can change the text or image of the Submit button from the Theme Designer, and you can edit the Next and Previous buttons in the Field Settings for a Page Break.
To edit the Submit button:
- 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 Button from the list of properties.
- Under Button Type, select Text or Link (image).
- Text - Type in the button text you want. This field is UTF-8 compatible so you should be able to use most foreign characters.
- Link (image) - Enter an image URL—the Submit button will become a hyperlinked image.
- Click Apply.
- Click Save Theme to save your theme. If it's a new theme you'll also have to name your theme.
- Apply the theme to any of your forms or reports.
If you have a multi-page form, you can also customize the Next and Previous buttons.
To edit the Next or Previous button:
- Log in and go to Forms.
- Click the form you want to edit.
- Click a Page Break in your form to open its Field Settings.
- Choose from:
- Use Text Button - Type in the button text you want. This field is UTF-8 compatible so you should be able to use most foreign characters.
- Use Image for Button (Next Buttons Only) - Enter an image URL—the Next button will become a hyperlinked image.
- Click Save Form.
Changing Button Styles with CSS
You can add Custom CSS to a theme to fully customize the look of your form's navigation buttons. If you have a multi-page form, you'll also need to account for the Next and Previous buttons. Here are the CSS selectors for all the navigation buttons that can appear on Wufoo forms:
|
Button
|
Selector
|
|---|---|
| Submit | #saveForm |
| Next | #nextPageButton |
| Previous | #previousPageButton |
Missing Submit Button
When you use an iFrame code to embed your form on your website, the code includes a height that we estimate. Unfortunately, there's room for error due to different browser resolutions or font sizes, so sometimes the Submit button will get cut off at the bottom of the form.
To fix this, you'll need to increase the height attribute in your embed code. Locate the code snippet on your site, and find the height attribute. It will say something like height="746". Increase that number and continue testing until you can see everything on your form. You should also make sure to leave some extra wiggle room because error messages take up extra space if someone fills out a field on your form incorrectly.