Engaging Network is a powerful platform for creating online forms and surveys, but what if you want to store the data you collect more flexibly? In this blog, we’ll show you how we implemented JavaScript to send Engaging Networks form submission data to an Airtable base as a new row in the user table in our Acespce project.

Prerequisites

You’ll need the following to keep up with this blog:

• An Engaging Networks account with a form or survey that you want to store data.
• A base Airtable account where you want to save your data.
• Basic knowledge of HTML and JavaScript.

Below give the steps to send Engaging Network form submission data to Airtable:

Step 1: Set up your Airtable base

Before we can start sending data to Airtable, we need to set up our base. Log in to your Airtable account and create a new base with a table called “User”. The information from the Engaging Networks form will be kept here.

Next, add fields to the “User” table that correspond to the fields in your Engaging Networks form. For example, if the Engaging Networks form has fields for “First Name”, “Last Name”, and “Email”, create fields with the same names in your Airtable “User” table.

Step 2: Get your Airtable API key and base ID

To send data to Airtable, we’ll need to use the Airtable API. Log in to your Airtable account, then go to your account settings and find your API key. Copy this key to your clipboard.

Next, go to the Airtable API documentation for your base and find your base ID. Copy this ID to your clipboard.

Step 3: Create your Engaging Networks form

Create a form or survey in Engaging Networks that collect the data you want to store in Airtable. Verify that the field names in your form correspond to the field names in your Airtable “User” table.

Step 4: Write the JavaScript code

Now it’s time to write the code that will send the form submission data to Airtable. The following code block is an example that you can use:

<!-- Your Engaging Networks form goes here -->
<form id="my-form" action="https://submit.engagingnetworks.net/your-form-id">
  <!-- form fields go here -->
</form>

<script>
// Replace with your own Airtable API key and base ID
const airtableApiKey = 'YOUR_AIRTABLE_API_KEY';
const airtableBaseId = 'YOUR_AIRTABLE_BASE_ID';

const form = document.querySelector('#my-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault(); // Prevent the form from submitting normally

  // Get the form data as an object
  const formData = new FormData(form);
  const formDataObject = Object.fromEntries(formData.entries());

  // Send the form data to Airtable
  try {
    const response = await fetch(`https://api.airtable.com/v0/${airtableBaseId}/User`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${airtableApiKey}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        fields: formDataObject
      })
    });

    if (response.ok) {
      alert('Form submitted successfully!');
      form.reset(); // Clear the form fields
    } else {
      alert('There was an error submitting the form. Please try again.');
    }
  } catch (error) {
    console.error(error);
    alert('There was an error submitting the form. Please try again.');
  }
});
</script>

Sreyas undertakes different services and supports related to Engaging Networks and Airtable all around the world. Our team of experts fulfills all requirements put forward by the client.