How to Apply Custom CSS to the Product Field

October 18, 2021

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

For example:

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”]
{
display:none;
}
input[id*=”input number”] + label > .form-product-details
{
display:none;
}
label[for*=”input number”]
{
font-weight: bold;
text-decoration: underline;
}

For this example, If we have multiple product titles, simply duplicate the selectors above (in bold), then separate each with a comma.

For example:

input[id*=”1008″], input[id*=”1009″], input[id*=”1010″]
{
display:none;
}
input[id*=”1008″] + label > .form-product-details, input[id*=”1009″] + label > .form-product-details, input[id*=”1010″] + label > .form-product-details
{
display:none;
}
label[for*=”1008″],label[for*=”1009″],label[for*=”1010″]
{
font-weight: bold;
text-decoration: underline;
}

You can apply this guide not only to a Payment form, but to any field into a form.

Was this guide helpful?
Contact Support:

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:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: