How to Create Custom Submit Buttons For Your Gravity Forms And Place Them Anywhere

There are plenty of reasons why you might want to create your own custom Gravity Forms submit buttons – from simply wanting more control over style and graphics to being able to disconnect your submit button from the the form container itself and place that button anywhere on your page. 

This is especially useful when creating mini-applications using Gravity Forms (as you know, I’m a huge fan of this). So in this tutorial we’ll look at an incredibly simple way to create your own Gravity Forms submit buttons (using your favorite page builder) all based on tweaking some official Gravity Forms documentation.

Step 1: Create a custom attribute for your button adding an onclick function

Name = onclick
Value = document.getElementById(‘gform_submit_button_123’).click();

In a nutshell this will look like this:
Note: Be sure to replace the 123 with whatever your form ID is.

onclick="document.getElementById('gform_submit_button_123').click();"

Step 2: Hide the default button. We don’t want to use display: none as this will not work. The default submit button needs to remain active and visible so that our new button can simulate a click. Instead let’s use something like:

Again Note: Be sure to replace the 123 with whatever your form ID is.

#gform_wrapper_123 .gform_footer { 
visibility: hidden; 
position: absolute; 
left: -100vw;
 }

Step 3 (Optional): If your form redirects to a new page such as a thank you page or something similar than you don’t need to worry about step 3 as a whole new page is going to lead. That said, If you are using ajax submit, you’ll want to hide your custom button when the ajax confirmation message is displayed on screen. To do this, we’ll use a small javascript snippet that simply looks for the ajax confirmation class and then targets a custom class with display: none.

Add a custom class to your button (or container) such as .gf-custom-submit

Then add this javascript to your page:

  document.addEventListener("DOMContentLoaded", function () {
    // Check if the .gform_confirmation_message class is present
    const confirmationMessage = document.querySelector(".gform_confirmation_message");

    if (confirmationMessage) {
      // If the confirmation message is present, hide the button with class .gf-custom-submit or whatever your custom class is that you assigned
      const customSubmitButton = document.querySelector(".gf-custom-submit");
      if (customSubmitButton) {
        customSubmitButton.style.display = "none";
      }
    }
  });

As always, I hope you have found this tutorial useful. Here is a video walkthrough of the process as well.

Gravity Forms Docs: https://docs.gravityforms.com/adding-an-inline-submit-button-in-gravity-forms-2-5/#h-steps