How to Add a Jotform to Your Squarespace Website

While Squarespace forms are fantastic for most basic needs, sometimes they just don’t cut it. Whether you need advanced functionality, like payment integration or more complex form elements, Jotform is the perfect solution. With its wide range of features and seamless integration with Squarespace, you can create forms that do much more than what Squarespace natively offers.

In this tutorial, I’ll guide you step by step on how to integrate Jotform into your Squarespace website.

Watch the video

Check out the YouTube video below. 👇🏼

Why Use Jotform with Squarespace?

Jotform offers a ton of features that Squarespace forms don’t:

• Payment Integration: Accept payments directly through your form.

• Custom Elements: Add advanced fields like signatures, file uploads, QR codes, and more.

• Advanced Functionality: Use widgets, input tables, and product lists to create highly functional forms.

• Ease of Use: Jotform is free to start, allowing up to five forms without a paid subscription.

Step-by-Step Guide to Adding a Jotform in Squarespace

Step 1: Create Your Form in Jotform

1. Head over to Jotform and log in or create a free account. (contains affiliate links)

2. Click Create Form and select the type of form you want to build.

3. Use the drag-and-drop editor to add form elements:

   • Basic Fields: Name, email, phone number, etc.

   • Advanced Features: File uploads, payment options, appointment scheduling, and more.

4. Customize your form with widgets, themes, and advanced options to match your needs.

Step 2: Get the Embed Code

1. Once your form is ready, go to the Publish tab in Jotform.

2. Select Embed from the left-hand menu.

3. Copy the provided embed code.

Step 3: Add the Form to Squarespace

1. Log in to your Squarespace dashboard and navigate to the page where you want the form to appear.

2. Click Edit to open the page editor.

3. Add a Code Block to your desired section.

4. Paste the Jotform embed code into the code block.

5. Adjust the width of the code block to fit your site’s design. The height will automatically adjust to the form’s content.

Step 4: Preview and Save

1. Exit the code block editor and save your changes.

2. Switch to Preview Mode to ensure the form appears correctly.

3. Test the form to confirm functionality.

Example Use Case: Camp Registration

Let’s say you’re organizing a summer camp and need a form for registration and payment. Squarespace forms can handle the basics, like collecting names and contact information, but Jotform goes the extra mile:

• Allow parents to select multiple weeks of participation.

• Include a payment option directly in the form.

• Add fields for emergency contacts, photo release authorizations, and more.

By embedding a Jotform, you’ll have all these features in one seamless form, and submissions will be stored in your Jotform dashboard for easy access.

Pro Tips for Using Jotform with Squarespace

1. Keep Forms On-Brand: Customize your Jotform colors and fonts to match your website.

2. Test Your Forms: Always test your form’s functionality on desktop and mobile devices.

3. Monitor Submissions: Check submissions and generate reports directly in your Jotform dashboard.

Wrapping Up

Adding a Jotform to your Squarespace site is a game-changer for creating forms with advanced functionality. Whether you’re collecting payments, adding interactive fields, or simply needing more customization options, Jotform has you covered.

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.