Big grey rectangle appearing at bottom of form

  • Profile Image
    Scottishgolf
    Asked on May 21, 2018 at 04:55 PM

    Hello,

    I have made my form take up the full screen with a white background. However, as you will see if you click on the link below there is a large grey rectangle at the bottom of the form. Is there any way I can remove this, I just want a completely white background inside the modal.


    When you visit the site, click 'get started' to view the modal then you will see the grey box along the bottom.


    Thanks

    Kevin 

  • Profile Image
    jonathan
    Answered on May 21, 2018 at 06:59 PM

    I see what you meant when I checked the website page also.

    1526943547zzz 2018-05-22 06.50.34.png

    I think that empty space is the bottom padding in the form https://www.jotformeu.com/form/81285868940369

    1526943393zzz 2018-05-22 06.56.11.png

     You can try remove it using injected custom CSS codes

    .jotform-form {

     padding: 0px !important;

    }


    Let us know how it goes.



  • Profile Image
    Scottishgolf
    Answered on May 22, 2018 at 12:32 AM

    Hello,

    Thanks for your response!

    I added the suggested CSS but the grey box is still there. If you click on the link I will leave it so you can see it.

    Do you have any other suggestions? I am basically looking to get the form to fill the whole lightbox/modal area with a white background.

    Thanks

  • Profile Image
    ashwin_d
    Answered on May 22, 2018 at 04:43 AM

    The issue here is related to the height of the lightbox window and not the form height. I would suggest you to please reduce the height of the lightbox window and see if that solves your problem:

    <script src ="https://form.jotformeu.com/static/feedback2.js" type="text/javascript"></script>

    <script type="text/javascript"> var JFL_81285868940369 = new JotformFeedback({

    formId: '81285868940369', 

    base: 'https://form.jotformeu.com/', windowTitle: 'Get Started', background: '#FFA500', 

    fontColor: '#FFFFFF', type: '1', height: 300, width: 1200, openOnLoad: false }); 

    </script>

    <input class="lightbox-81285868940369 byo-button get-started w-button" type="button" value="Get Started" />

    Alternatively, you can increase the page size of first page of form and that should also fix this issue.You can add "Spacer" widget in your form to add space in form.

    Hope this helps.

    Do get back to us if you have any question.