Adjust Spacing between the Number fields

I have started a form to be prefilled with data from a table. I haven't started the table yet. This is not an interactive form. It's only use is for me to filter data from the table and put it in a side-by-side comparison for my client to view.

The first column is short text, the next three are number fields, and the 5th is really just a placeholder for now. The 5th placeholder will contact a link to another form that will contain more information. Now sure how to do that yet!

I've put a sample of what the form should look like when done. I'm just trying to get the basics down first.

I want to make the spacing/padding between the 3 number smaller and the spacing/padding between the first text field and the first number field a little larger.

Also I need to duplicate the first 4 fields to appear like rows. You can see from example.

I've tried everything I know to do, including AI. Can you please tell me how to do this?!

Hi Ashley247, 

Thanks for reaching out to Jotform Support. You can easily adjust the spacing of the Number fields by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

#id_17,

#id_15 {

  margin-right: -20px !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 CSS Code box. That’s it. The code is automatically saved.

Then you can add more fields to the CSS code by finding out the field ID. It's really easy to do. Let me show you how:

1. In Form Builder, select the form field and click the Gear icon.
2. Go to Advanced tab and collapse the Field Details section to copy the Field ID.

It's important to note that the code adjusts the spacing to the right, so you only need to include the first and second number fields in each row. If you want the same spacing between the third number field and the placeholder, you can choose to include that one as well.

Give it a try and let us know how it goes.

That worked; however, I need just a slight space between the number columns. How do I do that?

Hi Ashley,

You can use the CSS Code below to fix the spacing of each number columns.

#id_17 {

 padding-left: 20px !important;

}

#id_15{

  padding-left: 32px !important;

}

#id_16 {

  padding-left: 19px !important;

}

Take a look at the screenshot of the result below:

Give it a try and let us know how it goes.

That was perfect! Thank you!

Now, I need 14 rows of the fields, except the 5th field which is just a placeholder. I didn't quite understand in the previous response how to do that.

Can you help?!

Hi Ashley247, 

First, you need to get the Field ID of the Number fields, which you can refer to the guide Reymae shared earlier. The Field ID will be like this:

#input_XX

You can copy the numerical value and add it to the code like this:

#id_XX

You will use comma (,) when you add more fields on the code to separate them. The final code will be like this:

#id_17,

#id_15,

#id_XX {

  margin-right: -20px !important;

}

You can also add the fields on your form, and we can create the updated CSS for you. You can clone and test my demo form here. Check out the screenshot below to see my results:

Give it a try and let us know if you need any help.