What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Product names in payment field not accepting HTML codes

    Asked by BBC2016 on January 31, 2017 at 07:14 PM

    https://www.jotform.us/form/61881093178160

     

    Please help out here. This attached image is what it is SUPPOSED to look like. I cant get it to look like this. Please provide workaround demo form please - Ive tried EVERYTHING!

     

     

     

    Page URL:
    https://www.jotform.us/form/61881093178160

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Mike_G on January 31, 2017 at 10:53 PM

    We would like to apologize, however, HTML tags are now not being accepted as part of field label names.

    To still achieve what is shown in the image you have included in your post, please do the following.

    First, please remove the HTML tags from the product names of your products in your payment field.

    Also, please remove what is supposed to be set as sub-labels of the product names.

    It should just show what is shown in the image below.

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

    span#product-name-input_13_1018, span#product-name-input_13_1017, span#product-name-input_13_1016 {

        font-weight: bold;

        position: relative;

        top: -4px;

    }

    span#product-name-input_13_1018:after {

        content: "Thank you in advance for your contribution!" !important;

        font-weight: normal;

        display: block !important;

    }

    span#product-name-input_13_1017:after {

        content: "Thank you for your generosity!" !important;

        font-weight: normal;

        display: block !important;

    }

    span#product-name-input_13_1016:after {

        content: "Select one of the options in the pull-down menu." !important;

        font-weight: normal;

        display: block !important;

    }

    input#input_13_1018 {

        height: 9px;

        width: 9px;

        margin-left: 0px !important;

    }

    I have applied the workaround I have mentioned above in the form below:

    https://www.jotform.com/form/70308443099963

    Please feel free to clone it to your account so you can inspect it better.

    Thank you.