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

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.

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.

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:

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:

Hope this helps.

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.

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

Hello BDavid,

So if I understand correctly, if I add product, I can add CSS for all new products, just by adding code for the product number:"#input_21_1007_subproducts" where the part in red changes for each subproduct?

I have looked at the sources of my page and this seems to be where you can find the ID:

<table id="input_21_1007_subproducts" class="form-product-child-table">

Is that right?

Thank you.

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.

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?

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.