Help with formatting the top portion of my form

  • Profile Image
    Koaching
    Asked 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


    Help with formatting the top portion of my form Image 1 Screenshot 20

  • Profile Image
    Jonathan JotForm Support
    Replied 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.

  • Profile Image
    Jonathan JotForm Support
    Replied 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.

    Help with formatting the top portion of my form Image 1 Screenshot 20

    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.



  • Profile Image
    Koaching
    Replied on August 13, 2025 at 8:04 PM

    Thank you, that works.

    Now what about the 2nd and 3rd bullets?

  • Profile Image
    Kenneth JotForm Support
    Replied 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. Help with formatting the top portion of my form Image 1 Screenshot 20

    Give it a try and reach out again if you have any other questions.