Smart PDF Form: How to center align fields?

1. I can't figure out how to center the fields in the form.

Hi Benjamin,

Thanks for reaching out to Jotform Support. You can inject the custom CSS code below to center align the fields to your form:

#input_48, #input_49,#input_6, #input_7, #input_8, #input_51, #input_52, #input_54, #input_53 {

 margin-left: 50%;

}

Here's how to inject the CSS code:

1. In Smart PDF Forms Builder click the Paint Roller icon on the upper right side.
2. Under the Styles tab, paste the CSS code in the Inject Custom CSS box.

Reach out again if there’s anything else we can help you with.

is there a way it can be adaptive to device. With this solution the fields look off-center on a phone

Hi Benjamin,

Thanks for getting back to us. We can fix this by tweaking some of your field options and using a new set of CSS codes. Let me walk you through it:

1. In Form Builder, right-click on one of your fields and select Unshrink.
2. Next, click on its Gear icon,set the Label Alignment to Top, and repeat the same for other fields.
   
3. Next, click on the Paint Roller icon on the right, and under the Styles tab, paste the following CSS codes into the CSS box.

/* 14459881 - center select fields*/

#id_48, #id_49,#id_6, #id_7, #id_8, #id_51, #id_52, #id_54, #id_53 {

 justify-content: center!important;

}

/* Ends here */

That's it. Feel free to test this cloned demo form, or clone the form to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.

Give it a try and let us know if you need any help.