Changing Form Design with Form Designer and CSS Codes

  • Profile Image
    muf_design
    Asked on February 21, 2021 at 11:01 AM

    Hello!

    Hope you all are doing well.

    In my "Employment Application Form" I want to adjust the calendar icon (in the Education section and all the rest of the similar fields) position to make it properly placed.

    Please see the attached picture for more clearance.

    Can you please help me with this?

    Screenshot
  • Profile Image
    Ahmed_S
    Answered on February 21, 2021 at 04:48 PM

    Greetings,

    I've checked your form and found that you've managed to fix the calendar icon position, I've even changed the settings in a cloned form for the date fields to be "Shrink" and the position is till proper as you can see in the below screenshot.

    1613943990_6032d4b627a43_1.png

    Please let us know if you need further assistance.

  • Profile Image
    muf_design
    Answered on February 21, 2021 at 10:37 PM

    Thank you for replying, as you can see I have used a template made by one of your team members. But I don't like the header section, I want it to place a standard header like any normal form. When I tried to enter a new header from Basic Form Elements I got the same. Can you please help me with this?

    When I tried to add field of Middle Initials (M.I.), it always places the middle name field at the end after the last name, why this is so? As you can see I have just replaced the sublabels to fix this but will it affect the output results like interchanged fields submissions?

    How I can reduce the middle name field box size small, as it will contain only one letter? I don't want it to be that large as it is.

    How can I move these options together, as they are wide apart?

    1613965644_6033294c92038_Capture1.PNG

    Thank you in anticipation.


  • Profile Image
    hestia
    Answered on February 22, 2021 at 04:42 AM

    Hi @muf_design,

    Thank you for reaching us. I have cloned your form to demonstrate the answers to your questions. For your information, nothing has been changed on your original form.

    CHANGING HEADER DESIGN:

    If you want to change the design of the header you can do it easily by using the "Advanced Form Designer" feature. Please follow the steps and the screencast below:

    1. On the Form Builder page click the blue brush icon from the top right of the page, this will open "Form Designer".
    2. In the opening Form Designer menu and click the "Advanced Form Designer" button on the bottom left.
    3. This will open the Advanced Designer Page. Here click the Header field you want to edit. This will open the "Header Styles" menu. You can adjust the look of the Header field as you wish here.
    4. After you completed the changes remember to click the "Save" button from the top left of the page to apply your changes to the form. And you can return to form builder by clicking the Jotform logo "Back to Form Builder" button on the top left.

    header.gif

    ADJUSTING THE MIDDLE NAME BOX SIZE:

    To adjust the box size of the "M.I." label please copy and paste the following CSS code into your form.

    [data-input-type = "middle"] {

      

     width: 10% !important;

     float:left;

    }


    [data-input-type = "last"] {

      

     float:left;

    }

    Please see the steps and the screencast below to do that:

    1. Click the blue brush icon "Form Designer".
    2. Click the "STYLES" tab on the Form Designer menu.
    3. Copy the code from here and paste it into the "Inject Custom CSS" screen.
    4. You will see the middle-box has become smaller and the sublabels changed after you injected to code.
    5. To correct the sublabels, click the gear icon next to the Name field and under the Sublabels section; change the labels of the Last Name as "Last Name" and Middle Name as "M.I.".

    1613986254_603379cee188b_

    If you need further assistance on injecting CSS codes, please see the link --> How to Inject Custom CSS Codes

    ADJUSTING THE POSITION OF CHECKBOXES

    To move the checkbox together, you can use the Advanced Designer. Please see the steps and the screencast:

    1. Go to "Advanced Designer" as explained in the above steps.
    2. Click the checkbox area. This will open the "Radio Button & Checkbox Styles" menu.
    3. Change the "Horizontal Padding" to 0 px.
    4. Then, change the "Input Width" to 80 px.

    1613986683_60337b7b82cda_

    If you want to learn more about what you can do with Form Designer, you can always check our guide:

    Form Designer Tutorial: Let's create fantastic forms!

    If you need further assistance, please feel free to reach us at any time.

    Thanks for using JotForm.


  • Profile Image
    muf_design
    Answered on February 22, 2021 at 02:40 PM

    Hi, thank you for sharing the code for ADJUSTING THE MIDDLE NAME BOX SIZE after injecting this, I'm facing the attached issue. When I preview my form the M.I. field box goes at the end of the line i.e. after the last name field. But when I'm in the Form Build interface It appears to be normal. Why this is so? Can you please help me with this?

    1614022702_6034082e1df10_

    1614022792_60340888eb166_

  • Profile Image
    Ahmed_S
    Answered on February 22, 2021 at 04:52 PM

    Greetings,

    Please copy the below updated CSS code and paste it over the previous added one, this shall fix the Full Name fields

    [data-input-type = "middle"] {
      width : 14% !important;
      float : left !important;
    }
    [data-input-type = "first"] {
      width : 43% !important;
      float : left !important;
    }
    [data-input-type = "last"] {
      width : 43% !important;
      float : left !important;
    }


    1614030682_6034275a6fc5c_1.png

    Please let us know if you have further questions, we are always happy to help.

  • Profile Image
    muf_design
    Answered on February 24, 2021 at 01:31 PM

    Thank you all for your fabulous support. I have resolved all the issues.