What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Reduce spacing around text fieldsAsked by AustralianMusicFoundation on April 08, 2014 at 11:58 AM
I need to reduce the spacing around the text fields in my form, as the whole form is too space out, when there is a mix of text boxes, radio button and text fields.
I have tried the various solutions on the forums to inject the CSS code to reduce the .form-line and setting margins and padding to 3px (for example).
This reduced the space between actual input items but not for text fields.
You can see the issue on the screen shot - the space between 'Musical Direction'; 'Other Funding' and 'Referee 1' is too big compared with the space between the other lines.
Can you please help.
css code text boxes items form-line
You can actually set the spacing between questions. To do that, click on "Setup and Embed" tab. Then click on "Preference" option. A window will up, choose "Field Styles", below that you will see "Question Spacing" with it's default value. You can set it to a lower value until you reached your desired spacing. Mine, I set it to 2px 2px 2px 2px.
Hope this helped you!
Thanks walledgarden. That didn't seem to change anything. It is the padding around the text fields I think that needs to specifically change
What's the CSS code you injected?
That's the closest you can get to the label. To test if the CSS is working, you can increase the value to say, 30px, you will notice that the spacing between the label and the field will be farther. Set it back to 2px and that is the closest you can obtain.
I see what you mean now, "Referee 1" is actually a text not a label, that's the confusion. Unfortunately, there is no way to adjust the spacing. We can tweak it though, the only problem with this solution is that we can't make the word "Referee 1" in green. If black is alright with you, you can try to insert this code directly to the name label:
<font size="6" color="green"><i>Referee 1</i></font><br>Name
Insert the given code directly to the label of the "Name" Field under referee 1. If your satisfied with it, you can do the same thing to the rest, replacing the words "Referee 1" and "Name" on the given code.
The problem is I can't identify the field ID - when you click on Show Properties icon, you do not get these.
I've tried just entering #musical direction but this didn't work
Actually, you won't be needing the ID for the field. You see the word "Name" below your Referee 1 section? You can edit the label of your first field "Name", right? Delete the word "Name" and instead, use the code provided above. That will make the space between Referee 1 and Name closer to each other.
See the screenshot of my work around below:
If you notice, I eliminated the space between the words "Referee 1" and "Name" below it.
Thanks that last solution works - and it comes out green. I just need to play around with the other fields in that row to even out the spacing
I'm experimenting with inserting just <br>Title etc for the other fields to line them up
Yes, that's right. I'm glad you liked my solution. You can do the same thing on the other Headings and field labels above your form.
JotForm Support Manager
We are very glad to see Bryan helped you with the solution. If further questions are needed, let us know.