Remove blank space between the questions.

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?

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

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

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

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

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