-
KoachingAsked on August 13, 2025 at 5:43 PM
Hello,
I need help with formatting the top portion of my form. I need help with the following:
- NAME (Increase the font)
- Reduce the space between NAME / POSITION / CITY fields
- Moving the Headshot photo circle up so the Work stream field in on the background
-
Jonathan JotForm SupportReplied on August 13, 2025 at 6:16 PM
Hi Koaching,
Thanks for reaching out to Jotform Support. I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.
In the meantime, let us know if you have any other questions.
-
Jonathan JotForm SupportReplied on August 13, 2025 at 7:15 PM
Hi Koaching,
To achieve the formatting style on your form, you can inject custom CSS codes. Let me show you how:
1. First, copy this code:
/* ticket #30022541 */
input#input_82 {
font-size: 1.5em !important;
}
div#cid_87,
div#cid_82,
div#cid_55 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
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 Custom CSS box. That’s it. The code is automatically saved.
You can check out the results on my test form here.
Give it a try and let us know if you need any more help.
-
KoachingReplied on August 13, 2025 at 8:04 PM
Thank you, that works.
Now what about the 2nd and 3rd bullets?
-
Kenneth JotForm SupportReplied on August 13, 2025 at 8:50 PM
Hi Koaching,
You can reposition the headshot and the Workstream field by Injecting CSS Codes into your form. Let me walk you through it:
1. First, copy this code:
.form-all {
background-size: cover;
}
li#id_54 {
position: relative;
top: -73px;
z-index: 5;
}
li#id_97 {
position: relative;
z-index: 1;
top: -64px;
}
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 reach out again if you have any other questions.