Multistep order form with Snipcart


I’m trying to figure out how I can create a multistep order form using the Snipcart API.

Step 1:
Here the user answers a competition question

Step 2:
Here the user should be able to select a charity to donate too

Step 3:
Here the user selects how many tickets to buy

Just looking for general guidance, how I can approach this.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I’m thinking that maybe I can create 3 sections and then using interactions to hide / slide in the preivous / next section´triggered by button clicks? That solves the “form” part, but the custom attributes are linked to a product selection in the API. So how can I separate this part in 3 steps?

To link the information in your form to the order, you have 2 options:

The first option is to use the order custom fields. Order custom fields – Snipcart Documentation

The second option is to use the javascript SDK to add cart metadata. JavaScript SDK API – Snipcart Documentation

The major difference between the order custom fields and the metadata is that metadata is hidden from the customer. This means it will not appear on the invoice nor the cart.

1 Like

HI Olle,

Here how you can do it:

const button = document.querySelector('#Your add to cart button')
const selectCompetition= document.querySelector('#your competition question select field')
quantity.addEventListener('change', () => {
  // Sets the value for charity 
  button.setAttribute("data-item-custom1-value", selectCompetition.value)
const selectCharity = document.querySelector('#your charity to donate select field')
select.addEventListener('change', () => {
  // Sets the value for charity 
  button.setAttribute("data-item-custom2-value", selectCharity .value)

You can also use ```

if you do not want to display these fields in the cart. or 

You can find this at end of this page: [](https://Products-snipcart)

If you need any further help I am here to help you.

1 Like

Thank you very much Muhammad!

Hi Dilshad

Seems like you’re an expert with the snipcart intergration! Just gonna try my luck here an hopefully I can get your help.

Basically, I want these displayed and can be input on the products page and have them reflected in the cart after adding to cart. However, I am a complete newbie with JS and I have been trying to read up but did not manage to get these solved.

1.) Product variations – How do I get the select field to retrieve the variations from my CMS. Problem I am facing is that using the +Add Field retrieves the entire line eg.(Oak|Walnut[+10]|Walnut (L)[+70]) instead of having them separated into different options.

2.) I would like to have data-item-custom1-name=“Custom Name” on the products page too.

Really appreciate your help or any other experts out there!