Jotform for Beginners
Get more done with powerful, easy-to-use online forms. Learn how in this helpful, free guide from Jotform.
Download the Book
August 28, 2022
When creating forms in a Classic Form Layout, you’ll have an option to design your forms with Custom CSS codes. It’s one of the cool features in the Form Builder that allows you to customize the overall look of your form, including the Product Field.
Note:
The selectors used below are based on the new default theme of the classic form layout. If you’re using a different theme, the selector may be different. If that’s the case or you want customization not mentioned below, reach us by creating a support ticket if you need help.
The Free text appears when you add a product with no price. You can hide it with the below custom CSS codes:
.freeCurr + span {
display: none !important;
}
The form hides the Sub Products by default when you opt to create it in the product item. Your users will need to select the product item before they’re displayed. To display the Sub Products by default, inject the custom CSS codes below:
.sub_product .form-product-child-table {
display: block !important;
}
You can change the color and size of the product item’s price with the below custom CSS codes:
.form-product-details {
color: #ff6a00 !important;
font-size: 20px !important;
}
Change “ff6a00” with hex codes of the color you want, and do the same for the size from 20px to your preferred size. For Hex and RGB codes, we recommend Google Color Picker.
The total area includes the Sub Total, Tax, Shipping, and Total. You can customize these items at once or individually. To change the appearance at once, inject the below custom CSS codes:
.payment_footer .total_area * {
font-size: 19px !important;
color: #ff6a00 !important;
}
To individually customize the items, use the following custom CSS codes:
/* Void the current font size of the total area */
.payment_footer .total_area * {
font-size: unset;
}
/* Sub Total and Amount */
#subtotal-text {
font-size: 20px;
color: ff6a00;
}
#subtotal-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}
/* Tax and Amount */
#tax-text {
font-size: 20px;
color: ff6a00;
}
#tax-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}
/* Shipping and Amount */
#shipping-text {
font-size: 20px;
color: ff6a00;
}
#shipping-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}
/* Total and Amount */
#total-text {
font-size: 20px;
color: ff6a00;
}
#total-text + .form-payment-price {
font-size: 20px;
color: ff6a00;
}
When enabling the product column layout, the products have borders around there. You can remove the border with the following custom CSS codes:
.form-product-item {
border: none !important;
}
When you select a product item, the background color of its container will change. Inject the below custom CSS codes if you want that change:
/* When you hover the product item */
.form-product-item.new_ui.hover-product-item:hover {
background: rgba(85, 115, 215, 0.06);
background-color: rgba(85, 115, 215, 0.06);
}
/* When the item is selected */
.form-product-item.p_selected {
background: rgba(85, 115, 215, 0.06);
background-color: rgba(85, 115, 215, 0.06);
}
Use the following custom CSS codes to change the color and size of the product description:
.form-product-item .form-product-container .form-product-description {
color: ##43464e;
font-size: 14px;
opacity: .6;
}
The text has an opacity, so you may also consider adjusting that. You can put “1” if you want to remove the opacity.
Inject the following custom CSS codes to change the color and size of the category title:
.form-product-category-item {
font-size: 18px;
color: #18bd5b;
}
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Support Forum: https://www.jotform.com/answers/
Contact Jotform Support: https://www.jotform.com/contact/
Send Comment:
1 Comments:
I put in this CSS code and all the price tags are now gone on all the items not just the chosen ones for titles.
What did I do wrong?