-
cstcmyotherapyAsked 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 LeadReplied 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:
I hope this helps.
-
cstcmyotherapyReplied 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 SupportReplied 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.
-
cstcmyotherapyReplied 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 LeadReplied on June 27, 2020 at 8:03 AM
If you want to remove these gray spaces below:
Please try adding this code below to your form:
.jotform-form {
background: #ffff!important;
padding: 1px;
}
GUIDE: Adding-Custom-CSS-in-JotForm
-
cstcmyotherapyReplied 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
-
cstcmyotherapyReplied 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_TReplied 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.