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

  • Profile Image
    cstcmyotherapy
    Asked on June 25, 2020 at 09: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

  • Profile Image
    Kevin_G
    Answered on June 25, 2020 at 09: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.png

    I hope this helps. 

  • Profile Image
    cstcmyotherapy
    Answered on June 26, 2020 at 01: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?

  • Profile Image
    Sonnyfer
    Answered on June 26, 2020 at 02: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" onload="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.

  • Profile Image
    cstcmyotherapy
    Answered on June 27, 2020 at 06: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

  • Profile Image
    JohnRex
    Answered on June 27, 2020 at 08:03 AM

    If you want to remove these gray spaces below:

    15932593822413203.png

    Please try adding this code below to your form:

    .jotform-form {

        background: #ffff!important;

        padding: 1px;

    }

    GUIDEAdding-Custom-CSS-in-JotForm 

  • Profile Image
    cstcmyotherapy
    Answered 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

  • Profile Image
    cstcmyotherapy
    Answered 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

  • Profile Image
    Vanessa_T
    Answered on June 28, 2020 at 01: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.