Changing Form Design with Form Designer and CSS Codes

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?

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.

Please let us know if you need further assistance.

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?

Thank you in anticipation.

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.

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.".

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.

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.

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?

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;

}

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

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