Adjusting the name field

  • dlasson
    Asked on September 1, 2016 at 4:14 PM

    How can I create a text box for a first name, then a one-character box for the last name?

    Thanks.

  • liyam
    Replied on September 1, 2016 at 9:09 PM

    Hello dlasson,

    Your only solution on this is to have a separate text box field for each (one for first name, and one for last name). And then set your last name field setting a max size of 1

    Adjusting the name field Image 1 Screenshot 30

     

    Not within JotForm method

    But if you wish to make use of the Full Name field,

    Adjusting the name field Image 2 Screenshot 41

    the only way for you to do this is to get your form's full HTML code, place it on your web page and add the attribute on the input text box to have a maxlength value of 1. 

    Example: <input class="form-textbox" type="text" size="15" name="q124_name124[last]" id="last_124" maxlength="1">

     

    Feel free to let us know if you have further questions.

  • dlasson
    Replied on September 2, 2016 at 9:28 AM

    Regarding the first solution: 1) how can I have the "first name" and "last initial" fields side by side? 2) how can I shrink the "last initial" field to the size of one character?

    I actually just found the following form where I did just this, but with the new Jotform interface, I cannot seem to find how I can duplicate it. 

    https://form.jotform.com/53006010463136

    Thank you!

  • Jan
    Replied on September 2, 2016 at 11:12 AM

    1) How can I have the "first name" and "last initial" fields side by side?

    I opened your form and I can see that the first name and last initial fields are already next to each other. Here's a screenshot:

    Adjusting the name field Image 1 Screenshot 30

    2) How can I shrink the "last initial" field to the size of one character?

    Please insert this custom CSS code to your form:

    input#last_38 {
    width: 25px !important;
    }

    Here's a guide: How-to-Inject-Custom-CSS-Codes. Here's the result:

    Adjusting the name field Image 2 Screenshot 41

    Related guide: How-to-Clone-an-Existing-Form-from-a-URL

    Hope that helps. Thank you.