Form Fields: Aligning All Fields to the Same Length as Phone Number or Name Field

HI,

I'm trying to have all my fields here the same lenght, but it doesn't work:

Can you help me out by having all the fields align with the phone number OR name field?

Thank you

Hi lassocie,

Thanks for reaching out to Jotform Support. I checked your form and it seems you have set the top label alignment and used the shrink feature to place the Courriel and Numéro de téléphone fields, but the name field is being displayed in the full row and the label is left aligned.

If you want to align all the other fields with the name field, you can disable the shrink feature of the  Courriel and Numéro de téléphone fields and change the label alignment to left. Let me show you how:

1. In Form Builder, select the field and click on the Gear icon on the right side to open the Field Properties.

2. Next, in the General tab, select the Left option in the Label Alignment section.

3. Then, in the Advanced tab, toggle the Shrink option to the Off position.

If you want to show all the short text fields in the same width, you can inject the custom CSS code. Let me show you how:

1. First, copy this code:

#id_74 .form-input, #id_75 .form-input, #id_76 .form-input, #id_93 .form-input {

  width: 410px !important;

  max-width: 475px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Next, in the Form Designer menu, click on the Styles tab, scroll down and delete the inject CSS code from line #9 to #17.

4. Now, paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Now all the fields will be displayed in the same width. You can increase or decrease the value in the CSS code to change the width.

Give it a try and let us know if you have any other questions.

Hi,

Now the last field of the section is align with the phone field, but the 2 first one aren't.

I want to keep Email and Phone shrink, and the 2 first field to be the same lenght as the last one of that section.

Is that possible?

Hi lassocie,

The CSS my colleague shared earlier forces all fields to have the same width, which is why the last one aligned with the phone field. Since you’d like to keep Email and Phonede téléphone shrunk but have the first two fields match the same length as the last one, we’ll need to adjust the CSS for those specific fields.

Can you clarify if you want them full width like the name field or just the same width as the last field, and whether the labels should stay on top or left-aligned? Once we know, we can provide the exact CSS to achieve it.

Once we hear back from you, we can help you sort this out.

First choice, align with the green line, second choice align with the yellow line (if the name can't be shorten)

Hi lassocie,

Can you try adding the following CSS to your form instead of the one you currently have?

#cid_74, #cid_93 {

 max-width: 421px;

}

#cid_76 {

 max-width: 324px;

}

#input_93 {

 min-width: 100% !important;

}

After you add it, this should be the result:

Give it a try and let us know how it goes.

Almost there!

Can we fix the little difference?

Hi lassocie,

Delete the existing custom CSS code and use the one below:

 #id_74 .form-input,  #id_75 .form-input,  #id_76 .form-input,  #id_93 .form-input {

    width : 422px !important;

    max-width : 475px !important;

}



 #cid_74,  #cid_93 {

    max-width : 460px;

}



 #cid_76 {

    max-width : 380px !important;

}



 #input_93 {

    min-width : 100% !important;

}

Check out my screenshot below to see the result:

Try that and reach out again if you need more help.

that's good now, thank you :D