Connect Wix form to Hubspot form

index.js

/*
# Overview
This code connects a contact form on a Wix site to a HubSpot portal, so that form submissions are automatically synced to HubSpot as new contacts.

# Prerequisites
Before using this code, you'll need:

1. A Wix site with a contact form
2. A HubSpot account with a portal ID and form GUID

# To use this code:

1. Open your Wix site editor and navigate to the page with the contact form you want to connect to HubSpot.
2. Enable Velo by clicking on the "Dev Mode" toggle at the top of the editor and selecting "Turn on Dev Mode."
3. Go to the "Properties" panel on the right side of the editor.
4. Look for the "ID" field, which displays the form's ID. If it's empty, set an ID for your form, like "contactForm" (without quotes).
5. At the bottom of the editor, you will now see the Velo panel. Click on the "Page Code" tab to open the page code editor.
6. Click on the contact form to select it.

Add the following code to the page code:
*/

import {fetch} from 'wix-fetch';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
import { local } from 'wix-storage';


function getHubspotUtk() {
  return local.getItem('hubspotutk');
}


async function getClientIpAddress() {
  try {
    const hutk = getHubspotUtk();
    const response = await fetch('https://api.ipify.org?format=json', {
      headers: {
        'Cookie': `_hubspotutk=${hutk}`
      }
    });
    const data = await response.json();
    return data.ip;
  } catch (error) {
    console.error('Error fetching IP address', error);
    return null;
  }
}


$w.onReady(function () {
  $w("#submitButton").onClick(async (event) => {

    // Hubspot Form's Portal ID and Form GUID
    const portalId = '20012294';
    const formGuid = '87135f79-8453-4b02-83da-9870b6e373ac';

    const firstName = $w("#input9").value;
    const lastName = $w("#input8").value;
    const email = $w("#input7").value;
    const phone = $w("#input10").value;
    const company = $w("#input11").value;
    const information = $w("#textBox1").value;

    const hutk = getHubspotUtk();
    const ipAddress = await getClientIpAddress(); // Get the client's IP address

    const requestData = {
      'firstname': firstName,
      'lastname': lastName,
      'email': email,
      'phone': phone,
      'company': company,
      'message': information,
      'hs_context': JSON.stringify({
        'hutk': hutk,
        'ip_address': ipAddress,
        'pageUrl': wixLocation.url
      })
    };

    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams(requestData).toString()
    };

    try {
      const response = await fetch(`https://forms.hubspot.com/uploads/form/v2/${portalId}/${formGuid}`, requestOptions);

      if (response.ok) {
        console.log('Form submitted successfully');
      } else {
        console.error('Error submitting form');
      }
    } catch (error) {
      console.error('Error submitting form', error);
    }
  });
});