How to adjust the field boxes?

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?

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,

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

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.

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.

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!

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.

Thank you, but that code did not work.

Hi there,

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

Thanks!

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!

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

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

Thanks!

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.

Oh, I see. Apologies for the confusion.

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

Thank you for your patience!

I apologize if this is taking a while.

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

Thanks!

Thank you for waiting!

Please use this CSS code.

.header-large {

  border-color: red;

}

#sublabel_input_5 {

 text-align: right !important;

 margin-top: -2px !important;

}

#input_5_confirm {

 top: 37px !important;

}

#q5_email {

 display: inline !important;

}

Let us know if you have further questions.

Best,

It's not working. Maybe I'm not entering what you sent me correctly. Please send me the entire code.

Hi,

The code that was added had some issues with brackets and adding them was ruining the styling, so I re-added a slightly different code to fix the email field:

.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;

}



span.form-sub-label-container{

 display: flex;

flex-wrap: wrap;

justify-content: flex-start;

}



input#input_5, #input_5_confirm{

margin-top: 1%;

margin-right: 1%;

}



div#cid_4 span.form-sub-label-container label{

width: 100%;

margin-left: 1%

}

Please copy the entire code above and replace your current code.

Here is a screenshot:

Sample Form link: https://www.jotform.com/build/220164844005952

Please let us know if you require any further assistance.

Hi.

There is still the issue of the sublabel example@example.com showing up under the first field which is for the email. I want it to show up under the second field which is the confirmation email. Please send me the full code again so I do not have any confusion.

Thank you

Hi,

Apologies, I didn't notice that request, I edited the email field code.

Please replace the current code with the code below:

.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;

}



#cid_5 span.form-sub-label-container{

 display: grid;

}



input#input_5{

grid-column: 1 / 2;

margin-top: 1%;

margin-right: 1%;

width: 90% !important;

}



#input_5_confirm{

grid-column: 2/ 3;

margin-top: 1% !important;

margin-right: 1%;

grid-row: 1 / 1;

width: 90% !important;

}



div#cid_4 span.form-sub-label-container label{

width: 100%;

margin-left: 1%

}

Sample form:

https://form.jotform.com/220164844005952

Please let us know if you require any further assistance.