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 to change the height of the input boxes?

    Asked by galesna on August 26, 2015 at 03:01 PM
    1. The height size of the individual boxes (I wish to make the boxes taller)
  • Profile Image

    Answered by Ben on August 26, 2015 at 03:10 PM

    We can set this up for you quickly, but before we do that, let me just confirm if you wish to have the height of textboxes (inputs) higher for specific amount and if this change should only be shown on the mobile phones - or is this something that you would like to have as active on all variations of your form?

  • Profile Image

    Answered by galesna on August 27, 2015 at 01:12 PM

    I dont understand your question: but the textfield boxes are narrower in height on the mobile version than the desktop version. I want the boxes to look as they look on my editor whether in mobile or desktop version.

     

  • Profile Image

    Answered by Ben on August 27, 2015 at 02:08 PM

    I took a look at the both versions and there is a slight difference, but from what is shown to me the difference are 2px - the mobile version has the 23px in height and the desktop version has 25px in height.

    To set them both to 25 - or any other, this is the code that you can use:

    input.form-textbox {
        height: 25px;
        min-height: 25px;
    }

    It will set only the size of the input - textbox.

    You can add it to your form by following these steps: Inject Custom CSS Codes just do remember to add the codes after all the other code that you might find in there.

    Do let us know how it goes.

  • Profile Image

    Answered by duibuzzkill on August 27, 2015 at 02:47 PM

    what do you mean by the input only?

    take a look at my form titled "Lead Form" and see it in mobile, I want it to look like that as far as box size is concerned

  • Profile Image

    Answered by Ben on August 27, 2015 at 03:04 PM

    OK, I took a look at the lead form, and I see that it is not the same that I was referencing.

    This is the Lead Form: http://www.jotform.us/form/52111648081145 and this is the one that I was under the impression that you want to set the field height for: http://form.jotformpro.com/form/52302090579958

    Now looking at it, it seems that the submit button is 2px higher than the rest, but other fields seem same.

    Can you please tell us what device you are using - and possibly a screenshot so that we can check it and with the same device and help you set it all up to be even?

  • Profile Image

    Answered by galesna on August 28, 2015 at 05:45 PM

    you lost me, I don't even know if we're on the same page anymore.

    HERE'S WHAT I WANT DONE ON THIS FORM:

    http://form.jotformpro.com/form/52302090579958

    1. I want the boxes center aligned in MOBILE VERSION.

    2. I want the box height to be bigger. As in I want the height of the boxes to look the same on desktop and mobile. They look too narrow in height in mobile.

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 28, 2015 at 08:32 PM

    @galesna

    Inject these CSS codes on that form, this should style the form according to your description.

    @media screen and (max-width: 480px){

    .form-line {padding: 2% 5% !important;}

    .form-line.form-line-column {display: block;}

    .mask-phone-number {width: 100% !important;}

    [data-type="control_phone"] .form-sub-label-container:first-child {

             width: 100% !important;

             margin-right: 0 !important;

    }

            .form-textarea {width: 100% !important;}

    .form-all input {

             height: 33px !important;

             min-height: 33px !important;

    }

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    Result:

    If you see any issues, let us know.

  • Profile Image

    Answered by duibuzzkill on August 28, 2015 at 09:25 PM

    How about the "referral details" question label? Its moved over to the right too much

  • Profile Image
    JotForm Support

    Answered by abajan on August 29, 2015 at 04:03 PM

    Hi,

    If it's this form you mean, removing the following rule from the CSS should resolve the issue:

    #label_9 {
       padding : 0px 0px 0px 35px;
    }

    That code applies 35 pixels of padding to the left of the element.

    Thanks

  • Profile Image

    Answered by galesna on August 29, 2015 at 11:10 PM

    I input the padding code because on the desktop version it is aligned too far to the left and not above the "referral details" box.

    Is there a workaround for this?

  • Profile Image

    Answered by galesna on August 29, 2015 at 11:45 PM

    ok now my form looks all messed up. What is it with this designer that keeps screwing up my damn form?

    http://form.jotformpro.com/form/52302090579958

    why does it look like this now? None of the CSS works in the designer and it just screws up my forms .

    You guys need to fix this or im going to another form provider

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 30, 2015 at 05:22 AM

    Sorry for inconvenience this may caused you. 

    It seem that you have deleted your form and I am unable to see what is the issue. 

    You can always use Form Revision History to revert your form back to an older version. 

    Feel free to contact us if you have any other questions.