How to use forms with buy button on Squarespace

Payments + Shipping & Fulfilment
, ,

Topic summary

A user is managing two businesses under one parent company and built a Squarespace store for the second business due to Shopify plan limitations. They’ve successfully integrated Shopify buy buttons into Squarespace but face a critical fulfillment challenge.

The Problem:

  • Customer order information is split between Shopify cart data and a separate Jotform pickup/delivery form
  • Both sources contain essential fulfillment details (materials, quantities, delivery addresses)
  • Manually matching orders with form submissions will become unmanageable during busy seasons

Proposed Solutions:

  1. Zapier Integration (recommended): Automate data flow between Shopify and Jotform to consolidate order and form information
  2. Custom Form via Shopify Storefront API: Build a form that pulls cart data directly using JavaScript
  3. Third-party order management tools: Use platforms like Orderhive or TradeGecko to centralize data
  4. Consolidate to Shopify: Move both businesses to Shopify’s multi-store feature

Current Status:
The user is attempting the Zapier solution but encountering configuration difficulties. They’ve successfully set up the trigger and reached the testing phase, but the fields available for mapping don’t match their Jotform fields. The issue remains unresolved, with the user requesting more detailed guidance on field mapping.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

We have two businesses under the same parent company, but can’t afford to upgrade the Shopify plan that allows us to operate more than one store from our platform, so I used Squarespace to build an online store for the second business.

I figured out how to integrate buy buttons from Shopify into Squarespace and that’s working well.

Here’s our conundrum:

The only fulfillment options in our Squarespace store is pickup or local delivery. I created a Pickup/Delivery form in Jotform for customers to fill our before placing their order, and embedded the form code into Squarespace. However, we need to use the information from both the cart and the form to complete fulfillment (type of material, quantity of material, delivery address, etc). Right now the cart and form information are separate from each other on our receiving end, and I can already feel the headaches this will cause trying to match each order with their respective form submissions when the busy season comes back around.

Is there a way to create a form that pulls the information from the customer’s cart so all the material/quantity/delivery/pickup details are in one place after the transaction?

OR is there an easier way to accomplish this than the way I’ve been going about it so far? At this point I’ll take all the help I can get.

2

Hi @Holland2828 ,

To address your issue, here are a couple of solutions that can integrate the cart data with your form and streamline the fulfillment process:

1. Integrate Shopify with Jotform (or another form builder) using Zapier:

You can use Zapier to automate the flow of data between Shopify and Jotform. The idea is to create a “Zap” (automated workflow) that triggers when a new order is placed on Shopify. This trigger can then send cart information to Jotform, updating the form submission with order details (material, quantity, delivery address, etc.).

  • Steps:
    1. Create a Zapier account if you don’t have one.
    2. Set up a trigger for new orders in Shopify.
    3. Use an action to send the order details to Jotform (or your preferred form tool).
    4. Customize the form submission to include the cart data, delivery details, and other relevant information.

This way, your form submission will include everything in one place without the need to manually match data from separate systems.

2. Custom Form with Shopify’s Cart Data (via Shopify’s Storefront API):

If you’re comfortable with some development, you can build a custom form in Squarespace that pulls the customer’s cart data directly from Shopify. You can do this using Shopify’s Storefront API or JavaScript.

  • Steps:
    1. Embed a custom form in Squarespace (this can be done through a code block or custom HTML).
    2. Use Shopify’s JavaScript SDK to retrieve the cart data (items, quantities, prices, etc.) on the Squarespace page.
    3. Pre-fill your custom form with this cart information, along with the necessary fields for delivery/pickup.
    4. Upon form submission, send the data to a backend system or email, where it can be processed for fulfillment.

This method requires some technical expertise but ensures everything is captured in one step.

3. Manual Integration or Third-party Tools:

You can also consider using third-party order management tools that integrate with both Shopify and Squarespace. These tools can pull orders from Shopify and merge them with form data from Squarespace.

  • Examples:
    • Zapier: Can help automate data transfer between Shopify, Jotform, and other platforms.
    • Orderhive, TradeGecko, or Zapier for Order Management: These systems allow you to centralize all order data from Shopify and Squarespace in one dashboard, reducing manual work.

4. Simplify the Workflow:

If upgrading your Shopify plan isn’t an option, another alternative might be to consolidate your stores. Since you already have Shopify working well for one business, consider moving the second business over to Shopify and using the multi-store management feature within Shopify. It might be more cost-effective in the long run, and you’ll have all your data in one place.

In summary, the most efficient way would likely involve using Zapier to automate data syncing between Shopify and Jotform or building a custom form using Shopify’s Storefront API. This will save you time and headaches in the busy season.

3

Thank you for the reply. I’m inclined to use Zapier since the form I generated is through Jotform.
I can tell I’m out of my element, though, navigating the configurations. I made some amount of progress utilizing the copilot function but I ultimately hit a road block every time, as I just don’t understand enough about the components of building what I need.

I’ve managed to figure most things out for building the two websites, but this particular task is NOT my wheelhouse - I feel like I’m making random selections at this point just to see if it shows something remotely useful. Is there any way you could walk me through some of this?

4

Hi @Holland2828 ,

Here’s a step-by-step guide to setting up automation between Jotform and Zapier:

1. Create a New Zap in Zapier- Log in to Zapier and click on “Create Zap”.

  • Select “Jotform” as the trigger app.
  • Choose “New Submission” as the trigger event.
  • Connect your Jotform account and select the form you want to use.
  • Click “Test Trigger” to fetch sample data.

2. Set Up the Action- Choose the Action App (Shopify, Google Sheets, Email, etc.).

  • Select the Action Event (e.g., “Create Order” if sending data to Shopify).
  • Map the fields (match Jotform form fields with the action app’s required fields).
  • Click “Test & Continue” to check if the setup is working.

3. Turn on the Zap- If everything looks good, click “Publish Zap”.

  • Now, whenever a new Jotform submission is received, Zapier will automatically process it.
5

I truly appreciate your feedback and explaining the Zapier steps. I’m able to do all the steps until I get to the test. Zapier shows the last order in my Shopify for the test, but the fields that show up for mapping purposes aren’t fields that pertain to the Jotform I created. I’ve started over countless times and can’t seem to figure out how what this thing is asking me to do.