Form Fields are not aligning correctly

I have created one jotform - https://form.jotform.com/MHS_Support/genwell-health

1. You can see I have set field Label alignment to Left, but all the labels are Top aligned/
2. And my Address field and 2 other fields beneath it are not getting aligned with form setting.

I tried changing CSS as well but it didn't work.

Please help!

Shikhaa

Hi Shikhaa,

Thanks for reaching out to Jotform Support. I cloned your form to test it, and I easily replicated the issue. There is an easy fix for this, we just need to remove the current theme, which is overriding your CSS. Let me show you how:

1. First, copy this backup CSS code you created:

/* Ensure all form labels align left with no unnecessary margins */

.form-label {

text-align: left !important;

margin-left: 0px !important;

padding-left: 0px !important;

}

/* Ensure all input fields are full width and aligned */

.form-input-wide {

width: 100% !important;

max-width: 100% !important;

box-sizing: border-box !important;

}

/* Reset radio buttons and checkbox questions to align with inputs */

.form-multiple-column,

.form-single-column {

margin-left: 0px !important;

padding-left: 0px !important;

}

/* Adjust overall form container margins for consistent alignment */

.form-all {

margin: 0 auto !important;

padding: 0 30px !important;

max-width: 800px;

font-size:12px!important;

}

/* Adjust

/* Make Street Address Line 1, Line 2, and Postcode full width */

#input_418_addr_line1,

#input_418_addr_line2,

#input_418_postal {

width: 100% !important;

max-width: 100% !important;

box-sizing: border-box !important;

}

/* Adjust City and State fields side by side with equal widths */

#input_418_city,

#input_418_state {

width: 48% !important;

display: inline-block !important;

box-sizing: border-box !important;

vertical-align: top !important;

}

/* Ensure no extra margin on Address field container */

#id_418 {

margin-left: 100px !important;

padding-left: 0px !important;

width: 100% !important;

}

.form-label.form-label-auto {

display: inline-block;

float: left;

text-align: left;

}

2. In Form Builder, click on the Paint Roller icon located on the right side of your page.

3. In the Form Designer, go to the Themes tab and click on the Remove Theme button.

4. Go to the Styles tab and paste the code in the Inject Custom CSS area.

5. Go to the Colors tab and reset your colors.

Next, reset the alignment of your fields:

1. Select each field and click on the Gear icon.
2. In the Short Text Properties, set the Label Alignment to Left.

That's it. Test your form, and you'll see that the field alignment now displays correctly. Check out the screencast below for the result:

You can also check out my demo form for your reference. This guide will show you how to clone the form and make it your starting form.

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

Thanks for the quick and easy solution.

After following all the steps, still 6. Address field is not getting aligned. I have set label to LEFT but it is showing top.

Please See below image:

Hi Shikhaa,

I checked your form and was able to see that the Address field seems to be compromised. Since you have not yet received any submission on your form with ID 251733183749464, an easy solution will be to delete your address field and add a new one. Doing that is easy, let me show you how:

1. In Form Builder, click on the + Add Form Elements button in the top left side of the screen.
2. Under the Basic tab, select the Address element and add it to the form
3. Finally, click on the old Address field, and then click on the Trash icon on its right side to delete it.

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

Thanks for your help!

I have removed and added new address field but it is still not aligned with other fields.

Please see the image below:

Hi Shikhaa,

Decreasing the width of your Address Field is easy. You will just need to inject a custom CSS code. Let me show you how:

1. First, copy this code:

/* Code To Decrease the Address Field Width - 28564101 */

li#id_419 {

width: 570px;

}

/* Code Ends Here */

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

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

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