FormBackend logo

User Guides

FormBackend JavaScript

How to add a bit of interactivity to your form using FormBackend's javascript include

We have our own custom javascript include that you can include on a webpage in order to add javascript functionality to your form and not refresh/redirect the page when someone submits your form. It’s pretty simple to add, and no code is required.

What we do, is we submit your form and show a div of your choice once the form has been submitted. It makes it easy to integrate with services like Webflow and it supports Webflow’s success/fail form interactions out of the box.

How to add FormBackend javascript to your form

Let’s say we have the following form and we want to show a div with a success message once the form has been submitted.

<form action="[ACTION]" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Submit form</button>
</form>

First let’s go ahead and include the javascript include on your webpage. Somewhere down close to the closing </body>-tag add the following include:

<script src="https://js.formbackend.com/form/v1.min.js" defer></script>

This will add the javascript we need, now we just need to hook it up to your form. Add the following attribute (data-formbackend)to your <form>-tag, so it looks like this:

<form action="[ACTION]" method="POST" data-formbackend>

We’ll now automatically submit your form using javascript when someone clicks on the submit button. The only thing that is left is to add the div we want to be shown when the form has been submitted successfully.

Below your <form>...</form> element, add a div like so:

<div class="w-form-done" style="display:none;">The form has been submitted successfully</div>

As you can see we have added a class w-form-done which is the default class that the FormBackend javascript looks for when a form has been submitted.

Your HTML should look like this (slightly simplified):

<html>
  <head></head>
  <body>
    <form action="[ACTION]" method="POST" data-formbackend>
      <label for="name">Name</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>

      <label for="message">Message</label>
      <textarea id="message" name="message"></textarea>

      <button type="submit">Submit form</button>
    </form>

    <div class="w-form-done" style="display:none;">The form has been submitted successfully</div>
  </body>
</html>

You can also add an element that’ll be shown if the form submission doesn’t go through:

<div class="w-form-fail" style="display:none;">Something went wrong when submitting the form</div>

Pick your own success/fail elements

You can customize the element selectors and call it something else like .form-success, but you have to tell the javascript about it, which can be done by adding the following attribute to the form-tag: data-formbackend-success with a value of .form-success.

Your form tag should now look like:

<form
  action="[ACTION]"
  method="POST"
  data-formbackend
  data-formbackend-success=".form-success"
  data-formbackend-error=".form-failure">

That means when the form has been submitted successfully, the form will be hidden and it’ll look for an element with the class form-success and display that. If something goes wrong, it’ll look for the .form-failure element.