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 separately resize Prefix from First and Last Name?

    Asked by mamoros on August 25, 2016 at 09:14 PM

    Hello Support - How can I:

    1.  Separately resize Prefix from First and Last Name so all 3 fields can fit on one line?  This also happens with the Address block of fields.

    2. 

    Calculate age from the Date of Birth date field?


    3. 
    Control the space between fields on the same line AND have fields line up?


    4. 
    Line up vertical spacing for a row of fields?


    5. 
    Have a field expand or shrink to the maximum size of the field?

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

    Multiple Questions date field size name shrink
  • Profile Image
    JotForm Support

    Answered by Chriistian on August 25, 2016 at 11:12 PM

    We usually ask our users to post each question in separate threads to avoid confusion and so that we can better assist each query. With that in mind, I have moved some of your questions to their own threads. I will be assisting you with the first question here.

    Separately resize Prefix from First and Last Name so all 3 fields can fit on one line?  This also happens with the Address block of fields.

    You can inject the custom CSS code below to resize the Prefix, First Name and Last Name. You can also modify the highlighted value to change it based on your preference. Please follow this guide to learn How to Inject Custom CSS Codes.

    li[data-type=control_fullname] div span:first-child { /*Adjust width of Prefix*/

        width: 50px;

        margin-right: 10px !important;

    }

    li[data-type="control_fullname"] div span:nth-of-type(2) { /*Adjust width of First Name*/

        width: 30%;

        margin-right: 10px;

     

    }

    li[data-type="control_fullname"] div span:nth-of-type(3) { /*Adjust width of Last Name*/

        width: 30%;

        margin-right: 10px;

     

    }

    May I ask how you would like to resize the Address field block that you mentioned? I will wait for your response.

    You can check out your other questions in their threads by following the links below:

    https://www.jotform.com/answers/916722 

    https://www.jotform.com/answers/916724 

    https://www.jotform.com/answers/916725 

    https://www.jotform.com/answers/916726

    Regards.

  • Profile Image

    Answered by mamoros on August 25, 2016 at 11:45 PM
    Hello Christian - Thank you for your response.
    It seems to me that there should be an option to control the width of
    the fields in the Full Name block without having to go into CSS. I'll
    take a look at it. I may end up creating 4 separate fields for name
    (prefix, first, middle initial, and last).
    For the Address block, I'd like to have about 30 characters for Street
    Address, 20 characters for City, 2 for State (2-character postal
    abbreviation), 5 characters for Zip Code, and 4 characters for Zip+4.
    Thank you for your assistance!
    Melinda
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on August 26, 2016 at 01:22 AM

    Please inject the custom CSS code below to modify the width of the address field.

    .form-address-table {

        width: 100%;

        max-width: fit-content;

    }

    /*Address*/

    .form-address-table td[colspan="2"] .form-sub-label-container {

        width: 256px;

        margin: 0;

    }

    /*City*/

    .form-address-table tr:nth-of-type(3) td span {

        width: 170px;

    }

    .form-address-table tr:nth-of-type(3) td {

        width: 170px;

     

    }

    /*State*/

    .form-address-table tr:nth-of-type(3) td:nth-of-type(2) span {

        width: 28px;

    }

    /*Zip code*/

    .form-address-table tr:nth-of-type(4) td span {

        width: 70px;

    }

    If you need further assistance, please let us know.
    Regards.