How to Customize the Submit Button in Gator Forms

Yes, it is possible to customize the “Submit” button for your form.

This image below show the default “Submit” button.

  • Go to the WordPress admin area and edit your Gator Form.

First, you can customize the text in the button.

  • Click the “Fields” tab.
  • Click the pencil icon for the Submit button row.
  • Change the text on the right side of the screen.

Now let’s change the color of the button.

  • Click “Theme” and then “Theme Customizer”.

  • Go to the “Buttons” area of the customizer:

  •  Change the color of these buttons to meet your needs:

  • Save your form and visit the front of your site. You’ll see your updated form and Submit button:

Customizing the button further with CSS

The CSS for the Gator Forms buttons is in this folder: /wp-content/plugins/pwebcontact/media/css/themes/.

For example, if you’re using the Twenty Seventeen theme in Gator Forms, you’ll find the button CSS in the twenty-seventeen.css file. If you want to modify this code, we recommend that you override this CSS in your main WordPress theme’s CSS file.

form.pwebcontact-form button,
form.pwebcontact-form .btn {
    padding: 0.8em 1.8em;
    text-shadow: none !important;
    font-weight: 800;
}

form.pwebcontact-form button[type="submit"].btn {
    padding: 1em 2em;
}

form.pwebcontact-form button:hover,
form.pwebcontact-form button:focus,
form.pwebcontact-form button:active,
form.pwebcontact-form .btn:hover,
form.pwebcontact-form .btn:focus,
form.pwebcontact-form .btn:active {
    background: #767676 !important;
    border-color: #767676 !important;
}

in FieldsStyles

Related Articles

Start today!

[i]
[i]