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.

Prerequisites

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

Implementation 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.

2. 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);
    // Optionally display a success message
    document.querySelector('#form-success-message').style.display = 'block';
  })
  .catch(error => {
    console.error('Error:', error);
    // Optionally display an error message
    document.querySelector('#form-error-message').style.display = 'block';
  });
}

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

important

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.

3. 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.

4. 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.

Customizing the Code

Adding More Form Fields

You can easily modify the code to collect additional form fields:

function sendFormToSendsquared() {
  const formData = new FormData(document.querySelector('#your-form-id'));
  
  // Get all your form fields
  const email = formData.get('your-email');
  const name = formData.get('your-name');
  const phone = formData.get('your-phone');
  const company = formData.get('your-company');
  
  // Include all fields in the API data
  const apiData = { 
    email, 
    name,
    phone,
    company
  };
  
  // Rest of the code remains the same...
}

Adding Success and Error Handling

You can enhance the user experience by showing appropriate messages after form submission:

// Add these HTML elements to your Webflow page
// <div id="form-success-message" style="display: none;">Thank you for subscribing!</div>
// <div id="form-error-message" style="display: none;">There was an error. Please try again.</div>

.then(data => {
  console.log('Success:', data);
  // Show success message
  document.querySelector('#form-success-message').style.display = 'block';
  // Reset the form
  document.querySelector('#your-form-id').reset();
})
.catch(error => {
  console.error('Error:', error);
  // Show error message
  document.querySelector('#form-error-message').style.display = 'block';
});

Troubleshooting

If your integration isn't working properly, check these common issues:

1. Verify that your form field names in Webflow match exactly what you've specified in the JavaScript code
2. Confirm that your SendSquared list group UUID is correct
3. Check the browser console for any JavaScript errors
4. Ensure that CORS is properly set up to allow requests from your Webflow domain to SendSquared
5. Test your API endpoint separately using a tool like Postman to verify it's working correctly

For additional support, contact SendSquared support at support@sendsquared.com or +1.855.340.7363.