March 16, 2023

Add a Contact Form to Your Webflow Site with Pure Native JavaScript

Are you looking for a way to integrate your Webflow form submissions with SendSquared API to automate your lead generation process? If yes, you’re in the right place! In this tutorial, we’ll show you how to use pure native JavaScript to add a custom form submission function to your Webflow page that sends data to SendSquared API using HTTP POST.

Here’s what you’ll need to get started:

  • A SendSquared account with an active API key
  • A Webflow account with a published website
  • Basic knowledge of HTML and JavaScript

Ready to get started? Follow these steps:

  1. Add the Form Fields to Your Webflow Page

Open your Webflow website in the Designer mode and add the form fields you want to collect data from. Make sure you give each field a unique name that matches the keys in your SendSquared API data object.

  1. Create a New JavaScript File

Go to your Webflow project settings and add a new JavaScript file to the header or footer of your Webflow page. Copy and paste the code below into the file:

function sendFormToSendsquared() {
  // Get the form data
  const formData = new FormData(document.querySelector('#your-form-id'));
  const email = formData.get('your-email');
  const name = formData.get('your-name');

  // Set the API URL with the token
  const token = 'your-list-group-uuid';
  const apiUrl = `https://app-api.sendsquared.com/v1/pub/popup?token=${token}`;

  // Set up the API data
  const apiData = { email, name };

  // Use fetch to send the data to the API
  fetch(apiUrl, {
    method: 'POST',
    body: JSON.stringify(apiData),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if (!response.ok) {
      throw new Error(`Network response was not ok (${response.status})`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
}

document.querySelector('#your-form-id').addEventListener('submit', (event) => {
  event.preventDefault();
  sendFormToSendsquared();
});

Make sure to replace the “your-list-group-uuid” placeholder with your actual SendSquared API token. This code assumes that your form has two input fields with the name attributes set to your-email and your-name.

  1. Add the Form ID to the JavaScript Code

Replace “your-form-id” with the ID of your Webflow form element in the document.querySelector() method in the JavaScript code.

  1. Save and Publish Your Changes

Save the JavaScript file and publish your Webflow website. Your form submission data should now be sent to SendSquared API when the form is submitted.

That’s it! You’ve successfully integrated your Webflow form submissions with SendSquared API using pure native JavaScript. If you have any questions or run into any issues, feel free to reach out to SendSquared support support@sendsquared.com for assistance.

You May Also Like