如何通过jQuery点击iframe外按钮提交Formsite内嵌表单？

I've run into this exact issue with Formsite embeds before—here's how to get your external button to submit the form properly:

1. Wait for the Iframe to Fully Load #

The biggest gotcha is trying to access the iframe's content before it's finished loading. Wrap your click handler inside the iframe's load event to ensure the form is ready when you try to submit it:

$(document).ready(function() {
  const formcta = $("#formcta");
  const formIframe = $("#frame-one551172803");

  // Wait for the iframe to load completely before attaching the click handler
  formIframe.on('load', function() {
    formcta.click(function() {
      // Grab the form inside the iframe and submit it
      $(this).contents().find('#FSForm').submit();
    });
  });
});

2. Verify Your Selectors Are Correct #

Before diving deeper, double-check these in your browser's dev tools (right-click > Inspect):

• The iframe's ID is definitely frame-one551172803—Formsite's embed tool sometimes generates slightly different IDs based on your form settings.
• The form inside the iframe has the ID FSForm (your provided code confirms this, but it's always good to verify the rendered HTML).

3. Fix Cross-Origin Blocking (Most Common Scenario) #

If your website and the Formsite iframe are on different domains (which is almost always the case), the browser's Same-Origin Policy will block direct access to the iframe's contents. To get around this, use postMessage to send a signal from the parent page to the iframe:

Parent Page Code #

Update your jQuery to send a message when the external button is clicked:

$(document).ready(function() {
  const formcta = $("#formcta");
  const formIframe = $("#frame-one551172803")[0]; // Need the raw DOM element for contentWindow

  formcta.click(function() {
    // Send a "submitForm" message to the iframe—replace the origin with your Formsite domain
    formIframe.contentWindow.postMessage('submitForm', 'https://fs4.formsite.com');
  });
});

Iframe Side Setup #

You'll need to add a listener inside the Formsite form to act on that message. Since you can't edit the Formsite form directly, check Formsite's embed documentation for built-in methods to trigger submission (they often have an API for this). If you can add custom scripts in your Formsite form settings, paste this:

window.addEventListener('message', function(event) {
  // Only respond to messages from your parent website for security
  if (event.origin === 'https://your-website-domain.com' && event.data === 'submitForm') {
    document.getElementById('FSForm').submit();
  }
});

4. Trigger the Submit Button Directly (If Needed) #

Formsite uses a custom submit handler (Vromansys.Form.processSubmit(this)). Calling .submit() on the form should trigger this, but if it doesn't, try simulating a click on the submit button instead:

// Inside the iframe load event handler
$(this).contents().find('#FSsubmit').click();

This targets the submit button with ID FSsubmit (from your form code) and triggers a click, which will run Formsite's built-in validation and submission logic.

内容的提问来源于stack exchange，提问作者Jack