Sometimes you don't want the form to redirect to a new page, but instead just show an inline message once the form has been submitted.
For this example we'll use jQuery.
We'll have a form that looks like this:
<div class="formbackend-form-wrapper"><form action="https://www.formbackend.com/f/kcsfk4qr" method="post" id="form-signup"><label>Name</label><input type="text" name="name" minlength=2 required><label>Email</label><input type="email" name="email" required><button type="submit">Submit</button></form></div>
It's important to notice that we've wrapped our form in a
div - we're doing this because we want to have the form disappear once it has been submitted.
There's a few things going on here. As you can see we've set up an eventhandler that listens for the
submit event on the form. So when someone clicks on the submit button, we catch that and do something.
First we store the
formUrl which is the url the form points to (we later use that in the ajax call). We then have the
e.preventDefault() line, that prevents the browser from submitting the form - since we're doing this with AJAX a few lines down.
We then take the html within the
$formWrapper and replace that with "Submitting the form" - this is to show the user a message that the form is submitting.
$.ajax call we have a
done(...) callback - in there we take what the server returns to us (the Submission text we saved as part of the form in FormBackend) and replaces the
$formWrapper html with that message.
You can of course do it your own way and style it as you want :)