按钮类型提交刷新页面而不是触发ajax网络请求

Question

我有以下表格：

 <div class="contact-form-container" action="https://www.serverlessform.com/f/8b24308d" method="POST">
    <form>
      <input type="hidden" name="utf8" value="✓">
      <label>
        <p class="contact-label">Your email:</p>
        <input placeholder="example@host.com" type="email" id="email" name="email">
      </label>
      <label>
        <p class="contact-label">Text:</p>
        <textarea placeholder="Your message here..." id="text" name="text"></textarea>
      </label>
      <button id="contact-submit" type="submit">SEND</button>
    </form>
  </div>

以及提交按钮的以下脚本：

  $('#contact-submit').on('click', function () {
    $.ajax({
      url: 'https://www.serverlessform.com/f/8b24308d',
      method: 'POST',
      success: function (response) {
        // { submission: { ...fields...}, auto_response: { ...body...}
        console.log(response);
      },
    });
  });

现在，当我将数据输入表单并单击按钮时，我的页面将刷新，网络请求将被取消。我可以在chrome中看到网络选项卡中记录的实际请求，但不是发送它，而是刷新页面并取消请求。

我在无服务器表单上构建了以下示例中的表单和ajax调用：

<form action="https://www.serverlessform.com/f/8b24308d" method="POST">
  <input type="hidden" name="utf8" value="✓">
  <label>Email
    <input type="email" id="email" name="email">
  </label>
  <button type="submit">Submit</button>
</form>

<button id="btn-demo" type="submit">AJAX Button</button>
<script>
$('#btn-demo').on('click', function () {
  $.ajax({
    url: 'https://www.serverlessform.com/f/8b24308d',
    method: 'POST',
    success: function (response) {
      // { submission: { ...fields...}, auto_response: { ...body...}
      console.dir(response);
    },
  });
});
</script>

因此，表单的预期行为是向serverlessform URL提交POST请求。而是页面刷新并取消网络请求。

我做错了什么？