How to Customize Squarespace Form Submission Emails using Apps Script and SendGrid
I was recently helping out a friend and migrating his contracting company’s website to Squarespace. In general, Squarespace is an amazing and powerful tool for creating mostly static websites with very little effort. Their toolkit includes various plugins such Open Table integration and Forms, which make Squarespace a very attractive choice for all kinds of small businesses.
However, as I was tinkering with Squarespace I ran into one annoying limitation. If would like to add a Contact Us form to your site, the emails that it would send to you cannot be customized and they look like this:
One issue here is that all emails are sent from email@example.com, even though, the customer included his/her email address. As you can imagine, if you are receiving a lot of emails, your inbox gets flooded with a bunch of identically looking messages. It would be much more useful if the email looked like it arrived from the customer so that you can reply to it directly.
Fortunately, you can accomplish this with some additional effort and a few helpful tools.
Step 1: Get a SendGrid account.
First, you need to sign up for an email sending service such as SendGrid, which allows you to send custom email via an API. You can use other services like Mandrill or MailGun, but this tutorial focuses specifically on SendGrid.
If you are planning on receive less then 12000 emails per month, then SendGrid is free and no credit card is needed!
Step 2: Send Form Responses to a Google Spreadsheet
Instead of sending the form responses directly to your email, you will need to choose the Google Drive storage method for your Squarespace form.
Once your save your changes, all the form submissions will be recorded in a Google spreadsheet. In the next step, we’ll see how to use Apps Script to email those responses to you via SendGrid.
Step 3: Use Apps Script with SendGrid to Email New Submissions
Google Apps Script is a powerful cloud based scripting language for light-weight application development in the Google Apps platform.
Using App Script, we can run custom code whenever a new submission is added to the spreadsheet.
To begin, go to http://drive.google.com and find the spreadsheet that was created for you by Squarespace. Open it and native to Tools > Script Editor.
Copy the code from the Gist below as a starting point:
You will need to follow the instruction in the beginning of the code and update some configuration variables including the email addresses that you would like to use and your SendGrid API key. Instructions on how to get your API key are here: https://sendgrid.com/docs/User_Guide/Settings/api_keys.html.
One important configuration to pay attention to is NAME_COLUMN_NAME and EMAIL_COLUMN_NAME variables, values of which should be set precisely to the column names corresponding to the customer name and email.
Save the code once you are done modifying it. Now select the Initialize function from the dropdown and click on the play icon to run the script.
The Initialize function will install a Trigger in your spreadsheet, which will run the processSpreadsheetForNewSubmissions function every minute. The latter function will check your spreadsheet for new submissions and send custom HTML-based emails to the email address that you indicate in EMAIL_TO.
Check the Result
If everything works, the new emails should look much better:
You can further customize the look and feel of the emails with custom HTML by modifying the processSubmission function in the script.
You can also modify the script slightly to send auto-responder emails to your customers as well.
I hope this was helpful. Enjoy!