WPForms Documentation

Documentation, Reference Materials and Tutorials for WPForms

How to Customize the Submit Button

Would you like to customize the submit button to better fit your site’s design or personality? The submit button of your form can play an important role in submission rates. In this guide, we’ll cover how to customize the text and style of your form’s submit button.

First things first. To get started, be sure to create and publish a form. Once that’s ready, let’s get started!

Here are the topics we’ll cover:


Change the Text of the Submit Button

To change the ‘Submit’ text of your form’s button, start by opening your form builder.

From within the builder, go to Settings » General. Here, you should see two fields for 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 pulled up

submit button processing

You can go ahead and change this text however you’d like.

Customizing the submit button text

Style the Submit Button Using CSS

CSS provides incredible flexibility to customize the submit button, as well as any other aspect of your form.

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

If you would prefer to style your form but skip the code, consider checking out our integration with CSS Hero.

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

div.wpforms-container-full .wpforms-form input[type=submit], 
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* 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 CSS 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 or Adobe Color CC are a each handy free tools for this.

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

div.wpforms-container-full .wpforms-form input[type=submit], 
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #FAF243; /* Yellow background */
}

Next, we need to add this CSS to our site. The simplest way to do this is by using the WordPress CSS Editor. To open this, go to Appearance » Customize and select Additional CSS.

Add custom CSS to WordPress

If you plan to create a bunch of custom CSS for your site, consider using child theme instead of the WordPress CSS Editor. This will help you keep larger amounts of code organized.

Once you’ve opened the Additional CSS section, you can paste in your new CSS, click the Save & Publish button, and you’re all set!

WordPress CSS editor

Is your new CSS not showing up on your site? Check out our tutorial on troubleshooting this issue.

How to Customize 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.

Here’s 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:

div.wpforms-container-full .wpforms-form input[type=submit]:hover, 
div.wpforms-container-full .wpforms-form input[type=submit]:active, 
div.wpforms-container-full .wpforms-form button[type=submit]:hover, 
div.wpforms-container-full .wpforms-form button[type=submit]:active, 
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, 
div.wpforms-container-full .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 white when the button is hovered over. This is because the button’s text color would normally be white, and we haven’t told it to change upon hover.

Example CSS

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

Note: The code below will change the submit button for all the forms on your site that were created with WPForms. If you wanted to style the submit button only on a single form, you’ll need to be sure to find the unique ID for that form.

For more details, see our complete guide to styling contact forms with CSS.

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

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

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

Here’s what our button will look like now, with this CSS applied:

New button CSS

And here’s what our button will look like when hovered over. Remember, the only changes are the background and border colors:

New button CSS on hover

That’s it! You can now customize your submit button using custom CSS.

Want more examples? Check out our tutorial with even more submit button CSS that you can copy and paste right into your site.