Advanced Customisation (Code)

In this tutorial we'll show you how you can push your form's custom look and feel to the ultimate level with minimal code

There are cases that our plugin does not (yet) support out of the box. To help you get everything you need out of your form we've added the possibility to add custom JavaScript code to your form. In this short tutorial we'll cover where you can insert this custom code snippet and two common use cases: redirecting respondents to a webpage upon submission and integrating with an API.

Adding Your Code Snippet

You add custom code to your form in the "Share->Advanced" Menu as shown in the gif below.

‍

You can add any valid JavaScript in this text area, but remember to omit the <script> tag. At the time of writing you can add a listener for a single event: "formSubmit". As the name implies this event is triggered whenever a respondent submits their form. The event contains the submitted data. Below you'll find two examples of how this can be used in concrete scenarios.

Example 1: Redirecting to a URL After Submitting

The following code snippet will redirect a respondent to weavely.ai once they submitted their form responses.

document.addEventListener("formSubmit", () => {
  window.location.href = "https://weavely.ai";
})

Example 2: Sending the Form's Data to an API

The following code snippet will send the form's data to a given API. It is important to note that the data will also be stored on the weavely servers.

document.addEventListener("formSubmit", (event) => {
  fetch('Your API URL', {
    method: "POST",      
    headers: {         
      "Content-Type": "application/json"
    },
    body: JSON.stringify(event.detail.data)
})