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 create fields of same width?

    Asked by deanharris on February 18, 2016 at 01:46 PM

    1. How can I make the boxes wider? I need to have 3 boxes across that are all the same size.

    2. How do I test the form?  I want to see how I will receive the data.

    3. Is there spell check when setting up document?

     

    Thank you

     

    size wider fields CSS
  • Profile Image

    Answered by Ben on February 18, 2016 at 04:42 PM

    Since we can assist with only one question / issue per thread, I have moved your other two questions to new threads here:

    http://www.jotform.com/answers/775877 - for the question on testing the form

    http://www.jotform.com/answers/775878 - for the spell check question

    In regards to your current question on setting up the fields to have the same width, it would be best to let us know what is the form and the fields on the same that you are having issues with.

    Since you currently have 1 form: http://www.jotform.us/form/60475245989167 I believe that it is the same one that you had the issue with.

    Now since there are 2 sets of fields with 3 fields in the same row, I presume that one of them, or all are those that give you trouble, so lets see what we can do about that :)

    To change all Full Name fields to be of same size, you can do that by applying this CSS to your form:

    [data-type="control_fullname"] input {
        width: 92px;
    }

    It will set them up so that they are starting and ending together with the Address fields (so that they are not wider than the same). It will also be applied to all Full Name fields on your form.

    Now the other are date fields, so I presume that they are not the ones that you were thinking on, but the code to make them of same size would be this:

    [data-type="control_datetime"] input {
        width: 50px;
    }

    This will make them of the same width, while not looking too wide

    If you wish to apply the change to both fields, you can simply copy paste the following code:

    [data-type="control_fullname"] input {
        width: 92px;
    }
    [data-type="control_datetime"] input {
        width: 50px;
    }

    Into your forms custom CSS field: Inject Custom CSS Codes

    The only important thing would be to add the CSS rule after all the other CSS code in the same field (under all the other text).

    Now for doing similar by yourself, it is best to check out the following guide:

    Video Course: Form Designer Basics

    It will show you some of the basics of the Form Designer that would allow you to make changes to your form within the same with ease.

    We will be replying to your other questions soon, but if you have any issues applying CSS or something else in regards to this, do feel free to let us know about it here and we would be happy to assist. :)