PDF Fillable Embedded: Why does it have too much space at the top and bottom on the preview page?

  • cstcmyotherapy
    Asked on June 25, 2020 at 9:04 PM

    Hi there, 

    I've set up my form and copied the script into the page on my wordpress.org site however the way it is presenting isn't great. There is a huge amount of space above and below the form and button to starting filling it in to the point that you actually have to scroll down to find it. Also on the mobile it is not looking very friendly. Is there a way to fix this? I've already checked that it is not in my page set up

  • Kevin Support Team Lead
    Replied on June 25, 2020 at 9:43 PM

    I've been performing some tests and this happens due to the thumbnail showing up for PDF forms, I can see there are two possible workarounds: 

    1. You can move the thumbnail to the top with this CSS code: 

    .pdff-welcomeView {

        margin-top: 0px !important;

        position: absolute;

        top: 50px;

    }

    This way the users will not need to scroll down to find the start button. The following guide will help you to inject the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    2. You can turn off the thumbnail on your form settings, here is where to find this: 

    15931356922020 06 25 19h40 36 Screenshot 10

    I hope this helps. 

  • cstcmyotherapy
    Replied on June 26, 2020 at 1:14 AM

    Thanks heaps, put the code in and it looks much better. Is there a way to take out the extra space below the form too?

  • Sonnyfer JotForm Support
    Replied on June 26, 2020 at 2:58 AM

    Hi there - I checked your website and it looks like it's embedded via the default embed method. To take out the extra space, kindly embed your form using iFrame method instead and then set the scrolling to "yes"

    <iframe id="JotFormIFrame-201690294862056" title="CLIENT INTAKE FORM" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/201690294862056" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="yes"></iframe>

    Note that you can set the iFrame height to your preference.

    Give it a try and let us know how it goes.

  • cstcmyotherapy
    Replied on June 27, 2020 at 6:29 AM

    Ok, I've tried doing the iFrame method and now all I'm getting is the code itself showing on the page. I was happier with how it was working before. I've tried going back to the original code for wordpress.org and still cannot get the form link to show, just the code. I've managed to restore the previous version so the form is working.

    Still wish to resolve the issue of additional space under the form and also the fact that this is currently not mobile friendly

  • John Support Team Lead
    Replied on June 27, 2020 at 8:03 AM

    If you want to remove these gray spaces below:

    PDF Fillable Embedded: Why does it have too much space at the top and bottom on the preview page? Image 10

    Please try adding this code below to your form:

    .jotform-form {

        background: #ffff!important;

        padding: 1px;

    }

    GUIDEAdding-Custom-CSS-in-JotForm 

  • cstcmyotherapy
    Replied on June 27, 2020 at 11:07 PM

    No I am referring to on the welcome view. The initial code provided removes the gap issue I had at the top. I also want to remove the extra space below the Start filling button. The welcome view also does not present well on the mobile view

  • cstcmyotherapy
    Replied on June 27, 2020 at 11:15 PM

    Actually, don't worry. I've decided to go with Option 2 that was provided in the initial response and removing the pdf from it so the form itself shows straight away.

    Thanks

  • Vanessa_T
    Replied on June 28, 2020 at 1:19 AM

    Glad to know that you find Option 2 useful on your current situation. Don't hesitate to reach out again to us if you ever need any other assistance.