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.


  • Profile Image

    reduce the vertical spacing box around a text box

    Asked by guineapigme on March 11, 2015 at 01:08 PM

    I would like to reduce the overall footprint of my form.

     

    I have in the last part of my form, a text box followed by two text areas.

     

    I have been unable using the style editor to reduce the space between the first text box and the next text area for each of the 10 similar entries.

     

    I am not interested in reducing the size of the actual input area, but the margin around it which is not symmetrical.

     

    There is a vertical margin above the text box and one below it, but I don't seem to be able to reduce it's overall height.

     

    http://www.jotform.com//?formID=43637462243152

    vertical spacing JotForm style size height
  • Profile Image
    JotForm Support

    Answered by david on March 11, 2015 at 02:12 PM

    Hi,

    I removed this section off code from your CSS:

    #input_99, #input_105, #input_111, #input_105,
    #input_81, #input_87, #input_225, #input_229,
    #input_233, #input_237, #input_241 {
        right : -153px !important;
        top : -30px !important;
        position : relative !important;
    }

    I was then able to adjust the labels of your text boxes to align left:

    I also adjusted the size of the field a bit.  After that, I could adjust the margins as normal"

    With the changes made that I mentioned above, this code should all for your fields to be adjusted:

    #input_99, #input_105, #input_111, #input_105,
    #input_81, #input_87, #input_225, #input_229,
    #input_233, #input_237, #input_241 {
       margin-bottom: -100px;
    }

    You would need to first adjust the labels and sizes of the fields.

    If you are still unable to get your form looking how you would like, let us know and we will be happy to assist you further.

  • Profile Image

    Answered by guineapigme on March 11, 2015 at 03:54 PM

    Oh dear,

     

    I lost the formatting your provided when I tried to readjust within the designer, I have huge vertical spacing now.  Reinjected it and no change.  I think my CSS is all messed up.

     

    I would like to compress my blank vertical spacing to provide a short print out for my users.

     

    Sigh,

     

    Deborah

  • Profile Image
    JotForm Support

    Answered by david on March 11, 2015 at 04:06 PM

    You can always revert your form to a previous save state with your form revision history:

    http://www.jotform.com/help/294-How-to-View-Form-Revision-History

    I removed the CSS I referenced in my above post and manually made several changes to your form to compact it.  Here is the resulting form:

    http://form.jotformpro.com/form/50695249193969

    If this is a bit more suited to your needs, you can clone it to see the full setup:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Adjustments to the spacing can be made to the above form in the designer.

  • Profile Image

    Answered by guineapigme on March 11, 2015 at 04:13 PM

    For some reason the example link you sent (which I hope is not my actual form) doesn't allow the form collapse to expand for me to see your changes.   I can't see the rest of my form.

  • Profile Image

    Answered by guineapigme on March 11, 2015 at 04:15 PM

    I also have an open thread about not being able to see the rest of my form controlled by the form collapse in the designer.

     

    I am battling things on multiple fronts.  What is the name of the parameter to adjust the "white space" that appears to surround an element.


    When I try to adjust in the designer (back when I could), I wasn't able to affect the overall spacing.  I am already down to the minimum line spacing etc ... .

  • Profile Image
    JotForm Support

    Answered by david on March 11, 2015 at 04:18 PM

    The link I sent you is a cloned version of your form.  We do not make changes to users forms.  Here is how it looks on my end:

    The CSS I recommended that you remove is overriding changes made in the designer.  The form tabs work in every browser I tried so I am not sure why they are not working on your end.

  • Profile Image

    Answered by guineapigme on March 11, 2015 at 04:29 PM

    I no longer have form tabs, I only have the form collapse.   I deleted all my form tabs widget this morning.

     

    I'm really confused at this point.   Any possibility to chat real time so that I could at least confirm we are talking about the same thing?

  • Profile Image

    Answered by guineapigme on March 11, 2015 at 04:37 PM

    I removed that code and now seem to have lost my left labeling on the fields marked as "Medley 1-10"

    help

  • Profile Image
    JotForm Support

    Answered by david on March 11, 2015 at 04:38 PM

    My apologies, at the time I was working on your form I must have cloned a different version.  I checked your most recent version and it is indeed much different than the one I was working on.  If you have another thread with your most recent issue, I would recommend keeping your conversation to that thread as I seem to be behind what is going on in this currrent one:

    http://www.jotform.com/answers/531308-Form-collapse-not-letting-me-view-in-designer-mode

    As I stated previously, you can revert your form back to a previous save point using your form revision history:

    http://www.jotform.com/help/294-How-to-View-Form-Revision-History