How to disable form submit button

Design help Custom code
1

I am using a form submit + reCAPTCHA as a ‘gateway’ to the next page, rather than how forms are typically used, to collect information from site visitors.

The visitor simply selects they are not a bot, and click the ‘get started button’ that takes you to another page. The trouble is, the submit button is still acting and sending me email notifications that a form was submitted (which is a problem as my plan only allows 1000 submissions/month, limiting how many times the page can be accessed).

  1. Is there a better way to make users use reCAPTCHA before being redirected to a different page?
  2. How can I prevent the form from submitting on click, but still take me to the next page after proving I’m not a bot, so that I’m don’t have a hard limit on how many times the next page can be accessed?

Here is my site Read-Only: LINK

2

I’ve tried the following two blocks of code in my footer custom code but neither have stopped the email notifications/prevented submission.

<script>
Webflow.push(function() {
  // Disable submitting form fields during development
  $('do-not-submit').submit(function() {
    alert('Form submissions have been disabled.');
    return false;
  });
});
</script>

<script>
    // disable search from submitting
    $('#do-not-submit').on('keyup keypress', function(e) {
      const keyCode = e.keyCode || e.which;
      if (keyCode === 13) {
        e.preventDefault();
        return false;
      }
	});
</script>
1 Like
3

Also wondering about this

5

+1 on this.

Similar to the form below, I want to redirect the user to a new page on “form submission”, but I don’t want it to be an actual form submission.

Screenshot 2023-08-05 at 18.06.55
Screenshot 2023-08-05 at 18.06.551856×950 140 KB

FYI: Here is a link to my website, TransferHero, where you can see a similar form in action (with the desired functionality in place). It is currently built using bubble.io, but I want to rebuild it in Webflow.

6

In your form settings, change the method to GET and the action to point to the page you want the user sent to.

This will come through on the querystring something like this;

/results?amount=1000&currency=USD&to=CAD

From there, you’d extract the data using custom code and use it how you like.

An alternative way is to use custom code on the form page as well- capture the form submit, store the results in webStorage, change the browser location, load the results…

7

Thanks for your suggestion! I’m new to Webflow, so maybe I’m missing something here, but wouldn’t that still count towards my form submission quota? —> not a viable solution for me.

This is my current work-around where I’ve added a regular button to my form so that I can use the input, select, dropdown HTML elements but not submit my every “submit” as an actual submit.

<script>
document.addEventListener("DOMContentLoaded", function() {
  var button = document.getElementById("btn-id");
  var input = document.getElementById("input-id")
  button.addEventListener("click", function(event) {
    event.preventDefault();
    var inputValue = input.value;
    window.location.href = `https://url.com/${inputValue}`;
  });
});
</script>
8

No. Any time you specify an action, you are submitting your form to the specified handler, and Webflow’s is not involved. Therefore, there is no Webflow form submission event.

However that means you need your own submission handler, your own email notifications, your own database, etc. depending on what you want to do with that submission.

Here, all you want is to get that data from page A to page B, so we’re using GET so that it will pass your values on the querystring.

9

Ha, gotcha, you did not need to do that, but it’s excellent thinking. Unfortunately, there might be a loophole there with implicit submit. If you have only one input field, and you press enter while in that input field, some browsers will submit the form. I know Chrome and Firefox do this. If you add a second input field, even if it’s not visible, I suspect it would prevent that behavior.