Zapier + Squarespace Process FYI

[crmclients]

Hi All

I saw a few posts about this but no success stories so far so I thought I would pass along my experience:

Background: client moved their website to Squarespace including their intake form which I previously configured to send data to the Lead module in Espo successfully, oh well what is life if there is no challenge, right?

Issue: Squarespace only integrates with Zapier or Google Sheets for their built-in forms; Bigger issue: I'm not really a coder

My 1st try was to create a 3 -field test form (name/phone/email) using the Squarespace Custom CSS (code I found somewhere) option which worked fine sending data to Espo and creating a Lead and eventually I may go back to that however, with the time needed to create and fully customize I gave Zapier (FREE version) a try first.

Zapier - not really fun to work with, some pluses are the AI feature you get for 2 weeks (?) will write the code for you if you add the fields you want; a few tweaks and it works OK

Process:

1. Create a Zapier account, free for under 100 transactions a month, my client will not exceed that so we were able to continue past the trial period as a FREE account
2. Go into the Squarespace (SS) website, edit, select the form, select the edit pencil for the form, in the small "CONTENT DESIGN STORAGE" window click Storage then at the bottom Additional Storage
   1. Click the Connect to Zapier button
   2. Get the Zapier API key from Squarespace
3. Log into Zapier and click on APPS then Add Connection
   1. Add the connection to Squarespace, paste in the API key from Squarespace
4. Go to NEW ZAP and using the AI feature type something like "get data from the form at www.abc.com/contactus.php and send it to www.zyz.com/crm.php using API"
   1. Zapier will produce the code with all the fields and a place holder for the API key
   2. Copy the code and paste offline for reference
5. Go to Espo -> Lead Capture -> and create a Lead Capture for SS form
   1. Add a few test fields
   2. When you SAVE, note the Espo field names on the right (firstName) - this is what you will use in Zapier for mapping
6. Go to the Squrespace form and fill it out and submit the form, using the field name or obvious data
   1. This was the most frustrating part because Squarespace uses GUID's for field names on their form, if the client doesn't rename, you don't know what the GUID represents; for some question types there is no "field name" at all; we are capturing 28 fields
      1. you may have a GUID for a field name like 5yr99m90el84jh83ld96j3fjr and -not- know = "How did you hear about us"
      2. so put the "field name" for your test data answers where possible (How did you hear about us = how) then hover over each field and create your own map
      3. useful for tracking down errors later where you still won't have field names
7. After submitting, the data is in Zapier, switch over and create a new "ZAP" and start updating/mapping the field names
   1. Go to the code and replace the API key with the Espo Lead Capture API Key
   2. Update the mapping as needed
8. Save and copy the code again for later
9. Test the integration
10. Once you have a green light, update Espo and Zapier with the rest of your fields
11. Update your offline saved code and the crazy GUID mapping which you may need for investigating errors

Recommendations

• Use the same field name on both sides, e.g. addressState: inputData.addressState,
  • It's tempting to use shorter names on the Zapier side however it turned out to be a nightmare for troubleshooting for me, when I duped everything it was easier to troubleshoot
• Zapier keeps your drafts even if you don't save so Zap can be fuzzy with the "replace existing or not" prompt
• If you have a lot of fields, list in your code alphabetically or order of your form
• If you are new to coding, initiate the trial when you can carve out time to complete the integration; some features that help write code are gone after the trial
• If you get an error, fix it then re-run the Zap and it will try to resubmit and save you or your client from manual entry
• Watch the field sizes, there is a 250 char limit (maybe for free version?) and for one of the submissions that was exceeded and it was rejected by Zapier and never sent to Espo,
  • it was the Squarespace form name as a GUID, so I deleted it from the Lead Capture and in Zapier, and no issues since
• Create one ZAP for your test Epso instance, when it is working good SAVE AS for PROD
  • Then create a new Lead Capture in Espo PROD and in Zapier, a new connection to the form and change the API in the code

FREE Version limitations

• Some AI features are diluted/removed after the trial
• You can fix an error, and then resubmit (ReRun) the form data to Espo, this works well but resubmitting is one by one the free side - be sure to make the fix first -
  • PAID version you can put it on auto re-run or rerun all the errors at once after the fix
  • Right now I just respond to email notification when it fails and re-run when needed
• Date and other formatting - not allowed in the free and is needed (I am posting help on date conversion from text after this) because Zapier defaults to yyyy-mm-dd and ends up blank in Espo (appreciate ideas on best way to handle )
  • This is because with the Free version there is a multi step limitation of some kind, sending the data is one step but re-formatting is two
  • For now I am throwing the date data in a text field on the Espo side so we have it but will see if someone can help me with conversion in another post

ERRORS - generally

• Note: I am using Espo Cloud for PROD and a shared server/Wordpress site for TEST
  • TEST had errors every so often, both my fault and a lot of timeout issues -> when I finalized the cost and created the connection for PROD/Espo Cloud, the timeout issues stopped
• 400 - you missed a comma, semi-colon, names don't match from Zapier to Espo, etc. - usually found a type then re-ran the Zap
• 500 - timeout or other issue - rerun usually worked
• These are the only 2 error types I received when setting this up

Zapier / Squarespace / Espo notes

• In addition to Sqaurespace using a GUID for a field name at times
• European date format from SS
• SS form name shows the English Tile it was given but passes the GUID anyway
• The way the client created their form/SS/Espo setup you can get whole or parsed fields for
  • Address and/or Street City State PostalCode
    • In Zapier, you can put 2 fields in the same mapping box e.g. |Address 1|Address2|
  • Name and/or First Last
  • You can bring all the fields in or as needed
• The Zapier ReRun feature will show what it captured

What's next?

I am trying out a table creation feature that is part of the free plan, collecting the form data in a table.

Happy to answer questions if I can.

-D

Btw, I have no idea what I am doing so if I can do it you for sure can!

[crmclients]

screenshots...sample code

// Define the URL for the API endpoint const url = "https://yourwebsiteespocloud.com/api/v1/LeadCapture/12345678901234567890";

// Define the data to be sent in the POST request. This data is extracted from the inputData object. const data = {

addressPostalCode: inputData.addressPostalCode,
addressState: inputData.addressState,
addressStreet: inputData.addressStreet,
addressCity: inputData.addressCity,

};

// Define the options for the POST request, including the method, headers, and body. const options = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data),

// Convert the data object to a JSON string for the body of the request. };

// Use the fetch function to send the POST request to the defined URL with the specified options.

// The response from the server is stored in the response variable. const response = await fetch(url, options);

// Check if the response is successful if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); }

// Convert the response to JSON format and store it in the responseData variable. const responseData = await response.json();

// Log the response data to the console. console.log(responseData);

// Create an output object with the key 'response' and the value as the response data. output = { response: responseData };

[crmclients]

snaps