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

    Setting up the width of all fields to match on jotform

    Asked by askmeabout on September 21, 2014 at 12:26 PM

    #2. I want to set up my fields with the equal width but I can't find the width parametrs in some fields - look at these 2 screenshots  - first of the dropdown field id=#input_7, the second of the emaol field id=#input_6:

     

     

    and here:

     

     

  • Profile Image

    Answered by Ben on September 21, 2014 at 02:39 PM

    Hi,

    Yes the email field has the number of characters that they accept and does not show the width.

    I would suggest using our toolbar as it usually provides the quick access to such tools (even if they are not shown in the properties).

    I have changed the width of your jotform fields to match one another using toolbar as mentioned above, but as you will see if you try to do it yourself, some fields like the phone field do not offer setting the width, so if you want them to be as wide as others, you can apply some CSS magic to them.

    In case of your jotform this CSS would do what is needed:

    .mask-phone-number.form-textbox
    {
        width:385px;
    }

    Now, if I wanted to make them all align nicely, I would make that text box at the bottom the same width, but would like to allow users to increase its vertical value..so I would add this CSS code to it as well:

    .form-textarea
    {
        resize: vertical;
        width: 385px;
    }

    Now I would like to get that submit button to join the party so I would add this code as well:

    .form-submit-button
    {
        width: 395px;
    }

    In the end it will look like this (you can clone it to your account and have it all set): http://form.jotformpro.com/form/42635227815961

    If you prefer to add things by yourself you can grab the sections of interest above, or copy the entire CSS here:
    .mask-phone-number.form-textbox
    {
        width:385px;
    }
    .form-textarea
    {
        resize: vertical;
        width: 385px;
    }
    .form-submit-button
    {
        width: 395px;
    }

    What now? Inject the CSS to your form and set the other sizes using the toolbar (as shown above). To see how you can inject the CSS you can follow these steps: Inject Custom CSS Codes

    Do let us know if that helped you and if you have any further questions.

    Best Regards,
    Ben