Product quantity field displays with a nicer style in Form Designer than it does on my website

  • mackayjames
    Asked on February 26, 2015 at 9: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.  
  • Ben
    Replied on February 26, 2015 at 9: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?

  • mackayjames
    Replied 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

     

  • Ben
    Replied 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:

    Product quantity field displays with a nicer style in Form Designer than it does on my website Image 1 Screenshot 20

    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

  • mackayjames
    Replied on February 26, 2015 at 9: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

  • Charlie
    Replied 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.

    Product quantity field displays with a nicer style in Form Designer than it does on my website Image 1 Screenshot 20

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

    Thank you.

  • mackayjames
    Replied 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

  • Ashwin JotForm Support
    Replied 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!