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.
Space between label and fieldAsked by LeoC2 on December 22, 2013 at 01:59 PM
A form has two fields where a user selects frequency and day of the week. I want these two fields to flow like a sentence so I want the labels to the left but as you can see the space between the labels and the field is too big. Changing width in preferences affects all fields so that doesn't work well for the form. How can I reduce this space in individual fields without affecting others?
If you want to see the form in action and the fields in question choose "CRUISE NIGHT" where indicated.
Kindly try my clone of your form: http://form.jotformpro.com/form/33555562795971?
I have used the following CSS code to move the fields closer:
Kindly let us know if you need further support. Thank you.
Yes thanks that did help, I changed the settings a little and it looks much better. However...
It would be helpful if you explain the code a bit, RIGHT seems to move the label but what does WIDTH do? Are there other parameters that can also be used to manipulate the spacing and position?
May I suggest for a future update that you allow the user to change these space settings within the form design. That is, in preferences the space can be changed for ALL fileds, why not make each individual one changeable within the property settings? It would give users a lot more control withou having to know how to code CSS.
The WIDTH refer to the label's width where the lable is contained.
Actually, in our colleague Cesar's test form, the CSS code for the widht:10px; was overriden by the class code form-label-left since it was set to !important. So as you can see, the width of the label is not really 10px but 125px
You can set the preferred width of 10px for ALL labels by changing the code of the class name.
Example if you change the form-label-left class to 10px, all the labels in the form will have 10px width.
We understand your suggestion of a more simple means to customize some of the form's elements with the form builder without doing any coding using CSS.
A similar feature request had already been submitted to our developers. This is among the list of improvements that had already been look on.
Hope this help. Inform us if there is more we can help you with.