HTML表单提交后保留action地址，如何自定义重定向到指定页面？

首先修正你现有代码的规范问题：当前HTML存在表单嵌套的错误，外层已经定义了<form>标签，内层.signup容器中又嵌套了一层<form>，不符合HTML语法规范，会导致提交逻辑异常，需要先删除内层多余的form标签。

以下两种方案均保留原action属性不修改，满足数据提交要求： #

方案1：隐藏iframe提交（无JS依赖，兼容性最好） #

利用form的target属性将提交结果输出到隐藏iframe，不会触发当前页面跳转，操作步骤：

• 在页面任意位置添加一个隐藏的iframe，自定义name属性
• 将form的target属性值设置为上述iframe的name值
• 若需要提交完成后刷新/跳转页面，给form加onsubmit事件延迟触发即可

修改后的完整代码示例：

<!-- 新增隐藏iframe -->
<iframe name="form_hidden_target" style="display: none;"></iframe>

<!-- 仅修改form的target和新增onsubmit事件，action保留原有值不变 -->
<form action="你的原有action地址不要修改" method="post" target="form_hidden_target" onsubmit="setTimeout(function(){
  // 提交成功后刷新当前页，若要跳转指定页替换为 location.href = '你的指定页面地址'
  location.reload()
}, 1000)">
    <div class="card">
    <img alt="The Blogging Seed" src="https://s3.amazonaws.com/revue/profiles/images/000/255/495/thumb/TBs_trans_favicon.png?1620927094" style="background-color: #f9fafb00; border: 0px; box-sizing: border-box; font-size: 18px; height: 82px; vertical-align: middle;" />
    <h1>Subscribe to newsletter</h1>
       
<div class="signup">
    <input type="email" id="email-signup" placeholder="Enter your email here...." required name="entry.441329186">
    <input type="submit" value="Subscribe!" id="btn">
</div>
  </div>
</form>

方案2：JS异步提交（自定义性更强） #

如果不需要兼容特别老旧的浏览器，可以用fetch异步提交表单数据，完全不会触发页面跳转，代码示例：

<!-- 给form加自定义id，action属性保留原有值不变 -->
<form id="subscribe_form" action="你的原有action地址不要修改" method="post">
    <div class="card">
    <img alt="The Blogging Seed" src="https://s3.amazonaws.com/revue/profiles/images/000/255/495/thumb/TBs_trans_favicon.png?1620927094" style="background-color: #f9fafb00; border: 0px; box-sizing: border-box; font-size: 18px; height: 82px; vertical-align: middle;" />
    <h1>Subscribe to newsletter</h1>
       
<div class="signup">
    <input type="email" id="email-signup" placeholder="Enter your email here...." required name="entry.441329186">
    <input type="submit" value="Subscribe!" id="btn">
</div>
  </div>
</form>

<script>
const form = document.getElementById('subscribe_form')
form.addEventListener('submit', function(e) {
  // 阻止默认表单跳转行为
  e.preventDefault()
  // 收集表单数据
  const formData = new FormData(form)
  // 异步提交到原action地址
  fetch(form.action, {
    method: form.method,
    body: formData
  }).then(res => {
    // 提交成功后逻辑：刷新当前页
    location.reload()
    // 如需跳转指定页，替换上一行为：location.href = '你的指定页面地址'
  }).catch(err => {
    // 可自定义提交失败的提示逻辑，比如alert('订阅失败，请稍后重试')
  })
})
</script>

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