A custom form needs to be filled before placing an order

[michaljaworski]

I am looking into building a Shopify extension to meet the following business requirement: after adding a product to the cart, but before checking out, the customer needs to fill in a custom form. This is not for product customisation, but several questions with personal information.

A use case is this: an online pharmacy is run on Shopify platform and for some medications we need to ask the customer questions to assess if the medication can be sold to them. 

Could someone signpost me to which APIs and extension functionalities I should be looking at to build something like this?

Thank you

[Liam]

Hi Michaljaworski,

To achieve this, you would need to create a checkout UI extension and make use of custom fields, and metafields. Shopify allows developers to create custom fields during checkout that customers can use to provide additional information.

You can learn how to create a Checkout UI extension in our docs and once you've created your Checkout UI extension, you'll need to add custom fields to your checkout form (see docs here). This will allow customers to input the necessary personal information. Also you can use client-side validation to validate fields at checkout and block customer progress if the information they provide does not meet your requirements. 

The information collected can then be saved using the Metafields API and retrieved when you need to review the customer info with the medication data. 

This would be a general approach you could take - I'd recommend checking out the links above and seeing if it would work for your use-case.

[michaljaworski]

Thank you Liam,

Is there a way to show an existing form? In an iframe, or redirect to the form from the checkout and back. Our forms are complex. They're generated by an existing backend, they include Javascript which collects the input and submits it in a specific format. 

[michaljaworski]

For example - can we change the action on the "add to cart" button for a prodcut, so that it redirects to a form on our site, and passes some kind of token, which would allow us to redirect back to Shopify checkout on form completion?

[Liam]

You could possibly build your own custom form on a product or cart page which saves the information to your own custom database/ or metafields, and is associated with the order later on when it's created?

[michaljaworski]

Any links or pointer as to how I can do this? Thank you!

[Liam · Accepted solution]

It doesn't look like we have any available tutorials for building custom forms that collect data and associate it with orders unfortunately - but there are some apps that already do this on the Shopify app store here.