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

    Any way to make the coupon entry less prominent?

    Asked by SunbridgeInstitute on December 04, 2015 at 01:18 PM

    Hi there,

    I sometimes have a situation where a person has to use a coupon, but it's rare, and I don't really want to emphasize the coupon button. The way that it is currently designed, the verbage is very bold, and it almost seems like I am announcing that they should have a coupon, when really I would like to say in small letters: "Enter your coupon code if you have one"

    Is there any way around this? If not, can this be a feature request? This could be a big problem for us because we are governed by the NYS Board of Education, and they do not want us to use coupon codes.

    Thank you very much!

    Page URL:
    https://www.jotform.com//?formID=53374278337968#

  • Profile Image

    Answered by SunbridgeInstitute on December 04, 2015 at 02:40 PM

    By the way, it would also be nice to be able to add some helper text to the coupon code entry area. Sometimes a company like ours would like to tell Submittors what kinds of coupon codes are available, to eliminate a diluge of inquiries. Thank you again!

  • Profile Image
    JotForm Support

    Answered by Mike_G on December 04, 2015 at 05:07 PM

    To change the header text of the coupon code here's what you need to do: 

    Then, you can add the CSS codes below to make the header look smaller.

    #coupon-header{

    font-weight: normal !important;

    font-size: 10px !important;

    }

    #id_77 br{

    display: none !important;

    }

    #coupon-table tr:nth-child(1) th, #coupon-table tr:nth-child(1){

    height: 12px !important;

    font-size: 10px !important;

    }

    #coupon-table, #coupon-table tbody{

    height: 12px !important;

    font-size: 10px !important;

    }#coupon-container{

    padding: 3px !important;

    margin-top: 0px !important;

    margin-bottom: 3px !important;

    }

    .form-product-item.hover-product-item, .form-product-item{

    margin-bottom: 0px !important;

    }

    You can add the CSS codes to your form with the help of this guide: How-to-Inject-Custom-CSS-Codes

    With regards to adding a placeholder text or a "Hint" text to the input text box of the coupon code, the only way that we can do that is by downloading the source code of the form and add a placeholder attribute on the input tag of the coupon code.

    How-to-get-the-Full-Source-Code-of-your-Form

    It would look like this once it's added.

    If you would not prefer downloading the Form's source code you can also try to add a sub-label on the input box using CSS. 

    #coupon-message:before{

    content: "Kind of coupon code" !important;

    display: block !important;

    padding-bottom: 2px !important;

    color: #D2D2D3 !important;

    }

    Note: You can change the text of the customized sub-label by changing the text inside the content property content: "Kind of coupon code" !important;

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by SunbridgeInstitute on December 07, 2015 at 09:24 AM

    This is terrific! Thank you so much!