Customizing the Submit Button

Would you like to customize the submit button to better fit your site’s design or personality? Your form’s submit button can play an important role in submission rates.

This guide will cover how to customize the text and style of your form’s submit button, both in the form builder and with your own CSS.

Changing the Submit Button Text

To change the ‘Submit’ text of your form’s button, open the form builder to Settings » General. Here, you’ll see two fields for setting the text in the submit button:

• Submit Button Text: The text shown when this button hasn’t been clicked yet
• Submit Button Processing Text: The text shown after the user clicks this button, but before the confirmation is shown to the user

You can go ahead and change the text of the submit button according to your preference. Once you’re satisfied with the changes, go ahead and save the form.

Styling the Submit Button in the Form Builder

The quickest way to restyle your submit button is in the form builder, where you can see your changes as you make them. No CSS required.

Open the form builder and go to Settings » Themes.

Then look for the Button Styles section on the left.

• Size: Sets how large your button is. Options include Small, Medium, and Large.
• Border: Outlines your button with a Solid, Dashed, or Dotted border.
• Border Size: Sets how thick the border is. The default unit is pixels (px), but you can pick a different unit.
• Border Radius: Rounds the corners of your button for a softer or sharper look. Pixels (px) is the default unit here too.

Below these, you’ll find three color options for your button. To change a color, click the swatch to open the color picker. You can either choose a color visually or enter a hex code for precise control.

• Background: Sets the color behind your button’s label.
• Border: Sets the color of your button’s border. This one only applies if you’ve picked a border style above.
• Text: Sets the color of your button’s label.

You can also pick a ready made color theme from the Themes setting, which updates your button along with the rest of your form. To learn more, see our tutorial on using form themes.

Once you’re happy with your changes, click Save, then use the Preview button to see your form with the styles applied.

The form builder covers the changes most sites need. For finer control, such as exact padding, button alignment, full width buttons, or a specific font, you’ll want a small amount of CSS. We’ll walk through that next.

Styling the Submit Button With CSS

CSS gives you complete control over the submit button, as well as any other aspect of your form. It’s the right tool when you need something the form builder doesn’t offer yet.

If you’re new to CSS or would like a refresher, the best place to start is with our introductory guide to CSS.

Here’s the default CSS for a WPForms submit button, as well as comments to note what each line of CSS does:

.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

You can change any of these values to style the button differently. As an example, let’s start by giving our button a yellow background.

The first step is to find the hex code for the color we want. htmlcolorcodes.com and Adobe Color CC are handy free tools for this.

Once we have the hex code for the shade of yellow we want, we can create our CSS:

.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    background-color: #FAF243 !important; /* Yellow background */
    color:#000 !important;
}

Next, you’ll need to add this CSS to your site. WordPress keeps the Additional CSS panel in one of two places, depending on the kind of theme you’re using:

• Classic themes: Go to Appearance » Customize and select Additional CSS.
• Block themes: WordPress hides the Customizer when a block theme is active, so you’ll add your CSS in the site editor instead. Go to Appearance » Editor and open Styles to find the Additional CSS option.

Here’s the Additional CSS panel in the Customizer, which is what you’ll see on a classic theme.

And here it is in the site editor, which is what you’ll see on a block theme.

Once you’ve opened the Additional CSS section, paste in your new CSS and save your changes.

Below is what our button will look like now with this CSS applied:

Customizing Hover Styles

CSS allows you to apply completely different styles when a cursor hovers over a button. This change in style helps user experience because it lets the user know that this object is clickable.

Below is the default CSS in WPForms when a button is hovered over. As noted in the comments, the background color becomes a little darker and the border color becomes a little lighter:

.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

You might notice that this is a lot less CSS than we saw for the button when it’s not hovered over. This is because CSS will apply all of the earlier CSS to your hovered button unless told otherwise.

If you leave the default styles, for example, the text color will remain black when the button is hovered over. This is because the button’s text color would normally be black, and we haven’t told it to change upon hover.

As with the previous custom CSS example, you can change any of these values to style the button’s hover styles differently. For our example, we’ll give the button a darker yellow background when hovered over.

.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #e5da00 !important; /* Darker yellow background */
}

Here’s what the button will look like with the CSS applied:

Customizing Focus Styles

