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

    Remove blank space between the questions.

    Asked by michaelcullen on November 11, 2014 at 01:47 AM

    Also is it possible to reduce the blank space around the last 3 rows of text areas ("Roomtypes" & "Descriptions") so that they appear more like a grid?

    Page URL:
    http://form.jotformpro.com/form/43076177860965

    CSS remove space extra space
  • Profile Image

    Answered by Ben on November 11, 2014 at 09:05 AM

    Hi Michael,

    Please take a look at this jotform clone of your own jotform to see if that is what you wanted to achieve: http://form.jotformpro.com/form/43143458235958

    If yes, then you can clone it to your account following these steps: How to Clone an Existing Form from a URL

    Or you can inject this CSS code to your jotform:

    #id_28, #id_29, #id_30 {
        margin-right: 0;
        padding-right: 0;
        width: 30%;
    }
    #id_26, #id_32, #id_31 {
        margin-left: 7px;
        padding-left: 0;
        width: 60%;
    }

    #id_28 > .form-input-wide > textarea, #id_29 > .form-input-wide > textarea, #id_30 > .form-input-wide > textarea,#id_26 > .form-input-wide > .form-textarea-limit > span > textarea, #id_32 > .form-input-wide > .form-textarea-limit > span > textarea, #id_31 > .form-input-wide > .form-textarea-limit > span > textarea, #id_26 > .form-input-wide > .form-textarea-limit > span, #id_32 > .form-input-wide > .form-textarea-limit > span, #id_31 > .form-input-wide > .form-textarea-limit > span {
        width: 100%;
        resize: none;
        height:70px;
    }

    #id_28, #id_29, #id_30, #id_26, #id_32, #id_31, #id_28.form-line-active, #id_29.form-line-active, #id_30.form-line-active, #id_26.form-line-active, #id_32.form-line-active, #id_31.form-line-active, #id_28.form-line-error, #id_29.form-line-error, #id_30.form-line-error, #id_26.form-line-error, #id_32.form-line-error, #id_31.form-line-error {
        margin-bottom: -3px;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 0;
        height:70px
    }
    #id_28,#id_26,#id_28.form-line-active,#id_26.form-line-active,#id_28.form-line-error,#id_26.form-line-error{
        height: 90px;
    }

    #id_29 > label, #id_30 > label, #id_32 > label, #id_31 > label, #id_29 > .form-error-message, #id_30 > .form-error-message, #id_32 > .form-error-message, #id_31 > .form-error-message {
        display: none;
    }

    #id_29 div.form-textarea-limit-indicator, #id_28 div.form-textarea-limit-indicator, #id_30 div.form-textarea-limit-indicator, #id_26 div.form-textarea-limit-indicator, #id_32 div.form-textarea-limit-indicator, #id_31 div.form-textarea-limit-indicator{
        float: right;
        left: 35px;
        margin-bottom: -20px;
        position: relative;
        top: -15px;
    }
    #id_42 {
        clear: both;
        padding-top: 40px;
    }

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by michaelcullen on November 11, 2014 at 09:25 AM

    Thanks Ben - that is exactly what I wanted.

    Can I trouble you to do the same for the 3 hidden rows (i.e. the 6 fields with numbers 33-38) which appear when you click "Show more roomtypes"? Or tell me how to do it if it's easy (I am not very familiar with CSS).

    Then I will reclone your form and use that.

    Thanks again - great support service!

    Michael

     

     

  • Profile Image

    Answered by Ben on November 11, 2014 at 11:12 AM

    Hi Michael,

    Thanks Ben - that is exactly what I wanted.

    You are welcome. Great to hear that.

    Can I trouble you to do the same for the 3 hidden rows

    No, not a problem at all, feel free to 'trouble' us any time you have any questions or something you are not able to get to just the way you want it.

    Now I have changed the code from the earlier to impact the hidden 3 pairs of fields as well and updated the jotform from above with this new CSS code.

    This is the link to jotform: http://form.jotformpro.com/form/43143458235958

    This is the entire CSS code I injected:

    #id_28, #id_29, #id_30, #id_33, #id_34, #id_35 {
        margin-right: 0;
        padding-right: 0;
        width: 30%;
    }
    #id_26, #id_31, #id_32,  #id_36, #id_37, #id_38 {
        margin-left: 7px;
        padding-left: 0;
        width: 60%;
    }

    #id_26 > .form-input-wide > .form-textarea-limit > span, #id_26 > .form-input-wide > .form-textarea-limit > span > textarea, #id_28 > .form-input-wide > textarea, #id_29 > .form-input-wide > textarea, #id_30 > .form-input-wide > textarea, #id_31 > .form-input-wide > .form-textarea-limit > span, #id_31 > .form-input-wide > .form-textarea-limit > span > textarea, #id_32 > .form-input-wide > .form-textarea-limit > span, #id_32 > .form-input-wide > .form-textarea-limit > span > textarea, #id_33 > .form-input-wide > textarea, #id_34 > .form-input-wide > textarea, #id_35 > .form-input-wide > textarea, #id_36 > .form-input-wide > .form-textarea-limit > span, #id_36 > .form-input-wide > .form-textarea-limit > span > textarea, #id_37 > .form-input-wide > .form-textarea-limit > span, #id_37 > .form-input-wide > .form-textarea-limit > span > textarea, #id_38 > .form-input-wide > .form-textarea-limit > span, #id_38 > .form-input-wide > .form-textarea-limit > span > textarea {
        width: 100%;
        resize: none;
        height:70px;
    }

    #id_26, #id_26.form-line-active, #id_26.form-line-error,  #id_28, #id_28.form-line-active,  #id_28.form-line-error,  #id_29, #id_29.form-line-active,  #id_29.form-line-error, #id_30,#id_30.form-line-active, #id_30.form-line-error, #id_31,#id_31.form-line-active, #id_31.form-line-error, #id_32, #id_32.form-line-active, #id_32.form-line-error, #id_33, #id_33.form-line-active, #id_33.form-line-error, #id_34, #id_34.form-line-active, #id_34.form-line-error, #id_35, #id_35.form-line-active, #id_35.form-line-error,  #id_36, #id_36.form-line-active, #id_36.form-line-error, #id_37, #id_37.form-line-active, #id_37.form-line-error, #id_38, #id_38.form-line-active, #id_38.form-line-error {
        margin-bottom: -3px;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 0;
        /*height:70px*/
    }
    #id_26, #id_26.form-line-active,#id_26.form-line-error, #id_28,#id_28.form-line-active,#id_28.form-line-error{
        height: 90px;
    }

    #id_29 > label, #id_29 > .form-error-message, #id_30 > label, #id_30 > .form-error-message, #id_31 > label, #id_31 > .form-error-message, #id_32 > label, #id_32 > .form-error-message, #id_33 > label, #id_33 > .form-error-message, #id_34 > label, #id_34 > .form-error-message, #id_35 > label, #id_35 > .form-error-message, #id_36 > label, #id_36 > .form-error-message, #id_37 > label, #id_37 > .form-error-message, #id_38 > label, #id_38 > .form-error-message
    {
        display: none;
    }

    #id_26 div.form-textarea-limit-indicator, #id_31 div.form-textarea-limit-indicator, #id_32 div.form-textarea-limit-indicator, #id_36 div.form-textarea-limit-indicator, #id_37 div.form-textarea-limit-indicator, #id_38 div.form-textarea-limit-indicator {
        float: right;
        left: 35px;
        margin-bottom: -20px;
        position: relative;
        top: -15px;
    }
    #id_42 {
        clear: both;
        top: 20px;
        margin-bottom: 50px;
    }

    Do let us know if that is how you wanted it to look like.

    Best Regards,
    Ben

  • Profile Image

    Answered by michaelcullen on November 11, 2014 at 04:11 PM

    Thanks Ben, that is great and I have cloned your form back.

    3 small things I noticed

    1. with the new spacing, the warning about completing required fields does not show properly (but that is ok)

    2. when you clone a form, it does not copy the Email Alert / Recipient settings

    3. when I read your answer to this thread in my email browser, the links don't work, they are missing www.jotform.com

    Thanks again for all your work!

    Michael

  • Profile Image

    Answered by Ben on November 11, 2014 at 05:13 PM

    Hi Michael,

    1. with the new spacing, the warning about completing required fields does not show properly (but that is ok)

    Yes, it is a bit different now, but we could change it to show only red border?

    I had to hide it or it would break the grid like layout. The same is with the overlay / active layout which activates when you click into a field.

    2. when you clone a form, it does not copy the Email Alert / Recipient settings

    Yes that is true. It will not do that for the sake of privacy. It should remove all email details.

    3. when I read your answer to this thread in my email browser, the links don't work, they are missing www.jotform.com

    I presume that this is in regards to the first post, but yes, we are aware that in some email clients the links get cut off (do not work) for some reason. I presume that this might be connected to some security settings of the email client since my Thunderbird seems to be accepting them properly - I presume that you are using Outlook?

    Now if you would like the error and active styles to be more specific just let us know and we would be happy to help you set it all to the way you like it.

    I did not spend too much time with them to get the fields to the right layout and style since we can always work on this as needed :)

    Best Regards,
    Ben