Product Settings Name & HTML

  • btwebgroup
    Asked on March 4, 2017 at 5:59 PM

    We were at one time able to use HTML within product name fields to style textual content. I noticed today that one of our forms shows support for this to have been removed.

    Can you confirm the issue and advise of a way to style our product setting name fields?

  • Mike_G JotForm Support
    Replied on March 5, 2017 at 3:21 AM

    We would like to apologize for any inconvenience, due to security reasons

    However, you can try to do the following as a workaround that might meet your requirements:

    First, change the Product Item Name as shown in the image below.

    Product Settings Name & HTML Image 1 Screenshot 30

    Then, add the following CSS codes below to your form.

    How-to-Inject-Custom-CSS-Codes

    span#product-name-input_14_1017 {

        font-size: 1.5em !important;

        font-weight: bold !important;

    }

    span#product-name-input_14_1017:after {

        content: "A uniform professional choral look.";

        display: block !important;

        padding-left: 20px !important;

        font-style: italic !important;

        font-size: 14px !important;

        font-weight: normal !important;

    }

    div#cid_14 div > div .form-product-item.hover-product-item:nth-child(2) .form-product-details:before {

        content: "Especially designed to fit most music folders and ring binders that hold sheet music. The Original ChoroGrip Strap creates a secure grip for music folders and binders. The hook and loop strap adjusts to your hand to reduce arm and wrist fatigue. Be confident, no fumbling with folders.";

        display: block !important;

        padding-left: 20px !important;

    }

     

    span#product-name-input_14_1016 {

        font-size: 1.5em !important;;

        font-weight: bold !important;;

    }

    span#product-name-input_14_1016:after {

        content: "A uniform professional choral look.";

        display: block !important;

        padding-left: 20px !important;

        font-style: italic !important;

        font-size: 14px !important;

        font-weight: normal !important;

    }

    div#cid_14 div > div .form-product-item.hover-product-item:nth-child(12) .form-product-details:before {

        content: "This innovative product will hold unpunched scores, booklets, folded sheets, etc. in the same ring binder with punched materials. Each ChoroGrip Ring Adapter holds up to six scores or booklets, octavo or letter size.";

        display: block !important;

        padding-left: 20px !important;

    }

    div#cid_14 div > div .form-product-item.hover-product-item:nth-child(12) .form-product-details:after {

        display: block !important;

        content: "Price below is per package of three (3)";

        padding-left: 20px !important;

        font-weight: bold !important;

    }

    It should look like this after:

    Product Settings Name & HTML Image 2 Screenshot 41

    I hope this helps. However, if this is not what you're aiming to achieve, please provide us more details or a description of what you would like to happen, then, we will try to find the best solution for you.

    Thank you.

  • btwebgroup
    Replied on March 6, 2017 at 10:52 AM

    Awesome. Thank you very much for this information. It worked beautifully. :)