How to show your own message when a form has been submitted

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.

Our javascript looks like this:

<script>
  $(function() {

    var $form = $('#form-signup');
    var $formWrapper = $('.formbackend-form-wrapper');


    $form.on("submit", function(e) {
      var formUrl = $(this).attr('action');

      // We don't want the page to submit and refresh
      e.preventDefault();

      // Let's show the user a message once they hit submit
      $formWrapper.html("Submitting the form");

      // POST the request to Formbackend (the formUrl value)
      $.ajax({
        url: formUrl,
        type: 'POST',
        headers : {
          'accept' : 'application/javascript',
        },
        // We serialize the form fields
        data: $form.serialize()
      }).done(function(submissionMessage) {
        // submissionMessage is the "Submission Text" you
        // set in Formbackend
        // - default: "We received your submission"
        $formWrapper.html(submissionMessage)
      }).fail(function() {
        $formWrapper.html("Something went wrong :(")
      }).always(function() {
        // This always happens
      });
    });

  });
</script>

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.

After the $.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 :)