Navigation Buttons

In this article
Changing Button Styles with CSS
Missing Submit Button

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.

Submit Button
To edit the Submit button:
1. Click Themes in the header of your account.
2. From the Theme dropdown menu all the way to the left, select an existing theme or create a new one.
3. Select Button from the list of properties.
4. 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.
5. Click Apply.
6. Click Save Theme to save your theme. If it's a new theme you'll also have to name your theme.
7. Apply the theme to any of your forms or reports.
Next and Previous Buttons
If you have a multi-page form, you can also customize the Next and Previous buttons.
To edit the Next or Previous button:
1. Log in and go to Forms.
2. Click the form you want to edit.
3. Click a Page Break in your form to open its Field Settings.
4. 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.
5. Click Save Form.
TIP! Hide the Previous Button If you want to hide the Previous button to prevent people from going back to previous pages in the form, type hideSecondary into the CSS Layout Keywords textbox in the Field Settings for that Page Break. Learn more: CSS Keywords

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.

DocuSign Field

Building a Form

Getting Started with Wufoo

Wufoo

Navigation Buttons

Changing Button Styles with CSS

Missing Submit Button

Related Articles