Introduction
Embedding a single form multiple times per page can cause the form submission to hang, the wrong form to be submitted when you use the submit button on another, or cause you to tab between separate forms on a page.
There are other reasons why your form won’t submit as well. Those are covered in our Theme and Plugin Conflict testing guide.
I get an error when submitting a form
Common symptoms for embedding the same form multiple times per page:
- The form won’t submit, and the spinner/loading indicator just keeps spinning
- The wrong form is submitted when you use the submit button of another form
- You get stuck tabbing between forms on a page
- There’s an issue submitting a form that is integrated with a payment add-on
- There’s an issue with a CAPTCHA field or the reCAPTCHA Add-On
All these symptoms can be caused by adding a single form more than once to the page. In addition to adding a form to the page with the form block, shortcode, widget, or function call, using a modal, tabbed interface, accordion, or slider to embed the same form more than once on a single page is not supported and will cause problems.
How can I add the same form more than once to a page?
If you must show the same form more than once on a single page, you can create duplicate forms for each placement on the page. You can duplicate the form from the Forms list page and embed each unique copy once.
Why does this happen?
Every form created by Gravity Forms has a unique ID for the HTML element id attribute. Because this value must be unique within the HTML document (source), you cannot embed the same form multiple times within one document. When multiple elements on the page share the same ID, it will confuse browsers and JavaScript that rely on targeting elements by ID, leading to issues such as:
- JavaScript Conflicts: Scripts may apply actions to the first element with the ID and ignore others, causing only one form to function properly.
- Styling Issues: CSS targeting a specific ID might not apply correctly, resulting in inconsistent styling across the forms.
- Form Submission Problems: Submitting one form might inadvertently submit another, or data from one form could be sent in another’s place.
If you need assistance troubleshooting a form submission issue on your site, please contact support.