How to add a divider in payment products?

  • cameroncolin
    Asked on December 12, 2017 at 4:35 PM

    I had sent over a message before in regards to an online order form, however I could not follow the directions with the response. I will include the url for another form from your templates that will work with a few minor tweaks.

    https://www.jotform.com/build/73456606678267.


    Please see attached photo for the questions, and maybe a little insight. Thank you for your time!


    Jotform Thread 1321293 Screenshot
  • Jed_C
    Replied on December 12, 2017 at 6:26 PM

    Thanks for reaching out.

    Regarding your first question, what you can do is duplicate a divider element and placed it above the "Order Now" text.

    Sample screenshot:

    1513120999divider sample Screenshot 10

    Now, inject the CSS below to align it just above the "Rhubarb Liqueur" product. Or you can just clone this form https://form.jotform.com/73456564539973. Please refer to our guide here on how to clone a form. 

    li#id_37.form-line{

    position: absolute; 

    top: 1538px;

    }

    With regards to your other question, would you mind clarifying it or provide a sample that you want to copy so we can check if it's feasible to change.

    Looking forward for your response.

  • cameroncolin
    Replied on December 18, 2017 at 1:40 PM

    I must have done something and can no longer inject the divider between 2 products. I have taken another screenshot to show exactly what i would like to do, hope fully you can help.

    Basically I need to have numerous headings / product categories within 1 purchase order. About 20. They can be all on one form, or separated by page if that is an option. I have not started to enter the data as I want to make sure that this is an available option before starting. Please see attached for PDF of an example.1513622402Jotform Separated form V2 (2) Screenshot 10

    Link to form: https://form.jotform.com/73515498778273 

  • Jed_C
    Replied on December 18, 2017 at 2:25 PM

    Thanks for the response and for the screenshot. What you need in order to get multiple headings for multiple products is to divide your products and create a multiple payment form. Then each of these forms will be embedded into the same form via iFrame method.

    Please see our guide here https://www.jotform.com/help/182-How-to-Create-a-Basic-Multiple-Payment-Form on how you can achieve a multiple header for multiple products.

    Let me know if you have any questions.

  • cameroncolin
    Replied on December 18, 2017 at 3:10 PM

    Thank you for yyour response. I'm not sure if this is what I am looking for. I cannot seem to edit where it says Pay Pal Order form within the question, as well i need to have multiple products within each box, if that makes sense? Is there an option to chat?

  • Jed_C
    Replied on December 18, 2017 at 3:32 PM

    We do have Chat Support, but currently, chat is not ON that is why you don't see it. Just reply to this thread for questions and any from our support would be able to answer your questions / concern via forum.

    Regarding your requirement on making a multiple headings separated each product group, let me try to make a sample form with custom CSS and I'll let you know once done.

  • Jed_C
    Replied on December 18, 2017 at 4:10 PM

    Please check my sample form here https://form.jotform.com/73515585873973. Let me know if that is what you are trying to achieve?

    1513631431heading sample Screenshot 10

  • cameroncolin
    Replied on December 18, 2017 at 5:43 PM
    I believe so, I'll have to check on my desktop once back in the office, this is what I see on mobile.
    ⁣Sent from BlueMail ​
    ...
  • Jed_C
    Replied on December 18, 2017 at 7:10 PM

    Sure! Let me know your feedback about the sample form. Basically, in order to achieve this custom look, you'll have to create a filler product that will be used to hide via CSS. In my sample screenshot, you will noticed that the space between the header and other product item are also a product that I made hidden in order to create the space.

    Ex.

    1. Item 1

    2. Item 2

    3. Item 3

    4. Filler product (will be hidden via CSS)

    5. Filler product (will be hidden via CSS)

    6. Heading (duplicate header and will be adjusted via CSS positioning property)

    7. Item 4


    Looking forward for your response. 

  • cameroncolin
    Replied on December 18, 2017 at 7:43 PM
    The sample here looks good, as well as when i click the link. However, when i clone it, it shows me me something completely different. There are 2 other elements that i would like to see, sorry it's something that the vendor requires. Is there an option to put in a product number - maybe this can be hidden from the customer filling in the form but needs to be visible once the form is submitted? Second element is to have a second line description of some of the products. Thank you so much for your help!
    Cheers!
    Cam Colin
    250.899.1878 [tel:%28250%29%20899-1878] (c)
    1.800.797.6335 [tel:%28800%29%20797-6335] (tf)
    wine@discoverokanagantours.com
    www.discoverokanagantours.com
    ...
  • cameroncolin
    Replied on December 18, 2017 at 7:43 PM
    I have no idea what that means... I'll have to take a look later tonight and get back to you.
    ⁣Sent from BlueMail ​
    ...
  • Jed_C
    Replied on December 18, 2017 at 9:08 PM

    Regarding the product number. Would including that in the product name itself works with your vendor? Or it needs to be on a separate element? 

    Ex. 

    1513647654sku num Screenshot 10

    It's possible to create a hidden field then create a conditional rule that will pass a value to the hidden field when you have selected a certain product. You can then add these fields that you wish to populate in thank you page.

    Here's a sample:

    1513649161product num calculation Screenshot 21

    You can provide us the list o product numbers per item and we will add it to your form's thank you page summary (Customers will see this on check out or thank you page).

  • cameroncolin
    Replied on December 19, 2017 at 3:43 AM
    What I am doing is trying to eliminate an Excel File, and replace it with a JotForm. Please see attached with the best way for me to describe the form I am trying to create. Once again, thank you for all the support, will be subscribing to one of your paid services once i know you can accommodate this request. Please note that the Jpeg is coming in multiple pages, as i cant convert from PDF to a single file.
    Cheers!
    Cam Colin
    250.899.1878 [tel:%28250%29%20899-1878] (c)
    1.800.797.6335 [tel:%28800%29%20797-6335] (tf)
    wine@discoverokanagantours.com
    www.discoverokanagantours.com
    ...
  • Ardian_L
    Replied on December 19, 2017 at 8:16 AM

    Can you please send the images, there is no image attached in the last reply from your side.

    We will be waiting for you reply! Thank you.

  • cameroncolin
    Replied on December 19, 2017 at 1:43 PM
    My Apopogies!
    Cheers!
    Cam Colin
    250.899.1878 [tel:%28250%29%20899-1878] (c)
    1.800.797.6335 [tel:%28800%29%20797-6335] (tf)
    wine@discoverokanagantours.com
    www.discoverokanagantours.com
    ...
  • Jed_C
    Replied on December 19, 2017 at 2:52 PM

    Sorry, but we still don't see any attachments or image in your most recent response. Please follow this guide https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum on how you can attach image with your response. 

  • cameroncolin
    Replied on December 19, 2017 at 6:23 PM

    Hopefully this time it will work.1513725634Jotform V3 Screenshot 101513725651Jotform V3(2) Screenshot 21

  • David JotForm Support Manager
    Replied on December 19, 2017 at 6:46 PM

    Unfortunately, it will not be possible to accomplish that Excel layout in a payment field. We can do only a few minor changes to it, as explained on this guide: https://www.jotform.com/help/178-How-to-Have-Sub-Category-or-Sub-Labels-on-an-Order-Form 


  • Discover Okanagan Tours
    Replied on December 19, 2017 at 6:53 PM

    Is it possible to add in a second line description?

  • David JotForm Support Manager
    Replied on December 19, 2017 at 7:01 PM

    Yes, you just need to add another free product, as shown on the guide.