How can I break the payment field into different pages of my form?

  • Profile Image
    Asked on September 27, 2019 at 06:59 AM

    I have 3 style of t shirts.  Right now they are all displayed in a continuous style on page 1.  However, I would like to break that up and put an order form under each style instead of all on one page.  Before I start redesigning can I have order forms broken up like that.  To be more specific.  I want to put an order form after all the pictures and information on Fruit of the Loom.  The next section would be Next Level with the order form for those shirts under that.  And thirdly, Jerzees pictures and then order form.  Thanks,


  • Profile Image
    Answered on September 27, 2019 at 08:29 AM

    Hello Carol,

    I see you already have a page break in the form. That is how you will create a multi-page form. However, you cannot do this for the payment field. The payment field is a single field, and cannot be broken into multiple sections. 

    If you'd like a workaround, you can do this by source code. Similar to what we have in the following guide: 

  • Profile Image
    carol maurin
    Answered on September 27, 2019 at 10:30 AM

    Just to clarify, is the payment field part of the product order form?  If it is that would mean that I can not put a product order form under each shirt.  That page 2 was created by accident.  what is the advantage of a multi-page form?  What information should I put on page 2 to enhance the user experience?  

    Assuming I can't do that, I can create sub-labels in the order form which will make the order form less cumbersome.  I don't know coding so this could be a challenge.  But I can try.  Any hints would be appreciated.  

    Thanks for your help,


  • Profile Image
    Answered on September 27, 2019 at 11:41 AM

    Unfortunately no, you cannot break the payment field and display part of it under each shirt section.

    I would suggest you to please use regular form fields i.e dropdown & checkbox field to list your product options under each shirt. You can add "Form Calculation" widget in form to calculate the amount and then pass it to the payment field. The following guide should help you:

    Hope this helps.

    Do get back to us if you would like us to build a demo form for you, we will do the needful.

    We will wait for your response.

  • Profile Image
    Answered on September 27, 2019 at 12:37 PM

    That would be wonderful if you could build a demo form.  Thanks

  • Profile Image
    Answered on September 27, 2019 at 03:46 PM

    Hi, sorry for the delay, I have worked on a demo form, please check this example:


    If you like it, you may clone it as shown on this guide:

    What I did was the following:

    1) Divided the products with a Page Break field.

    2) Setup the Quantity, Color, Size, and Style per each product.

    3) Assigned a value to the last two Size options:

    4) Added a Form Calculation widget for each product to perform calculations:



    5) Then, summed up all them through another Form Calculation widget, which I named as "Total to be paid".

    6) Passed it to the payment field:

    Let us know if you need more help, we will be glad to assist you.