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:

Image for post
Image for post

One issue here is that all emails are sent from customercare@squarespace.info, 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.

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!

Image for post
Image for post

Instead of sending the form responses directly to your email, you will need to choose the Google Drive storage method for your Squarespace form.

Image for post
Image for post

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.

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:

https://gist.github.com/tokudu/34b6aeb39e7cd96322ee

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.

Image for post
Image for post

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.

If everything works, the new emails should look much better:

Image for post
Image for post

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!

Eng Manager @Snapchat. Android hacker, and a product design geek. Previously: cofounder of @UmanoApp (acquired by @Dropbox), @Google, @Pixar, @Kik.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store