Form Field Alignment and Form Size

I created a form and it allows alignment setting for the field labels, but the fields are not aligned. I don't see an option to set the alignment of the fields. All the fields are displayed to the left inside the form. I would like the fields to be displayed in the center of the form. I also would like to adjust the size of the form based on the size of the fields. So the form has a lot empty space to the right of the fields. Once the fields are centered then there will be a lot of space on the right and left of the fields. Can I set the amount of space on both sides of the fields or set the form to auto adjust? This is good for the purpose of embedding the form on my website, but I'm not sure if this change to the size of the form would be ideal for standalone if not using on the website so in that case I would copy the form and remove the code or changes.

https://form.jotform.com/203255720104139

I changed the size in the form designer but the size still remains the same.

Hello! Allow me some time to check this. I'll get back to you soon with an update.

Thank you!

Hello! Please check this form: https://form.jotform.com/210223489169963

This form has fields center-aligned; form width set to 500px (which you can change in the CSS code provided below) and the form fields extended to cover full width.

For some reason; the theme that you're using is not picking up the form width property set in the Designer; but we can still use CSS for overwriting this.

If this solves your purpose; then first unshrink the 'Name' field on your form and then inject the following CSS code:

*{

 text-align: center;

}



#cid_3, #cid_7{

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  max-width: none;

}



.form-all {

  max-width: 500px !important;

  width: 100% !important;

}

In case this doesn't solve your purpose or if you need further changes; let us know.

Thank you!

Thank you. I wanted the labels to the left so I changed the word center to the word left and that worked. However, the title is now to the left and that needs to be centered. How do I fix it? Also, is there any way that I can make the form more compact? I tried reducing the space between the questions but it is not working. I reduce the number but nothing changes. The other issue I am having is when using the embeded form on my website a yellow box appears around the field when you type into the field. The form is located at fiercebolddigital.com at the top of the landing page. I checked the settings on the website and there is nothing that should be causing it.

Hello! I've tried to resolve the issues that you mentioned in this form: https://form.jotform.com/210228461278959

This form is more compact and the yellow highlight also won't show up; please give it a try. In case this solves your purpose; then replace the the previous code that I provided with the following code:

#cid_3, #cid_7{

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  max-width: none;

}



.form-all {

  max-width: 500px !important;

  width: 100% !important;

}



li.form-line {

  margin-top: 0px;

  margin-bottom: 0px;

}



li.form-line {

  margin-top: 0px;

  margin-bottom: 0px;

}



ul.page-section{

  padding-left: 5px;

  padding-right: 5px;

}



li.form-line {

  margin-top: 0px;

  margin-bottom: 0px;

}



ul.page-section{

  padding-left: 5px;

  padding-right: 5px;

}



.form-buttons-wrapper, .form-submit-clear-wrapper{

padding-left: 0px;

padding-right: 0px;

margin-left: 0px;

margin-right: 0px;

margin-top: 10px;

padding-top: 20px;

padding-bottom: 10px;

}



.page-section>li:first-child:not(.form-line-column):not([data-type=control_head]):not([data-type=control_text]):not([data-type=control_button]):not([data-type=control_collapse]), .page-section>li:nth-child(2):not(.form-line-column):not([data-type=control_head]):not([data-type=control_text]):not([data-type=control_button]):not([data-type=control_collapse]){

margin-top: 0px;

}



.form-line-active{

background-color: #ffffff !important;

}

In case this doesn't solve your purpose; let us know.

Thank you!

Thank you. The background was still showing up when selecting the field to enter text. It was not showing up as yellow anymore, but it was showing up as white. I figured out how to fix it. In the last section of the code I changed the background-color from white to transparent #ffffff00 and that worked. The only thing is there is no code for the background that shows with the error alert. So if you click in the field without entering anything and click to the next field the error pops up and you get the background color again. Could you please provide the code for that? I think I will just need to use the same transparent color and I will be set.

Hello,

There are 3 different ways to customize the error:

.form-error-message {



}



.form-validation-error {



}



.form-line-error {



}

You can add your background color to one of them or several of them to achieve precisely the effect you desire.

Hope this helps.

Do not hesitate to reach out if you need further assistance

Thank you. It is the .form-line-error one that worked.