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.

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.

Edit the Submit, Next, and Previous buttons on your form, change button styles using custom CSS, and learn what to do if the Submit button is missing on your embedded form.

Create online forms

Add HTML forms to your site in a snap—no coding required.

Change Language