Why Embed a Google Form in Squarespace?

Google Forms is a free tool that helps collect data from visitors. You can use it for contact forms, surveys, event registrations, and more. Embedding the form directly on your Squarespace site improves user experience by keeping visitors on your page instead of redirecting them.

Step 1: Create a Google Form

1. Go to Google Forms: Visit Google Forms and sign in with your Google account.
2. Start a New Form: Click on the “+ Blank” button to create a new form.
3. Customize Your Form:
   • Add questions by clicking on the “+” icon.
   • Choose the question type (multiple choice, short answer, etc.).
   • Enable required fields where necessary.
   • Add images or videos if needed.
4. Adjust Settings:
   • Click on the gear icon for form settings.
   • Enable email notifications if needed.
   • Allow users to submit multiple responses or limit it to one per user.

Step 2: Get the Embed Code

• Click the “Send” Button: Find this at the top-right corner of the Google Forms page.
• Choose the Embed Option:
  • Click on the “< >” symbol for the embed code.
  • Adjust the width and height (default is 760×500 pixels).
• Copy the Code: Click “Copy” to save the HTML embed code.

Step 3: Embed the Google Form in Squarespace

1. Log in to Squarespace: Open Squarespace and sign in.
2. Navigate to the Page:
   • Click “Pages” from the dashboard.
   • Select the page where you want to add the form.
   • Click “Edit” to open the page editor.
3. Insert a Code Block:
   • Click the “+” button to add a new content block.
   • Select “Code” from the options.
4. Paste the Embed Code:
   • Insert the copied Google Forms HTML embed code.
   • Click “Apply” to save the changes.
5. Save and Publish:
   • Click “Done” and then “Save” to make the form live on your site.

Step 4: Make the Form Mobile Responsive

Google Forms may not display correctly on mobile devices. To fix this, follow these steps:

1. Modify the Embed Code:
   • Change the width to 100% so it fits all screen sizes.

Example:

<iframe src="https://docs.google.com/forms/d/e/YOUR-FORM-ID/viewform" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

2. Add Custom CSS:
   • Go to Design > Custom CSS in Squarespace.

Add the following CSS to ensure proper responsiveness:
iframe {
  max-width: 100%;
}

Step 5: Customize the Form’s Appearance

Google Forms allows minimal customization. However, you can adjust the look using these options:

1. Theme Customization in Google Forms:
   • Click the palette icon at the top-right corner.
   • Change colors, fonts, and background images.
2. Using Third-Party Tools:
   • Use tools like Formfacade to match the form’s design with your Squarespace site.
   • Third-party services allow deeper integration and styling options.

Step 6: Test the Embedded Form

Before making the form public, test its functionality:

1. Preview on Different Devices:
   • Open the page on mobile, tablet, and desktop.
   • Check if the form adjusts to different screen sizes.
2. Submit a Test Response:
   • Fill out the form and submit it.
   • Check if responses are recorded in Google Forms.
3. Fix Any Issues:
   • If the form doesn’t display correctly, tweak the embed code or CSS settings.

Step 7: Monitor Form Responses

Once the form is live, monitor responses through Google Forms:

1. Check the Responses Tab:
   • Click on the “Responses” tab in Google Forms.
   • View individual and summary responses.
2. Export to Google Sheets:
   • Click on the Google Sheets icon to link responses to a spreadsheet.
   • This allows easier data management and analysis.
3. Enable Email Notifications:
   • Click on the “More” (three-dot) menu.
   • Select “Get email notifications for new responses.”

Conclusion

Embedding a Google Form in Squarespace is a simple way to collect data while keeping visitors on your site. By following these steps, you can integrate the form, ensure mobile responsiveness, and customize its appearance. Regularly test and monitor responses to maintain a seamless user experience.