How to customize products category headers in product section?

  • LEWIShome
    Asked on July 8, 2017 at 7:45 PM
    I am also having this trouble. here is my form. I'd like to create headings that are larger and bold, without check boxes or "free" listed on either side
  • Kevin Support Team Lead
    Replied on July 8, 2017 at 10:31 PM

    I have been working on the needed CSS code that will help you to customize the headers on your form, please, inject the following code: 

    input[id*="1015"], input[id*="1014"], input[id*="1013"], input[id*="1016"], input[id*="1017"], input[id*="1018"]{

    display:none;

    pointer-events: none;

    }

     

    label[for*="1015"] .form-product-details, label[for*="1014"] .form-product-details, label[for*="1013"] .form-product-details, label[for*="1016"] .form-product-details, label[for*="1017"] .form-product-details, label[for*="1018"] .form-product-details{

    display:none;

    }

     

    label[for*="1015"], label[for*="1014"], label[for*="1013"], label[for*="1016"], label[for*="1017"], label[for*="1018"]{

    font-weight: bold;

    text-decoration: underline;

    pointer-events: none;

    }

    If you need to either increase or decrease the headers font size, then you would only need to add "font-size: 10px;" to the last piece of code, example: 

    label[for*="1015"], label[for*="1014"], label[for*="1013"], label[for*="1016"], label[for*="1017"], label[for*="1018"]{

    font-weight: bold;

    text-decoration: underline;

    pointer-events: none;

            font-size: 10px;

    }

    Here is a cloned version of your form where I have applied the given code and it worked: https://form.jotformpro.com/71888437398982 

    Hope this helps.