Just as you can set a hover style for your button with CSS, you can also set a focus style. The focus style is applied when the button is the focal point of any in-page events. For example, if you use the tab key to navigate the page.

Using a focus style improves user experience, especially useful for users who rely on keyboard navigation to browse the web.

Here is the default CSS in WPForms when a button is in focus:

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: #ddd;
    border: 1px solid #ccc;
    cursor: pointer;
}

In this case, the background-color is a slightly darker shade than the default, and the border is also subtly changed. This lets the user know that the button is now in focus and will receive any relevant keypresses.

For this example, we’re going to use a color other than yellow, to make the focus style distinct from the hover style.

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: #80ccf6 !important;
}

With this custom CSS applied, here’s what the button will look like when in focus:

Example CSS

Now that we’ve covered the basics, let’s go through a complete example of custom CSS for a submit button.

Here’s the CSS we’ll add for this example, which includes style changes for both hovering, and focusing:

/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    padding: 15px !important; /* Increase distance between text and border */
    width: 100% !important; /* Make the button full-width */
    font-size: 1.5em !important; /* Increase text size */
    background-color: #af0000 !important; /* Red background */
    color: #fff !important; /* White text */
    border: 8px double #860b0b !important; /* Dark red, double-line border */
}

/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
    background-color: #860b0b !important; /* Dark red background */
    border: 8px double #af0000 !important; /* Red, double-line border */
}

/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
    background-color: red !important; /* Dark red background */
    border: 8px double #860b0b !important; /* Red, double-line border */
}

Below is what our button will look like now with this CSS applied:

When hovered over:

And when focused. Remember, the only changes are the background and border colors:

Frequently Asked Questions

These are answers to some top questions about customizing the submit button in WPForms.

Can I change the size and padding of the submit button?

Partly. In the form builder, go to Settings » Themes » Button Styles and use the Size setting to switch between Small, Medium, and Large. That’s enough for most sites, and it works in WPForms Lite too.

If you need an exact text size or specific padding values, you’ll need to add a CSS snippet. Here’s an example.

div.wpforms-container-full .wpforms-form button[type=submit] {
    font-size: 18px !important; /* Text size */
    padding: 14px 40px !important; /* Space inside the button */
}

Can I change the button position so it displays in the center?

Button alignment isn’t available in the form builder yet, so you’ll need a small CSS snippet for this. By default, WPForms submit buttons are aligned to the left side of the page. To center the button, add the following code snippet to your site.

div.wpforms-container-full .wpforms-form button[type=submit] {
    margin: 0 auto !important;
    display: block !important;
}

The CSS code above will apply the style to all forms on your site. If you’d like to apply the style on a specific form, you’ll need to use the #wpforms-submit-FORM-ID CSS selector. Here is an example snippet.

#wpforms-submit-FORM-ID {
     margin: 0 auto !important;
     display: block !important;
}

Here is how the button will look on the frontend.

If you’d like to make the button display at full width, use the width: 100% CSS property. Here is an updated version of the snippet above.

div.wpforms-container-full .wpforms-form button[type=submit] {
     margin: 0 auto !important;
     display: block !important;
     width: 100% !important;
}

Full-width button display.

Can I customize the WPForms submit button in Elementor Builder?

Yes. WPForms integrates with Elementor to provide form styling directly within the Elementor Builder. You can customize your form fields, labels, colors, and the submit button.

To learn more about customizing your form in Elementor, see our guide on adding WPForms to an Elementor page.

Can I style the submit button in Divi?

Yes, though you’ll style it in the WPForms form builder rather than inside Divi. The WPForms module doesn’t include form styling controls, so its settings only cover Divi’s own options like sizing and spacing.

Set your button styles under Settings » Themes in the form builder, and they’ll carry through to your form on the Divi page. This works whether you embed your form with the WPForms module or the shortcode. For more details, see our guide on adding WPForms to a Divi page.

How do I hide the submit button on my form?

Hiding the submit button is particularly helpful if you’re using the Calculations addon to build calculators on your site. To hide your form’s submit button, you’ll need to add a custom CSS snippet to your site. The code snippet is available in the WPForms code snippets library.

For details on how to import this snippet to your site, be sure to check out our guide on hiding the submit button.

That’s it! You can now customize your form’s submit button, either in the form builder or with your own CSS.

Next, would you like to style the rest of your form to match? Check out our full guide to styling your forms to see all the options available in the form builder.