Moving the Submit Button

Learn how to move the submit button so that you can more fully customize the layout of your forms.

Not already signed up for Wufoo? Let's get started!

Moving the Submit Button

How to Move the Submit Button to a New Position

Do you have a simple form that contains just a few items, such as a name and email field? If so, you may want to clean up the look of the page by moving your Submit button to the same line as the rest of the info on the form. We’ll show you how to do this by using a custom CSS file to change the position of the submit button.

Steps to move the Submit button

  1. Before you attempt to move the position of the Submit button, make sure you’re familiar with creating custom CSS files in Wufoo – you’ll need to create one and attach it to your theme.
  2. Figure out the coordinates where you’d like the new Submit button to go.
  3. The Submit button on Wufoo forms all have the same ID – ‘saveForm.’ With the custom CSS file, change the position of the button, using the new coordinates.
  4. Attach the custom CSS file to your theme.
    Here is a screenshot so you can see how the custom CSS form looks:

To change the Submit button, your code should read: (With your custom coordinates entered in.)

#saveForm {
  position: relative;
  top: -43px;
  left: 410px;
}

If you need more or less spacing between the form field and the button, just adjust the “left” position accordingly.

That’s all there is to it!