How to add a divider in payment products?

  • Profile Image
    cameroncolin
    Asked on December 12, 2017 at 04: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!


  • Profile Image
    Jed_C
    Answered on December 12, 2017 at 06: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.png

    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.

  • Profile Image
    cameroncolin
    Answered on December 18, 2017 at 01: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).

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

  • Profile Image
    Jed_C
    Answered on December 18, 2017 at 02: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.

  • Profile Image
    cameroncolin
    Answered on December 18, 2017 at 03: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?

  • Profile Image
    Jed_C
    Answered on December 18, 2017 at 03: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.

  • Profile Image
    Jed_C
    Answered on December 18, 2017 at 04: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.png

  • Profile Image
    cameroncolin
    Answered on December 18, 2017 at 05: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 ​
    ...
  • Profile Image
    Jed_C
    Answered on December 18, 2017 at 07: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. 

  • Profile Image
    cameroncolin
    Answered on December 18, 2017 at 07: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
    ...
  • Profile Image
    cameroncolin
    Answered on December 18, 2017 at 07: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 ​
    ...
  • Profile Image
    Jed_C
    Answered on December 18, 2017 at 09: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.png

    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.gif

    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).

  • Profile Image
    cameroncolin
    Answered on December 19, 2017 at 03: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
    ...
  • Profile Image
    Ardian_L
    Answered on December 19, 2017 at 08: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.

  • Profile Image
    cameroncolin
    Answered on December 19, 2017 at 01: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
    ...
  • Profile Image
    Jed_C
    Answered on December 19, 2017 at 02: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. 

  • Profile Image
    cameroncolin
    Answered on December 19, 2017 at 06:23 PM

    Hopefully this time it will work.1513725634Jotform V3.jpg1513725651Jotform V3(2).jpg

  • Profile Image
    BDAVID
    Answered on December 19, 2017 at 06: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 


  • Profile Image
    Discover Okanagan Tours 
    Answered on December 19, 2017 at 06:53 PM

    Is it possible to add in a second line description?

  • Profile Image
    BDAVID
    Answered on December 19, 2017 at 07:01 PM

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