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 width of all question to be same

    Asked by bodybuddies on August 30, 2013 at 08:53 AM

    Hello, I keep trying and failing to adjust the widths to match the 320 width of my form. Can you provide me a step by step instruction of how to do this?

     

    Thanks!

    Page URL:
    http://form.jotformpro.com/form/32414024080944

    Form width adjust the width recaptcha width same width
  • Profile Image

    Answered by jedcadorna on August 30, 2013 at 09:40 AM

    Hi, 

    I made a clone of the form and I can see that the form width is set to 320 and when I try to adjust the form width adapts. Please take a look at the screenshot. If its possible you can attach a screenshot to further explain the issue and that would be a big help to resolve this case.

     

    width

    Thanks,

    Jed

  • Profile Image

    Answered by bodybuddies on August 30, 2013 at 11:08 AM
    Jed,
    Sorry for not clarifying. I'm talking about the individual form fields. I
    would like them all to the be the same width--the width of the form. They
    currently look very unprofessional with all different widths.
    Thanks,
    Kristy
  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 30, 2013 at 12:36 PM

    Hello Kristy,

    To make all your form fields of the same width, please inject this custom css:

    input[type=email],input[type=howdid19], textarea {

    width:280px !important;}

    #first_15, #last_15 {width: 140px !important;}

     

    This should adjust the size of all fields in your form except the reCaptcha question as it can't be changed. You need to download your form's source code to change the width or you chould revert back to normal captcha field.

    Here is the guide which should help you: How to Inject Custom-CSS Codes

    Hope this helps.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by abajan on August 30, 2013 at 09:24 PM

    Hi Kristy,

    After much tinkering with a clone of your form, I was able to achieve this result. If you would like a similar outcome, just inject the following CSS:

    .form-line-column {
    width: 305px;
    padding-left: 9px;
    }

    .form-textarea {
    width: 285px;
    }

    #input_19,
    #recaptcha_image img,
    #recaptcha_response_field {
    width: 285px !important;
    }

    #cid_9 {
    padding-left: 1px !important;
    }

    #recaptcha_response_field {
    margin-left: 7px;
    }

    #cid_7 {
    width: 291px;
    }

    Should you require further assistance with this, we'd be happy to help.


    Cheers

  • Profile Image

    Answered by bodybuddies on September 06, 2013 at 12:49 PM
    Thank you so much! This was SO helpful! I find that this only works when
    each field is expanded. What if I shrink a field so I can fit two on the
    same line? How do I adjust the widths for those?
  • Profile Image
    JotForm Support

    Answered by guilledutra on September 06, 2013 at 02:04 PM

    Hi,

    Could you provide us an example of which fields do you need to have at the same line in order to give you better help?

    Thank