Note: These selectors apply only to forms using the Orbital theme. If you are using the Gravity Forms 2.5 theme, see the Legacy CSS Selectors documentation.
The submit button appears in the form footer (or at the end of the last row when set to inline). In Orbital, the text submit button uses primary button styling and receives the same CSS API variables as other primary buttons.
Note: Starting with Gravity Forms 3.0, form buttons use <button> elements instead of <input> elements. The submit control can be either a text button (button[type="submit"]) or an image button (button.gform_image_button wrapping an <img>), configured on the Submit field in the form editor.
Container
The submit button sits inside the form footer. For single-page forms, use .gform_footer; for multi-page forms, it appears in .gform_page_footer on the last page. When the submit location is set to inline, the button is rendered inside the submit field container at the end of the last row. This container uses a per-form ID on the front end: #field_submit_{form_id} (e.g. #field_submit_1 for form 1). It also carries the class .gfield--type-submit, which is the same across all forms. In the form editor, the container keeps the static ID #field_submit.
Submit Button (Text)
The text submit button uses primary button styling. It has the classes gform_button and button, and may include gform-button--width-full or grid span classes. In the form editor, the button may also include gform-theme-button. Override primary button variables on the form wrapper or footer scope.
ID: gform_submit_button_{form_id} (e.g. gform_submit_button_1 for form 1).
/* example: submit button – applies to all Orbital forms */
.gform-theme--framework .gform_footer button[type="submit"].gform_button,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_button {
--gf-ctrl-btn-bg-color-primary: #0096d6;
--gf-ctrl-btn-bg-color-hover-primary: #0077b3;
--gf-ctrl-btn-color-primary: #ffffff;
--gf-ctrl-btn-radius: 6px;
--gf-ctrl-btn-font-size: 16px;
--gf-ctrl-btn-font-weight: 600;
}
/* example: submit button – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_footer button[type="submit"].gform_button {
--gf-ctrl-btn-bg-color-primary: #1a365d;
--gf-ctrl-btn-bg-color-hover-primary: #2c5282;
--gf-ctrl-btn-color-primary: #ffffff;
}
Submit Button (Image)
When the submit type is set to Image, the control is a button[type="submit"] with the class gform_image_button, containing an <img> for the custom image. The framework applies a transparent background and minimal border styling. Use border, shadow, or other properties that complement the image. To style the image itself, target button.gform_image_button img.
ID: gform_submit_button_{form_id} (same as text submit).
/* example: image submit button – applies to all Orbital forms */
.gform-theme--framework .gform_footer button[type="submit"].gform_image_button,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_image_button {
border: 2px solid #e5e7eb;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* example: image submit button – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_footer button[type="submit"].gform_image_button {
border: none;
border-radius: 8px;
}
Inline Submit Button
When the submit location is set to “End of the last row”, the button appears in the submit field container rather than the footer. The container uses a per-form ID on the front end, #field_submit_{form_id} (e.g. #field_submit_1), and the class .gfield--type-submit. The inline button uses the classes gform-button and button (it does not use gform_button). The same primary button variables apply.
/* example: inline submit button – applies to all Orbital forms */
.gform-theme--framework .gfield--type-submit button[type="submit"].button {
--gf-ctrl-btn-bg-color-primary: #4f46e5;
--gf-ctrl-btn-bg-color-hover-primary: #4338ca;
--gf-ctrl-btn-color-primary: #ffffff;
}
/* example: inline submit – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 #field_submit_112 button[type="submit"] {
--gf-ctrl-btn-font-size: 14px;
--gf-ctrl-btn-radius: 4px;
}
Submission Spinner
Starting with Gravity Forms 3.0, the form submission spinner displays inside the submit button instead of next to it. While submitting, the button receives the class gform-has-spinner, and a <span class="gform-loader"> is appended inside the button.
The gform_ajax_spinner_url, gform_spinner_url, and gform_always_show_spinner filters have been removed. Use CSS to customize or hide the spinner.
/* example: customize spinner colors – applies to all Orbital forms */
.gform-theme--framework {
--gf-form-spinner-fg-color: #ffffff;
--gf-form-spinner-bg-color: rgba(255, 255, 255, 0.35);
}
/* example: hide the spinner – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 button.gform-has-spinner .gform-loader {
display: none;
}
Use Case Examples
Basic Styling
/* example: submit button colors and padding – applies to all Orbital forms */
.gform-theme--framework .gform_footer button[type="submit"].gform_button,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_button {
--gf-ctrl-btn-bg-color-primary: #0096d6;
--gf-ctrl-btn-bg-color-hover-primary: #0077b3;
--gf-ctrl-btn-color-primary: #ffffff;
--gf-ctrl-btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
--gf-ctrl-btn-radius: 4px;
--gf-ctrl-btn-font-size: 14px;
--gf-ctrl-btn-padding-x: 20px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_footer button[type="submit"].gform_button {
--gf-ctrl-btn-bg-color-primary: #059669;
--gf-ctrl-btn-color-primary: #ffffff;
}
Hover State
Override hover variables rather than targeting :hover directly.
/* example: submit button hover – applies to all Orbital forms */
.gform-theme--framework .gform_footer button[type="submit"].gform_button,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_button {
--gf-ctrl-btn-bg-color-hover-primary: #444444;
--gf-ctrl-btn-border-color-hover-primary: rgba(114, 114, 114, 0.6);
--gf-ctrl-btn-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.15);
}
Active State
For an active/pressed effect, use direct properties only when no variable exists.
/* example: submit button active state – applies to all Orbital forms */
.gform-theme--framework .gform_footer button[type="submit"].gform_button:active,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_button:active {
transform: translateY(1px);
}
Hidden Button
Using display: none on the submit button causes the form submission handler to abort. Use visibility and positioning instead.
/* example: hide submit button visually – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_footer button[type="submit"].gform_button {
visibility: hidden !important;
position: absolute !important;
left: -9999px !important;
}
Full-Width Submit Button
When the button width is set to “Fill Container” in the Submit field settings, the class gform-button--width-full is applied. To force full-width via CSS:
/* example: full-width submit button – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_footer button[type="submit"].gform_button {
width: 100%;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.