Multi-step forms (staged forms) – DepositFix | Billing Solution for growing coaching companies

Multi-step forms (staged forms)

Multi-step forms allow you to separate your form into smaller sections to enhance user experience. This is particularly useful for longer forms or when you want to guide your users through a step-by-step process.

💡

This feature works only on DepositFix fields; HubSpot fields cannot be split into steps. If you want to split your HubSpot fields into multi-steps, check out this workaround from HubSpot.

Splitting your DepositFix form is done through the embed code only. To split your form into stages, attach the following snippet to your embed code.

          settings: {
                currency: 'USD',
                // Where PaymentStep is the number of steps you'd like your form to
                // and where you will show the final pay button.
                paymentStep: 3
            },
          forms: {
                hubspot: {
                    // Identify your HubSpot form ID.
                    id: '9f9e09f3-c285-45a7-8591-bddfd379494e',
                    // Where (which step) you'd like your to show your HubSpot form fields.
                    step: 1
                }
            },
            products: [
                {
                    name: 'Product 1',
                    type: 'single_payment',
                    amount: 100,
                    step: 1,
                    showQuantity: true
                },
                {
                   addon: true,
                   amount: 20,
                   name: 'Product Addon 2',
                   showQuantity: true,
                   type: 'single_payment',
                   step: 3
                },
                ....
              ]
        });
      </script>

Where:

paymentStep is the step you'd like your payment button to appear in.

name is the product name.

type is the product type (single payment or subscription).

amount is the product amount.

step is the step you'd like this specific product to appear in.

showQuantity set to true if you want to allow customers to change the product quantity.

addon set to true if you want to make the product an add-on.

Full code snippet for this example form:

      <script type='text/javascript' id='df-script'>
        DepositFixForm.init({
          formId: 'dffeca9a-c8ea-4c5a-86cb-3b4ed2adf9eb',
          portalId: '4269803',
          settings: {
                currency: 'USD',
                // Step for showing the payment methods and Total / Subtotals.
                paymentStep: 3
            },
          forms: {
                hubspot: {
                    id: '9f9e09f3-c285-45a7-8591-bddfd379494e',
                    // Step for showing Hubspot form.
                    step: 1
                }
            },
            products: [
                {
                    name: 'Product 1',
                    type: 'single_payment',
                    amount: 100,
                    step: 2,
                    showQuantity: true
                },
                {
                    name: 'Product 2',
                    type: 'single_payment',
                    amount: 200,
                    step: 2,
                    showQuantity: true
                },
                {
                    addon: true,
                    amount: 10,
                    name: 'Product Addon 1',
                    showQuantity: true,
                    type: 'single_payment',
                    step: 3
                },
                {
                    addon: true,
                    amount: 20,
                    name: 'Product Addon 2',
                    showQuantity: true,
                    type: 'single_payment',
                    step: 3
                }
              ]
        });
      </script>

Did this answer your question?

😞

😐

🤩