如何隐藏表单提交目标URL，确保数据提交至autoresponder并跳转？

There are two reliable ways to achieve your goal—using an invisible iframe (great for avoiding cross-origin issues) or the Fetch API (a modern async approach). Let’s break down both options:

Option 1: Invisible Iframe Method (No CORS Headaches) #

This method submits the form to a hidden iframe, so your main page’s URL never changes. We’ll then redirect to your thank-you page once the submission completes.

Step-by-Step Code: #

1. Add an invisible iframe to your page (place it right before the closing </body> tag):

<iframe name="hiddenFrame" id="hiddenFrame" style="display: none;"></iframe>

2. Modify your form to target this iframe, and add a listener to trigger the redirect:

<form name="info_form" action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post" target="hiddenFrame" onsubmit="setupRedirect()">
  <input placeholder="Enter Your Name..." type="text" name="name" id="awf_field_name" class="elInputIEmail" data-type="extra"/>
  <input placeholder="Enter Your Email..." type="email" name="email" id="awf_field_email" class="elInputIEmail" data-type="extra"/>
  <!-- Campaign token -->
  <input type="hidden" name="campaign_token" value="18oKuC" />
  <input type="hidden" name="thankyou_url" value="https://www.example.com/watch-video/"/>
  <input type="hidden" name="forward_data" value="" />
  <input type="hidden" name="start_day" value="0" />
  <input name="submit" id="af-submit-image-416906520" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="http://www.example.com/Images/button-400.jpg" />
</form>

<script>
function setupRedirect() {
  // Wait for the iframe to finish loading after submission
  document.getElementById('hiddenFrame').onload = function() {
    // Redirect to your thank-you page
    window.location.href = "https://www.example.com/watch-video/";
  };
}
</script>

Quick note: I fixed the duplicate id="awf_field" on your inputs—HTML requires unique IDs, so I updated them to awf_field_name and awf_field_email.

Option 2: Fetch API (Modern Async Approach) #

This uses JavaScript to send form data in the background. However, you’ll need to confirm if GetResponse allows cross-origin requests (CORS) from your domain—some autoresponders block this for security.

Code Example: #

<form name="info_form" id="info_form" accept-charset="utf-8" method="post">
  <input placeholder="Enter Your Name..." type="text" name="name" id="awf_field_name" class="elInputIEmail" data-type="extra"/>
  <input placeholder="Enter Your Email..." type="email" name="email" id="awf_field_email" class="elInputIEmail" data-type="extra"/>
  <!-- Campaign token -->
  <input type="hidden" name="campaign_token" value="18oKuC" />
  <input type="hidden" name="thankyou_url" value="https://www.example.com/watch-video/"/>
  <input type="hidden" name="forward_data" value="" />
  <input type="hidden" name="start_day" value="0" />
  <input name="submit" id="af-submit-image-416906520" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="http://www.example.com/Images/button-400.jpg" />
</form>

<script>
document.getElementById('info_form').addEventListener('submit', async function(e) {
  e.preventDefault(); // Stop the default form submission behavior
  
  const formData = new FormData(this);
  const thankYouUrl = this.querySelector('[name="thankyou_url"]').value;
  
  try {
    const response = await fetch('https://app.getresponse.com/add_subscriber.html', {
      method: 'POST',
      body: formData,
      mode: 'no-cors' // Use this if CORS is blocked (you won't see success details)
    });
    
    // Redirect to thank-you page after submission attempt
    window.location.href = thankYouUrl;
  } catch (error) {
    console.error('Submission failed:', error);
    // Optional: Show an error message to your users here
  }
});
</script>

If GetResponse allows CORS from your domain, remove mode: 'no-cors' and add a check like if (response.ok) before redirecting to confirm submission success.

Why Your Original Attempt Failed #

Adding type="hidden" to the <form> tag is invalid HTML—forms don’t have a type attribute. That’s why your form skipped submitting data and jumped straight to the thank-you page.

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