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

    How to increase the form top margin when using "Form Collapse" module?

    Asked by aimsvisahk on October 03, 2016 at 12:13 PM

    Hello JotForm team,

    I embedded JotForm into my website and using "Form Collapse" module. When I selected the second collapse selection, JotForm will move the position to top, but my website is showing a fixed header, therefore, it covers the top position, Can I increase the top margin ?

    Please view my website : http://www.intsolutions.com.hk/aims/index.php/au/2016-05-19-09-31-12

    I clicked second selection and showed screen > http://prntscr.com/cpcloq

    Regards,

    AIMS

    Page URL:
    http://www.intsolutions.com.hk/aims/index.php/au/2016-05-19-09-31-12

    top margin top increase how
  • Profile Image
    JotForm Support

    Answered by Jan on October 03, 2016 at 04:19 PM

    I was able to replicate the issue you are describing. It seems that you are referring to the issue wherein the field below the form collapse header is not showing once you click it.

    First, please try re-embedding the form using the Iframe method. Here's a guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code.

    If it is still the same, then we need to increase the bottom margin of the form collapse headers using custom CSS.

    #cid_54 {
       margin-bottom: 65px !important;
    }
    #cid_51 {
       margin-bottom: 65px !important;
    }
    #cid_53 {
       margin-bottom: 65px !important;
    }

    #cid_56 {
       margin-bottom: 65px !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Hope that helps. Thank you.

  • Profile Image

    Answered by aimsvisahk on October 04, 2016 at 03:51 AM

    I solved, Thanks advice.