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

    How can we set up smaller price boxes?

    Asked by BBC2016 on March 16, 2016 at 04:08 PM

    smaller price boxes - when i try it changes the alignment of the $ signs...it makes a major mess of my form....

    Page URL:
    https://form.jotform.com/60631320400133

    boxes alignment CSS custom CSS
  • Profile Image

    Answered by Ben on March 16, 2016 at 04:26 PM

    I took a look at your form and I see the boxes on the right of the checkboxes.

    I presume that this is the layout that you wish to keep, but want them to be smaller.

    If that is true, then you can accomplish the same by using the following CSS code on your form:

    .form-textbox.form-product-custom_quantity {
        width: 40px;
    }

    You can see here how to add the same: Inject Custom CSS Codes

    Just one note would be to add the CSS code after all other CSS codes in your forms custom CSS field.

  • Profile Image

    Answered by BBC2016 on March 17, 2016 at 12:58 AM

    itsnot working for me when i publish it live - doyou see it? I put code inmy css.

     

    please help orclone this?? iam bad at coding.

     

     

    .form-textbox.form-product-custom_quantity {
        width: 40px;
    }

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 17, 2016 at 02:42 AM

    It appears that there are several issues in the css which is why the css that you injected was not being applied. To fix the issue, please add a colon above the code with the red X.

    To do so, click the Form Designer button.

    Select the CSS tab.

    Then follow the guide below.

    Once that is fixed, the CSS that you applied should now work correctly.

    Do let us know if the issue persists.
    Regards.

  • Profile Image

    Answered by BBC2016 on March 17, 2016 at 04:58 PM

    thank you!