How to put a different static text next to the product options in a Purchase Order form?

  • Profile Image
    ChantalFournier
    Asked on September 25, 2019 at 04:26 PM

    I am working on some payment forms where someone orders an item and pays 30% of it's value upfront and we collect manually the remaining 70% at the time of shipping.

    They are custom-made products so I have complex products with many options  and the price varies by size.

    I need to have a way to display the full price but only collect 30% of that price. I was thinking I could have a non-editable text field for each size and this field is the full price of the product. And the the 30% cashdown price is entered as the price of the product for each size. That way, Jotform only collects the 30% but the customer can see the full price when entering their order. 

    I know it's possible to enter non-editable text boxes in jotform, but I have not found a way to do this for product-type fields.

  • Profile Image
    BDAVID
    Answered on September 25, 2019 at 05:44 PM

    I am working in a CSS code to put the static price via CSS injection. I'll get back to you as soon as possible.

  • Profile Image
    BDAVID
    Answered on September 25, 2019 at 06:21 PM

    Hi again, these specific code is for the "Multi-shade Manual" product options(I have counted 26), please copy it all(all what is highlighted and in bold letters):


    /*This is to remove the extra space between the last option and the static price*/

    .form-product-child-table tr > td:last-child{

    display: none !important;

    }

    /*Code for the Multi-shade Manual*/

    /*Label of the static column*/

    #input_21_1007_subproducts tr:nth-of-type(1):after{

    content: "Full Price" !important;

    }

    /*Code to put a static price next to each product option*/

    #input_21_1007_subproducts tr:nth-of-type(2):after{

    content: "$333.33" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(3):after{

    content: "$400.00" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(4):after{

    content: "$466.66" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(5):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(6):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(7):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(8):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(9):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(10):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(11):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(12):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(13):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(14):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(15):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(16):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(17):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(18):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(19):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(20):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(21):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(22):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(23):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(24):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(25):after{

    content: "$" !important;

    }

    #input_21_1007_subproducts tr:nth-of-type(26):after{

    content: "$" !important;

    }

    /*End of the code for Multi-shade Manual*/


    Please inject it in your form as shown on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Result:

    1569449373rest.png

    As you have noticed, only the first 3 options have the amount, you need to put it in this area(highlighted in yellow), example:

    #input_21_1007_subproducts tr:nth-of-type(5):after{

    content: "$THE AMOUNT HERE" !important;

    }


    I'll provide you the code for the rest of the products:

    1569449597code.png

    Hope this helps.

  • Profile Image
    BDAVID
    Answered on September 25, 2019 at 06:59 PM

    You may find the code for the " Motorized shade left" product here: https://pastiebin.com/5d8beb01d0cb9 

    You may find the code for the "Motorized shade right" product here: https://pastiebin.com/5d8bec548b90d 

    You may find the code for the "Multi-shade Solar Powered" product here: https://pastiebin.com/5d8bedc4743c1 

    You may find the code for the "Europa Manual on right" product here: https://pastiebin.com/5d8beefa7d3df 

    You may find the code for the "Europa Manual on left" product here: https://pastiebin.com/5d8befca5fcaa

    So, all you need to do is to copy each code, paste it in a text editor such as Sublime Text, put the amounts, and copy and paste it in the CSS area of your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here is my clone version: https://form.jotform.com/92676458899989

    If you want to clone it, and edit there, please follow this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Hope this helps.

  • Profile Image
    ChantalFournier
    Answered on September 26, 2019 at 03:26 PM

    Thank you, I have to wrap my head around this.

  • Profile Image
    jherwin
    Answered on September 30, 2019 at 01:06 PM

    Yes, you can find the field ID in the browser console or page source code.

    Also, if you add another product then you will need to change the 26 to 27 and so on. Please check the code below to see what I'm referring to:

    #input_21_1007_subproducts tr:nth-of-type(26):after{
    content: "$" !important;
    }

    Let us know if you are referring to something else.

  • Profile Image
    ChantalFournier
    Answered on September 30, 2019 at 01:11 PM

    If I add a product, I will need to change of "nth-of-type(26) " value for all the #input lines? Even those for previous products?

  • Profile Image
    JohnRex
    Answered on September 30, 2019 at 02:23 PM

    You don't need to change the selectors for the previous products. Just add 1 to all the succeeding ones. SAy you got there "nth-of-type(26) "  as the last product item then you add another, that would be 27 and so on.