Simple contact form using jQuery AJAX

The form in this example is submitted using AJAX (JavaScript) and therefor doesn’t result in a page refresh.

HTML

Here’s the HTML for the form

<h1 class="text-xl text-gray-800 font-semibold mb-2">
  Simple contact form (with AJAX)
</h1>
<p class="mb-6 text-gray-600 w-2/3 leading-normal">
  This form uses AJAX to submit to FormBackend. It replaces the form container with the submission text set on the form in FormBackend - and it adds
  one of the values submitted with the form. End result is a green box that says: <span class="bg-indigo-100 px-1">Thank you for your submission, NAME!</span>
</p>. Try submitting it and see! :)

<div id="form-container">
  <form action="https://www.formbackend.com/f/2c6c074cd2b9de69" method="POST" id="form-contact">
    <div class="mb-3">
      <label for="name" class="font-bold uppercase text-gray-600 block tracking-wide text-sm mb-1">Name</label>
      <input type="text" id="name" name="name" class="bg-gray-300 rounded p-2 text-gray-600 focus:shadow-outline focus:outline-none" required>
    </div>

    <div class="mb-3">
      <label for="email" class="font-bold uppercase text-gray-600 block tracking-wide text-sm mb-1">Email</label>
      <input type="email" id="email" name="email" class="bg-gray-200 rounded p-2 text-gray-600 focus:outline-none" required>
    </div>

    <div class="mt-4">
      <button type="submit" class="bg-blue-700 text-white px-4 py-2 rounded">Submit</button>
    </div>
  </form>
</div>

JavaScript

…and here’s the JavaScript that uses AJAX via jQuery to submit the form.

$(function() {

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

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

    // POST the request to Formbackend (the formUrl value)
    $.ajax({
      url: formUrl,
      type: 'POST',
      headers: {
        'accept': 'application/json',
      },
      // We serialize the form fields
      data: $form.serialize()
    }).done(function(response) {
      var successElm = $('<div class="bg-green-100 border border-green-200 text-green-500 p-3">');
      successElm.html(`${response.submission_text}, ${response.values.name}!`);

      $form.parent().replaceWith(successElm);
    }).fail(function() {
      // Happens when something goes wrong
    }).always(function() {
      // This always happens
    });

  });
});

The above results in the following form (use the tabs to navigate between HTML, JavaScript and the Result).

Try and fill out the fields and submit the form to see what happens :) After the submission, we’ll replace the form with a “Success”-message including the name your entered.

Submitting the contact form using jQuery and AJAX

A couple of things is happening here. Notice in the done function in the JavaScript how we create a new div (it’s styled with TailwindCSS) and then replace the HTML of that div with the response from the server response.submission_text and the name value from our form submission which can be accessed via response.values.name.

Then we simply replace the form using jQuery’s $form.parent.replaceWith(..) which finds the parent element of our $form and replaces it with the successElm that we created.

Simple as that :)