Integrating Forms with SquareSpace

Overview: 

The two types of forms that can be easily integrated on Squarespace are Squarespace Forms and Google Forms. All the data is stored in Google Sheets. Neither require the Google Suite Integration for $72 dollars. However, Squarespace forms can be used on any plan while embedding Google Forms can only be used on the business plan.

Pros/Cons Across Types of Forms {SquareSpace, Google Forms}

SquareSpace Form Pros:

• Can easily integrate reCAPTCHA key (“I am not a Robot Button”) for security
• Submission Page is nicely displayed on website
• Can format section height, content width, and content alignment
• Can add a background on form as a video or image
• Form Fields are easily defined
• Storage is easy to set up with Email, MailChimp, Zapier, and Google Drive
• Can change submit button label, button alignment, and a post-submit redirect URL and create a personalized post-submit message
• Can create required and optional questions
• Can specify 1 email address to send a copy of responses on form submission
• Can create forms on basic plan

SquareSpace Forms Cons:

• Data Validation Limitations (Ex: First Name validation can allow numbers)
• Some style limitations for certain fields (Ex: Phone Number is 3 boxes of ###-###-####)
• Cannot handle decision tree logic
• No storage option within Squarespace- Must use external data store such as Google Sheet

Google Forms Pros:

• Decision Tree Logic is easily implemented
• Can create specific data validation
• Can send email to owner of the Google Form after someone responses
• Can view a dashboard of all responses without having to export to Google Sheet
• Can link to existing spreadsheets
• Can create required and optional questions
• reCAPTCHA key isn’t built in, but is invisible

Google Forms Cons:

• Must have Squarespace Business Plan to Embed Google Forms
• Style of form has to be highly edited to match website
• Decision Tree Logic only can be implemented for multiple choice questions
• Decision Tree Logic can only skip to other section
• In order to create specific data validation, Regex has to be used (can become very complicated very quickly)

Implementation of SquareSpace Forms on SquareSpace

How to Create a SquareSpace Form (Ex. Contact Form) - This section will go through simply adding a section on a page that has a "form block" as its content.

1. Click + To add Section
2. Select Contact for section type. This will give you a basic template for the form
3. When you click on one of the types of forms above, that content will show up on your page.  

How to Edit Form Fields

1. Navigate to the form through the “Contact Us” page on the left side “Main Navigation” bar. Follow the steps in Section 5.1 Step 4 to enter into the Editing mode of the page.
2. Click on the pencil icon to start editing the individual portions of the form. Here you can name form and also name form fields. Notice also 3 main edits of form: Build, Storage, Advanced.  A majority of your edits will be done in the Build section of this editing tool.
3. To add Form Fields, click “Add Form Field” at the bottom of the box in the screenshot above. You will see a list of options as in the screenshot below.
4. If you want a complete list of form fields, go to this link to find more options. Each form field takes in different types of data and can be customized as you like. https://support.squarespace.com/hc/en-us/articles/205814018-Form-fields-explained
5. Use the Build section to change the name and data type of each form field.
6. To change the form submission button, go to the “Advanced” settings. Here you can edit the submission button label, alignment on the page, any extra pages to load after sending in the form, and the message after submission.

How to Add Form Data Validation - Note: Form data validation is BUILT IN to the type of field you select. The data will automatically be validated.

1. Text: Use the Text field to collect basic information from visitors. Only one line of text can be entered here, so this field is best if you're expecting a short reply.
2. Text Area: For longer replies and a larger text field, add the Text Area field. The Text Area field doesn't have a character limit.
3. Select: You can create a drop-down menu with the Select field. Create a title for the drop-down and list each option on its own line. Visitors can select one option.
4. Checkbox: You can create a list of multiple options with the Checkbox field. Create a title for the drop-down and list each option on its own line in the Options field. Visitors can select multiple options.
5. Radio: The Radio field asks visitors to select from two options by clicking a circle (radio button). The visitor can only select one option. To format the options, list each option on its own line. This is similar to the Select field, except with a different display style.
6. Address: Several text fields will be presented to collect a visitor's address. Note: The address fields will be formatted for US addresses, and they can't be changed for a specific international format.
7. Email: This field prompts the visitor to enter their email address. It must be in the proper format to be accepted. Note: The email address test@test.com won't be accepted.
8. Date: Using the Date field, you can ask the visitor to input a date into formatted fields. Note: The date format can't be changed. It will always be Month/Day/Year.
9. Time: In the Time field, a visitor can enter a time, which will be submitted in a time format. Note: The format can't be changed to the 24-hour clock. It will always be AM/PM.
10. Phone: This field adds areas in which the visitor can input their telephone number. If you check Show Country Code, a fourth field will display to collect the visitor's international phone code. Note: The phone number fields will always be formatted for US telephone numbers. They can't be changed to an international format. As an alternative, use the Text field instead.

How to Edit SquareSpace Form Response Storage in GoogleSheet

1. Click on “Storage” in the form edit box.
2. Here you can see that there is a place to enter the email address on the top. This is the email that form responses will be sent to. To change the email address connected, simply rewrite the email and click “Connect”.
3. To edit the storage of responses, you will be linking the form to Google drive. In the box for the Google Drive name, input a name of what you want the spreadsheet of form responses to be called. This will automatically create a spreadsheet by that name in the google drive account linked to the email address in the top box.
4. Click Apply.
5. To check if form works, log into your email and view Google Drive. On your drive: The sheet with your sheet name will appear, or you can search for it in the “Search in Drive” bar at the top. NOTE: If you add a rename a field, ex: Phone to  Phone Number, the a new column will be created

More Resources for SquareSpace Forms

1. More resources on the form block can be found here:  https://support.squarespace.com/hc/en-us/articles/206566737-Form-Blocks
2. More resources on storage methods and Google Drive can be found here: https://support.squarespace.com/hc/en-us/articles/205814638-Managing-form-and-newsletter-storage

Implementation of Google Forms on SquareSpace

To start this process, you will first create the form in your Gmail account.

How to Add a Google Form on SquareSpace

1. On your Google Account, Add a new form by clicking “New”  and then going to “more” options to select “Google Form”

How to Add Decision Tree Logic in Google Form (Google forms achieves decision tree logic by linking different sections of the form together depending on the answer choices.)

1. To add decision logic, you first need to make every section of your form. To do so, in the form, hover next to the first question block and click “New Section” which is the bottom option of the side panel.
2. Before making decision tree logic between all of them, set up the basic sections you want. If you want to add a new section, make the section and the questions before you create decision tree logic from other sections.
3. To get decision tree logic, you need to link sections together. You can only do this if the answer choices are MULTIPLE CHOICE or DROPDOWN answers. This is because the user must choose an answer before getting directed to another section. If you don’t choose one of these options, you will not be able to link sections together! To link sections together, first make the question by filling in the name, choice style, and answer choices. To add a question in the section, click the “plus” icon on the top of the side panel (the same side panel you used to add the section)
4. Click on the 3 dots on the bottom right corner of the question block and then click “Go to section based on answer”
5. Now you will see a column next to each answer choice with “Continue to Next Section”.
6. To direct the user to a different section based on the answer choice, choose the section by clicking the arrow next “Continue to next section”. This will show you the list of available sections where you can direct the user. NOTE: You have to make a section selection for each answer choice. Or if you want the user to simply go to the next section in the form, you can leave the option as “continue to next section”.
7. Finally, leave the “after section #” option underneath each section to the “talk to you soon” section so that after the user finishes these questions, they can go to the submission page.  This screenshot is just for section 1, but the user should go to section 11 after finishing every section.

How to Embed Google Form in SquareSpace 

1. In the Google Form, click “Send” in the top right.
2. In the <> option, copy the code underneath the “Embed HTML” section.
3. In Squarespace, navigate to the “Contact Us” page and enter editing mode. Scroll to the section of the page where you would like to embed the form and click on the black line with a dot to see the options for types of content blocks.
4. Click “Embed”.
5. In the block that appears, paste the embed code you copied from the google form and apply!

Google Form Data Validation

Data validation essentially means you are placing restrictions on the type of data users can enter into that question of the form. This helps keep your responses better standardized and limits wrong entries from being submitted by accident.  Data validation works the same for almost every question on a google form, so we will simply walk you through and example and then let you replicate that in its many variations for the different types of data asked for in the form.

There are 4 types of validation in a Google Form

1. Number: Only allows digits to be entered. Use this for general numbers such as VIN Number, DL Number, Number of Children etc.
2. Text: Only allows text characters. Use this for names, streets, make/model of car, insurance provider, medical conditions, etc.
3. Length: Allows you to specify the number of characters in the response. Use this for things that have a specific length like a credit card number
4. Regular Expressions: Think of them as search patterns and every character entered in a form field is matched against that pattern - the form can only be submitted if the pattern and the user-input matches. These are more all encompassing than the Number/Text/Length validations

 How to Edit Google Form Data Validation

1. To validate data in the form, first log in to your gmail account, access drive and click on the form. You should have edit capability. 
2. Double click the question for which you like to use data validation. The highlighted portion is where you will enter the validation information