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 quantity field displays with a nicer style in Form Designer than it does on my website

    Asked by mackayjames on February 26, 2015 at 09:17 AM
    2.  If you look at the design view of this form, the Quantity input box/boarder and text displays with a nicer input box than what is displayed on my site.  I am using the latest version of Wordpress to display this form.  
    Product quantity quantity style
  • Profile Image

    Answered by Ben on February 26, 2015 at 09:35 AM

    Could you please give us a screenshot of the style in the Form Designer - or the style that you would like to have and we will take a look what is the difference and help you set it up properly?

  • Profile Image

    Answered by mackayjames on February 26, 2015 at 10:16 AM

    Hi Ben,

    In the designer is the look that I would like to have.. The defualt look is good.  However if you look at the checkout page I provided the Qty box is thin and narrow and the word "Quantity" is in small print.  I am at work so it is hard to get another screen shot, but being that the designer is correct it is my display on my site that is not good.  I tested it on my tablet, win7 pc, and samsung s3 phone and in all cases it looks the same as I described.

     

    James

     

  • Profile Image

    Answered by Ben on February 26, 2015 at 12:03 PM

    I presume James that this is the look at your are looking to have on the quantity field:

    To achieve that look please add the following code:

    .form-sub-label-container input.form-textbox {
        border: 1px solid #ccc;
        font-size: 1em;
    }

    If that is not the look that you see in your Form Designer, then we would need the screenshot to set it up properly, but please note that screenshots can only be added through the forum, if sent over email, they will not be shown.

    The code above can be added by following the steps hown here: Inject Custom CSS Codes

  • Profile Image

    Answered by mackayjames on February 26, 2015 at 09:25 PM

    Hi Ben,

    Thank you for the CSS code, I was able to adjust the form accordingly.

    One last question, I would like to change the Font Size of the Quantity Label... Can you send me the code for that...?

    Thank you again, 

    James

  • Profile Image
    JotForm Support

    Answered by Charlie on February 26, 2015 at 10:38 PM

    Hi James,

    For the quantity label, you can use this code:

    .form-sub-label {

        font-size: 1em !important;

    }

    I would also like to advise that you add your custom CSS codes, including the code given by my colleague, in the Form Designer->CSS tab.

    Do let us know if you need more help on this.

    Thank you.

  • Profile Image

    Answered by mackayjames on February 26, 2015 at 11:15 PM

    Hi and thank you for your last reply, this worked excellent.

    I forgot to ask how to change the width of the Quantity Field as well.

    If I put a 9 in there it looks good, if I put in 10, the 0 is cut off in the view...

    Hope there is a solution?

    Thank you again, James

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 27, 2015 at 12:24 AM

    Hello mackayjames,

    Please inject the following custom css code in your form and see if that solves your problem:

    .form-sub-label-container input.form-textbox {

    font-size: 17px !important;

    }

    The following guide should help you in how to inject custom css code in form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Thank you!