Webflow

1. Copy your form's action URL.
2. Paste the action URL into Webflow's action field in the form element’s settings in the Designer.
3. Copy-paste the code below into Project Settings > Custom Code > Footer Code.

<!-- Project Settings > Custom Code > Footer Code -->

<script type="text/javascript">
  $('form[action^="https://submit-form.com"]').each(function (i, el) {
    var form = $(el);
    form.submit(function (e) {
      e.preventDefault();
      form = $(e.target);
      var action = form.attr("action");
      var data = form.serialize();
      $.ajax({
        url: action,
        method: "POST",
        data: data,
        dataType: "json",
        success: function () {
          var parent = $(form.parent());
          parent.children("form").css("display", "none");
          parent.children(".w-form-done").css("display", "block");
        },
        error: function () {
          var parent = $(form.parent());
          parent.find(".w-form-fail").css("display", "block");
        },
      });
    });
  });
</script>

TIP

Webflow tips and tricks

• How to submit Webflow forms to your own backend (opens new window)
• How to disable the submit button while a form is submitting in Webflow (opens new window)
• How to pre-fill Webflow form input fields at page load (opens new window)
• How to clear all fields of a Webflow form (opens new window)
• How to automatically disable a Webflow button or input (opens new window)

With Botpoison

<!-- Project Settings > Custom Code > Footer Code -->

<script src="https://unpkg.com/@botpoison/browser" async></script>

<script type="text/javascript">
  $('form[action^="https://submit-form.com"]').each(function (i, el) {
    var form = $(el);
    form.submit(function (e) {
      e.preventDefault();
      form = $(e.target);
      var action = form.attr("action");
      var botpoison = new Botpoison({
        publicKey: "your-public-key",
      });
      botpoison
        .challenge()
        .then(function (result) {
          var data = form.serialize();
          data += "&_botpoison=" + result.solution;
          $.ajax({
            url: action,
            method: "POST",
            data: data,
            dataType: "json",
            success: function () {
              var parent = $(form.parent());
              parent.children("form").css("display", "none");
              parent.children(".w-form-done").css("display", "block");
            },
            error: function () {
              var parent = $(form.parent());
              parent.find(".w-form-fail").css("display", "block");
            },
          });
        })
        .catch(function () {
          var parent = $(form.parent());
          parent.find(".w-form-fail").css("display", "block");
        });
    });
  });
</script>