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

    Large White area at top of page

    Asked by waggariverside on April 06, 2012 at 01:27 AM

    Hi,

    I am having troubles with my embedded form. I have a large white area at the top of the page:

    http://www.waggariversideapartments.com.au/index1.php?p=bookings

    I have tried

    .form-all {
        padding-top: 0;
    }

    and

    .form-all {
    padding-top: 0;
    margin-top: -10px;
    }

     

    but all to no avail it will not move.

    I have added text by itself and it works fine. Its just when I add the form I get t his huge white space.


    Thanks in advance

    Damian

    Page URL:
    http://www.waggariversideapartments.com.au/index1.php?p=bookings

  • Profile Image
    JotForm Support

    Answered by liyam on April 06, 2012 at 02:23 AM

    The reason why the form goes down is because of your form's header (the one with the title "Make an Inquiry").  The form-header-group class has the property clear: both;. This causes your float to end, thus moving the div and the others to go down. 

    Here is the style attributes of the form-header-group class:

    .form-header-group{
    background:#f5f5f5;
    border-bottom:1px solid #ccc;
    padding:12px;
    clear:both
    }

    Since you have the actual HTML source code placed in the form, simply removing the class name will fix it.

  • Profile Image
    JotForm Support

    Answered by abajan on April 06, 2012 at 04:09 AM

    @Damian

    Unless there's some compelling reason to use the full source, embedding the form via an iFrame (with no injected CSS) should solve the problem.

    However, if absolutely need to use the full source and want to remove the large white area above the form while retaining the heading's current style, instead of removing the class name you would have to embed the compressed and refined version of the form, remove the clear:both; declaration from the .form-header-group rule in the form.css file and in the form's HTML file add the style attribute indicated below to the div whose ID is cid_2

    (Click image to zoom to actual size)


    If you need clarification on anything, do let us know.