Question 2Is there any way of compressing the fields of the form, so that it has less height .. it seems quite vertically spread out

  • Profile Image
    jonsynergy
    Asked on January 07, 2017 at 09:43 AM
    There is a 'click on' collapsible button on the right hand side of the page .. is there any way of replacing this button with an image of my own choosing, so that people can just click on the image?
  • Profile Image
    KadeJM
    Answered on January 07, 2017 at 11:57 AM

    It looks like Helen already answered your question in the other thread about replacing the collapse button with an image and meant to split this one as a new question about field compression to lessen the height of your form which is certainly possible.

    There are a couple of ways to do that.

    You can adjust the question spacing or you can also adjust the form line and margins with css and both of those are mentioned here https://www.jotform.com/help/62-How-Can-I-Change-Spacing-Between-Questions .

    Alternatively, you can embed your form with an iframe then just change the height value in the code.

  • Profile Image
    jonsynergy
    Answered on January 07, 2017 at 12:11 PM

    Hi, I think my previous question was misunderstood.

    I have changed the picture and url and dimensions in the CSS below but the outcome doesn't look right. The image is not displayed properly and the background of the button is much wider.. I would really appreciate you help, thanks. John

     

    div#collapse_22 {

        background : url(http://www.laboratorymarkets.com/img/report_enquiry.png) no-repeat;

        background-size : 207px 290px;

    }

    See the webpage below

    http://www.laboratorymarkets.com/Report_description.asp?startingPoint=0&interval=10&id=3336&s=&ss=&i=&search=ks&keywords=&searchtype=Reports

  • Profile Image
    KadeJM
    Answered on January 07, 2017 at 03:26 PM

    I apologize about any confusion that may have occurred and thank you for clarifying this more as well as the provided example and link that you're using now.

    I believe I see what you are referring to where the collapse is extended outside of the form some which is also similar on your form as well.

    To fix this issue you just need to add in an extra line of css to adjust the form collapse width.

     

    Try this:

    div#collapse_22 {

        background : url(http://www.laboratorymarkets.com/img/report_enquiry.png) no-repeat;

        background-size : 207px 290px;

        width : 380px;

    }