How to use forms with buy button on Squarespace

How to use forms with buy button on Squarespace

Holland2828
Tourist
6 0 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. 

Replies 4 (4)

CodingFifty
Shopify Partner
613 97 116

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.

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Holland2828
Tourist
6 0 1

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?

CodingFifty
Shopify Partner
613 97 116

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.
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Holland2828
Tourist
6 0 1

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.