Strategic use of form redirects is a great way to create sales funnels and increase conversion rates

This guide outlines two different ways you can use Customer Fields to convert a form submission into an order. Method A sends customers to a product detail page to encourage the purchase of a specific product, while Method B sends customers directly to the store's checkout page with multiple products pre-loaded into the cart. 

Consider the following example scenario:

  • A local summer camp for kids needs a way for new parents to register and purchase entry to the camp for the upcoming season. 
  • There are two camps; one for boys and one for girls. The price for both camps are the same, but the events and activities are different. 
  • The summer camp also sells unisex t-shirts in a variety of sizes, with a fixed price.  (shown in Method B only)

Method A: Customer submits form, gets sent to a product detail page

This method is great for situations where you want want to encourage the purchase of a specific product, but you don't want to send the customer directly to checkout. By sending the customer to a product detail page, they can learn more about the product by viewing the product's images and description. Once the customer is ready to purchase, they can add the product to their cart and proceed to checkout, or in some cases they can keep shopping by browsing the store's other products & collections. 

See the screencast below for an example of this method in action: 

Steps to enable

Step 1: Get a list of products URLs 

The first thing you'll need to do is get a list of the products that you want to use with the form. For this particular method we're going to use just two products, but you're welcome to implement something similar with any number of products. You can click the "View" button from the Shopify admin to get the product URLs (see screencast).

In this example we're going to use the following product URLs:

  • /products/boys-summer-camp 
  • /products/girls-summer-camp

Pro tip: Make sure to use a relative path for the product URLs (as shown above) instead of an absolute path. You can read more about best practices for URLs using this help article.  

Step 2: Use product URLs in Form Rules

If you have multiple products, and you want to send the customer to a specific product based on certain conditions, then you can use form rules to set the form's redirect URL to the product detail page. 

For this example, we have a radio button field on the form for 'Camper Gender', with options for male and female as the values: 

We've also created two rules; each with a single condition and a single action, which will automatically redirect customers to either the Boys Summer Camp product or the Girls Summer Camp product based on which gender is selected on the form. Here's what these rules look like in the app admin:

Note: If you only have one product that you want to use on the form, then you can skip form rules altogether. Simply add the product URL into the 'Submission redirect URL' in the Settings tab of the form builder, like so:

Method B: Customer submits form, gets sent directly to checkout

This method is great for situations where you want force the customer to purchase a specific product or set of products. With the use of Shopify's permalinks, you can send customers directly to the store's checkout page with specific products and quantities pre-loaded into the cart. Depending on the fields that were included on the form, this means that the customer may only need to confirm their addresses and supply billing information to complete the purchase process. 

See the screencast below for an example of this method in action: 

Steps to enable 

Step 1: Get a list of variant IDs 

The first thing you'll need to do is get a list of the variant IDs that you want to use with the form. You can use the following help article from Shopify to learn how to get the variant IDs: 

Once you have the variant IDs, we suggest using a spreadsheet or text editing program on your computer to create a list of the IDs so can easily reference them later. For this particular example we're going to use three separate products:

  • Boys Summer Camp (single variant ID)
  • Girls Summer Camp (single variant ID)
  • Camp T-Shirt (multiple variant IDs, one for each shirt size)

Step 2: Create permalink(s) to pre-load cart 

There are two parameters that are required when using permalinks to pre-load cart; variant ID and quantity. Here's what the syntax looks like:

  • Single product: /cart/{variant_id}:{quantity}
  • Multiple products: /cart/{variant_id}:{quantity},{variant_id}:{quantity} 

For this example we're going to set the quantity of each product to 1, but of course this can be adjusted to fit your specific use-case. You can even use a variable to dynamically set the quantity if needed :)

Pro tip: There's even more parameters you can add to permalinks when pre-loading the cart! You can learn more using this forum post

Step 3: Use permalinks in Form Rules

In addition to the 'Camper Gender' field from Method A, in this particular example we've also got a field on the form which allows the customer to opt-in for the purchase of a camp t-shirt. If they opt-in for the t-shirt, then the customer is asked to select their desired size.

As you'll notice below we're using the same gender conditions from Method A, but we've also added another condition to handle the logic for the t-shirt opt-in. This time we're using a permalink for the 'set redirect URL' action in form rules, which will send the customer directly to checkout with either the Boys Summer Camp product or the Girls Summer Camp product in their cart. Here's what these rules look like in the app admin:

Without T-shirt: 

With T-Shirt: 

As shown above, we've set up some additional rules to conditionally load the cart with the proper size of the Camp T-Shirt product if the customer opts-in for the t-shirt. Notice that we're using a data column variable to dynamically populate the variant ID.

In our case, the values for tshirt_size are set to use the respective variant IDs, which ensures that the correct value is used when the permalink is generated:

Note: If you only have one product that you want to use on the form, then you can skip form rules altogether. Simply add the permalink into the 'Submission redirect URL' in the Settings tab of the form builder, like so:

Need help?

If you have any questions or concerns, please reach out to our support team and we'll be happy to assist 👍  

Did this answer your question?