Styling the submit button

Get Help
1

Hello, I’ve looked at many posts here and have tried applying the code but it doesnt seem to work to change the colour of the submit form. Can someone help changing it here: Donate - Tasneem Institute

2

To change the color of the Gravity Forms submit button on the Donate - [Tasneem Institute] page, you can use custom CSS. Here’s a step-by-step solution:

  1. Identify the Form Button Class
    Gravity Forms typically uses the class .gform_button for the submit button. If a custom theme or styling is applied, inspect the button using the browser developer tools (F12 > Inspect Element) to find the correct class. Here is a screenshot for your reference: Screenshot by Lightshot

  2. Add Custom CSS
    Place the following CSS code in Appearance > Customize > Additional CSS or inside your theme’s stylesheet (style.css):

/* Change Gravity Forms Submit Button Color */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer input[type="button"],
body .gform_wrapper .gform_page_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="button"] {
    background-color: #4BA59F !important; /* Change this to your desired color */
    color: #ffffff !important; /* Text color */
    border: none !important;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

/* Hover Effect */
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer input[type="button"]:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer input[type="button"]:hover {
    background-color: #33706c !important; /* Darker shade on hover */
}

So the button will look like the following screenshot: Screenshot by Lightshot

  1. Clear Cache
  • If you’re using a caching plugin, clear the cache.
  • Hard refresh (Ctrl + Shift + R on Windows or Cmd + Shift + R on Mac).
  1. Alternative: Using Gravity Forms Custom CSS Class
    If you have multiple forms and want to style only this specific one, add a custom class to the Form Settings > Form CSS Class (e.g., donate-form) and modify the CSS like this:
.donate-form .gform_footer input[type="submit"] {
    background-color: #4BA59F !important;
}

Let me know if you need further tweaks!

3

All you need is the following CSS included on your site.

.gform-theme {
  --gf-ctrl-btn-bg-color-primary: var(--wd-primary-color);
  --gf-ctrl-btn-bg-color-hover-primary: var(--wd-primary-color);
  --gf-ctrl-btn-shadow-hover: inset 0 0 0 1000px rgba(0,0,0,0.1);
}

Since you are using the WoodMart theme, navigate to the Theme Settings section in the WordPress admin area and save the above CSS. Once done, Gravity Forms will be auto-configured to use your theme’s primary color instead of the default blue.