如何在不重定向页面的情况下使用 formsubmit.co 提交 HTML 表单？答案

【问题标题】：How do I submit an HTML form using formsubmit.co without redirection of the page?如何在不重定向页面的情况下使用 formsubmit.co 提交 HTML 表单？
【发布时间】：2021-09-12 00:20:17
【问题描述】：

我一直在尝试用 HTML（引导程序）制作一个表单，将信息发送到我的邮件 ID。为此，我使用formsubmit。

由于某种原因，在提交表单时，它会将页面重定向到“成功”页面。我确实意识到有一种方法可以将其重定向到不同的页面，但我宁愿让表单所在的部分消失并显示“成功”部分。作为参考，这是我的表单代码：

<section id="get-started" class="get-started">
  <div class="container">
    <div class="row text-center">
      <h1 class="display-3 fw-bold text-capitalize">Get started</h1>
      <div class="heading-line"></div>
      <!-- <p class="lh-lg">
        can write something here later
      </p> -->
    </div>

    <!-- START THE CTA CONTENT  -->
    <div class="row text-white">
      <div class="col-12 col-lg-6 gradient shadow p-3">
        <div class="cta-info w-100">
          <h4 class="display-4 fw-bold">Sign up for Beta!</h4>
          <p class="lh-lg">
            Join the waitlist for the beta program. Limited spots available!         </p>
          <h3 class="display-3--brief">What will be the next step?</h3>
          <ul class="cta-info__list">
            <li>Enter your details.</li>
            <li>Wait to be accepted into the beta program.</li>
            <li>Enjoy using Clickytize.</li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-lg-6 bg-white shadow p-3">
        <div class="form w-100 pb-2">
          <h4 class="display-3--title mb-5">Join the waitlist!</h4>
          <form action="https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a" method="POST" class="row">
            <input type="hidden" name="_captcha" value="false">

            <div class="col-lg-6 col-md mb-3">
              <input type="text" placeholder="First Name" id="inputFirstName" name="firstName" class="shadow form-control form-control-lg">
            </div>
            <div class="col-lg-6 col-md mb-3">
              <input type="text" placeholder="Last Name" id="inputLastName" name="lastName" class="shadow form-control form-control-lg">
            </div>
            <div class="col-lg-12 mb-3">
              <input type="email" placeholder="email address" id="inputEmail" name="emailId" class="shadow form-control form-control-lg">
            </div>
            <div class="col-lg-12 mb-3">
              <textarea name="message" placeholder="Link your social media profile" id="message" name="message" class="shadow form-control form-control-lg"></textarea>
            </div>
            <div class="text-center d-grid mt-1">
              <button type="submit" class="btn btn-primary rounded-pill pt-3 pb-3">
                submit
                <i class="fas fa-paper-plane"></i>
              </button>

              <script>
                form.onSubmit= (event)=>{
                  event.preventDefault();
                }

              </script>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

标签： javascript html bootstrap-4

【解决方案1】：

如果您想防止页面重定向并提交表单，那么您需要注意使用 javascript 提交表单数据。

首先在form 标签中添加onsubmit 事件属性，如下所示：

<form  method="POST" class="row my-form" onsubmit="return submitForm()">

我们可以从form 标记中删除action 属性。

在 Javascript 中：

function submitForm() {
        
        const form = document.querySelector('.my-form')
        const formData = new FormData(form)
        const url = 'https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a'
        fetch(
          url,
          {
            method: 'POST',
            body: formData
          }
        )
        return false
    }

我们正在使用本机 fetch API 将数据发送到 form-data 到端点。我们还使用FormData API 来创建inputs 形式的对象

返回false 可防止页面重新加载。

阅读更多： Fetch API FormData API

【讨论】：