How to align fields on form?

Please help to figure out how to align and balance the four form elements:

Designer/Requester (First and Last name), Designer/Requester email

Project Manager (First and Last name) and Project Manager Email.

Thank you!

Hi Gueipin,

Thanks for reaching out to Jotform Support. I understand you'd like to align some of the fields in your form. We can do this with a few CSS codes. Let me walk you through it:

• In Form Builder, click on the Paint Roller icon on the right.
• Next, under the Styles tab, paste the following codes into the CSS box.

/* align fields on 2nd and 3rd line on first page  - 14381841*/



#id_30, #id_31, #id_3, #id_4 {

width: calc(58% - 8px) !important;

}



/* Ends here */

That's it. Feel free to test this cloned demo form or clone it to your account to inspect it more. 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.

You messed up my form. What did you do?

Hi Gueipin,

Thanks for getting back to us. I’m sorry you're having issues with your form. As I checked your form, my colleague did not change anything on your actual form. He just demonstrated how to align some fields on your form using custom CSS codes with the cloned version of your form. To confirm, have you followed my colleague's instructions and encountered an issue with your form? Can you please share with us more details about what happened to your form? so that we can help you further.

Once we have a better idea of what’s going on, we’ll be able to come up with a solution.

Hello!

This code snippet:

#id_30, #id_31, #id_3, #id_4 {

width: calc(58% - 8px) !important;

}

completely messed up my existing formatting. I had to revert to my previous version of the form.

Do you have any better idea to get what I intended to do?

Hi Gueipin,

Thanks for clarifying. I checked your form and see that you've removed the code snippet provided on your form. I'll need a bit of time to check this further, I will be back shortly.

Hi Gueipin,

Thanks for patiently waiting. I tried injecting the provided code by my colleague on a cloned form, but wasn't able to replicate the issue. The fields Designer/Requester (First and Last name), Designer/Requester email, Project Manager (First and Last name) and Project Manager Email gets aligned and your other forms fields aren't affected. Check out my screencast below to see my results:

Can you try it again and see how it goes? If you run into the same issue again, please some screenshots for us to see the issue from your perspective.

Keep us updated and let us know if you need any more help.

Hi!

Yes, I am able to add the code snippet to the injected CSS. I used the Advanced Designer button, and added to the CSS section there, which caused undesired effect.

Thank you!