How to adjust the field boxes?

  • Profile Image
    faragalla
    Asked on January 14, 2022 at 07:04 AM

    My Full Name element is #id_4


    How do I statically adjust the width of each field within the Full Name element; First Name, Middle Name and Last Name?

  • Profile Image
    Nina_J
    Answered on January 14, 2022 at 07:31 AM

    Hi faragalla,

    Thank you for reaching out to us!

    If you are referring to adjusting the box or field for the Names, then CSS code should do the work.

    Could you please share the form URL you are working on?

    We will wait for your response.

    Best,

  • Profile Image
    faragalla
    Answered on January 14, 2022 at 05:18 PM

    It is not working. I would like to make the First name field big, the middle initial field just big enough for one letter and the last name field big as well.


    https://www.jotform.com/build/220132510880039

  • Profile Image
    Mary_F
    Answered on January 14, 2022 at 09:40 PM

    Hi faragalla,

    Thank you for getting back to us.

    Please allow me time to check on the CSS code, I will get back to you as soon as I have an update.

    Thank you.

  • Profile Image
    Mary_F
    Answered on January 15, 2022 at 04:31 AM

    Hi faragalla,

    Please try this CSS code:

    .form-line:not(.fixed-width) .form-textbox:not(.time-dropdown){

      min-width: 20% !important;

      max-width: 147% !important;

    }

    input#first_4 {

      width: 230px;

    }

    input#middle_4 {

      width: 100px;

      margin-left: 19%;


    }

    input#last_4 {

      width: 230px;

    Please check this guide on how you can inject custom CSS codes on your form: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    If you need further assistance, please let us know.


  • Profile Image
    faragalla
    Answered on January 15, 2022 at 06:37 AM

    Hi, that worked. I edited the code a little bit.


    I used:

    .form-line:not(.fixed-width) .form-textbox:not(.time-dropdown){

    min-width: 20% !important;

    max-width: 100% !important;}


    input#first_4 {width: 300px;}

    input#middle_4 {width: 50px;

    margin-left: 35%;}

    input#last_4 {width: 300px;}


    Unfortunately, the sublabel for Middle Initial is not lining up with the middle field. Also, how do I bring the Last Name field AND sublabel to the left a little bit?

    https://form.jotform.com/220132510880039


    Also for email #input_5 on the same form, I do not want one field on top of the other, I want the two fields side by side, like basically the First and Last Name fields. How do I move the confirmation email field and sublabel to the right of the email field?


    Finally, how do I change the colors of the faint lines that are above and below the "DO NOT PRINT THIS FORM" header on top of the page?

    Thank you!

  • Profile Image
    Saeed_K
    Answered on January 15, 2022 at 09:38 AM

    Hi there -

    Thanks for getting back to us.

    Kindly inject the following CSS code into your form.

    Complete guide 👉 How to Inject Custom CSS Codes

    #sublabel_4_middle {

      text-align: center;

    }

    #sublabel_4_last {

      margin-left: 1px;

    }

    #cid_3 div.form-header-group {

      border : 2px solid #353e7c;

    }

    Let us know if you have any questions or if you need further assistance.

  • Profile Image
    faragalla
    Answered on January 15, 2022 at 09:43 AM

    Thank you, but that code did not work.

  • Profile Image
    Nina_J
    Answered on January 15, 2022 at 11:43 AM

    Hi there,

    Please give me some time to generate a CSS code for you, I'll get back to you asap.

    Thanks!

  • Profile Image
    Nina_J
    Answered on January 15, 2022 at 01:26 PM

    Thank you for waiting.

    Here's a cloned form that has your requirement- https://form.jotform.com/220145350115945

    Feel free to copy the CSS code too.

    Let us know if you have further questions.

    Thanks!

  • Profile Image
    Nina_J
    Answered on January 15, 2022 at 02:09 PM

    By the way,

    Here is the CSS code in case you couldn't get it in the cloned form above.

    input#input_5_confirm {

      left: 50%;

      position: absolute;

      width: 300px;

      top: -8px;

    }

    .form-line:not(.fixed-width) .form-textbox:not(.time-dropdown){

    min-width: 20% !important;

    max-width: 100% !important;}


    input#first_4 {width: 300x;}

    input#middle_4 {width: 30%; margin-left: 35%;}

    input#last_4 {width: 300px;}


    #sublabel_4_middle {

     text-align: center;

    }

    #sublabel_4_last {

     margin-left: 1px;

    }

    #cid_3 div.form-header-group {

     border : 2px solid orange;

    }

    To change the color of the box outline

    #cid_3 div.form-header-group {

      border: 2px solid orange;

    }

    and

    1642273578_61e31b2ab61ef_

    Again, here's the cloned form https://form.jotform.com/220145350115945

    Thanks!

  • Profile Image
    faragalla
    Answered on January 16, 2022 at 06:25 AM

    Thank you for the code, it is working fine, but needs a little tweaking.


    I need to move the sublabel for the confirm email to be under the confirm email field.

    In your example

    https://form.jotform.com/220145350115945

    the sublabel "example@example.com" is underneath the normal email field, not the second confirm email field.


    You also changed the color of the boarder around the header around "DO NOT PRINT THIS FORM." I wanted to change the color of the faint line between Covid-19 Testing Online Intake Form and DO NOT PRINT THIS FORM. Please let me know how I can change that.

  • Profile Image
    Nina_J
    Answered on January 16, 2022 at 07:50 AM

    Oh, I see. Apologies for the confusion.

    Let me get back to you with the right CSS code.

    Thank you for your patience!


  • Profile Image
    Nina_J
    Answered on January 16, 2022 at 04:45 PM

    I apologize if this is taking a while.

    Just give me more time to come up with the right CSS code.

    Thanks!