JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
Iframe embedded form is not displaying in fullAsked by mcwood968 on June 14, 2016 at 02:41 PM
I'm trying to get the iframe to be truly responsive (based on device, screen, and orientation) so my form neither gets cut off nor leaves a huge blank space at the bottom of the form if the user rotates their device.
-- In the Form Designer I've selected "Make this form responsive" but that only handles the content of the form, not the iframe.
-- I tried the Mobile Responsive widget but it also only handles the content of the form itself, not the iframe.
-- Using the full source code is not an option since other, non-technical team members may need to modify the form within JotForm in the future.
-- My site is built on Squarespace and I have embedded my form by copying the code in JotForm > Publish > Platforms > Squarespace and pasting the code into a code block within my page in Squarespace.
-- My JotForm link... https://form.jotform.com/61585790637165.
-- Page on my site where I'm trying to resolve this issue... http://www.healthitconferences.com/iframe-resizer.
-- Attached screenshot shows the bottom of the form being cut off. I'm using the developer tools in Firefox w/ responsive mode turned on with a device setting of 360x640. When I rotate this screen to be landscape orientation the full form displays with a giant amount of empty space at the bottom of the form after the submit button.
I appreciate the help!
Unfortunately, you can't embed a script into your form. That will be stripped off for security reasons.
Actually, script embed and iframe embed codes have built-in iframe resizer feature.
For iframe, if you have noticed, there's a script included when you take the iframe embed code, part of it is used to calculate the total height of the form. Once there's a change in the iframe content, the iframe height will automatically adjust according to the content height.
However, in your case, it seems the reCaptcha field is the one causing the form to cut off since the iframe resizer script executes first before the reCaptcha field is generated. I will forward this to our developers so they can further investigate and fix the problem.
For now, I have injected the following CSS codes into your form. Defining a height of the captcha field through CSS should fix it. This value will be fed up into the iframe resizer during the iframe height calculation (this is the exact height value of the captcha field once generated on the form).
This should give you the following result:
Let us know if you have further questions.
Thank you so much for explaining this in detail. I really appreciate the help! I can breathe a sigh of relief now. :)
Further testing has shown that simply adding a height to the reCaptcha code block actually does not solve the issue.
I was still able to see the issue as well when I test on your website on mobile browser.
But using the form URL only https://www.jotform.us/form/61585790637165 did not show the same issue.
I think you just need to get again the updated iframe publish code of the form and re-publish it on your website.
User guide: Getting-the-form-iFrame-code
Make sure to clear first the previous embedded code before re-embedding.
Let us know if this still did not fix the issue.