Browse Article by Topicscss product field
- Customize Your Form Using Custom CSS Codes
- How to Stylize Feedback/Lightbox Title?
- How to Inject Custom CSS Codes
- Submit Button CSS & CSS3
- How to find field IDs and names
- How to Apply Custom CSS to the Product Field
- How to Have Sub-Category or Sub-Labels on an Order Form
- How To Remove Sub-Fields From Full Address Field
- How To Have Two Column Payment Form
- How to make mobile friendly forms on JotForm
Related Forum Questions
- how can we add css in jotform
- Email Source Code for Page Break when Printing
- How can I adjust size of the font for sublabels?
- How to change font color of "Assignment Slots" Wizard.
- How to conditionally show/hide a field based on the quantity that is selected in a payment field?
- How to vertically align the arrow on the drop-down field?
- Left column is narrow
- KloudLess File Uploader: CSS injected is not affecting pop-up to select service to connect.
- How to change width value for fields in Configurable List?
- CSS code not working correctly
How to Apply Custom CSS to the Product FieldLast Update: October 10, 2016
UPDATE: You can easily change a particular field and create fantastic forms with Form Designer video course!
Let's say you want to hide the label with the word "free" (price= 0.00) in your Payment integration form, because you are looking to have them only as the product category titles for a menu style form.
2. In order to find out what is the ID for those particular labels and apply custom CSS codes, preview your form (Open in new tab) then view the form's source [Right-click > View Source]
3. While viewing the page source, you would need to find the title of the 'Free' items you have added
4. Now, get the numbers in the for value of the label tag above the title text
In this sample form, the numbers are 1008, 1009 and 1010.
5. Now, copy those numbers then use it in the CSS guide (to be injected to your form), in order to have the effect we are looking for on this example:
input[id*="input number"] + label > .form-product-details
For this example, If we have multiple product titles, simply duplicate the selectors above (in bold), then separate each with a comma.
input[id*="1008"], input[id*="1009"], input[id*="1010"]
input[id*="1008"] + label > .form-product-details, input[id*="1009"] + label > .form-product-details, input[id*="1010"] + label > .form-product-details
You can apply this guide not only to a Payment form, but to any field into a form