Card Form: an option to adjust/remove space around the cards especially on mobile devices

Hello,

We love the new cards and our tests show a much better user experience, particularly on mobile. But our tests also show that users miss other content on the page the form is embeded in because there is so much white-space above and below the card.

Is there a solution or workaround for this?

Best,

Dale

Can you share the page here? We would need to see what's causing it. What particular mobile as well?

In the meantime, try disabling SMART EMBED option in the Publish wizard page to see if that will fix your problem. 

Here is an example: https://www.dcl.org/adult-education/proctoring-form/ Smart Embed is not enabled. There is about a 120px white-space above and below the form. Our guidelines are included below the form, but testing shows users on smaller laptops users don’t see the guidelines.
It would be best if the form aligned top and pushed content down as needed, similar to the way jQuery height() can be used to calculate the height of a single or parent element as needed.
...

Thank you for sharing the link to your website, we appreciate it. I have viewed the website both on a desktop browser and mobile browser and I can confirm the issue that you described happening.

Upon checking how you have embedded the form, it appears that you have used its JS Embed Script.

Try embedding the form using its Iframe Embed Script and that should fix it.

Getting-the-Form-iFrame-Code

Otherwise, please let us know.

That did not fix it.
...

Embed your form using iframe again and add a max-height style property in the code. This will limit the iframe height of the form affecting the top and bottom spacing. Feel free to adjust the max-height value until it perfectly fits on your page.

Example:

<iframe id="JotFormIFrame-82684983124163" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82684983124163" frameborder="0" style="width: 1px; min-width: 100%; height:539px;max-height:446px;border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-82684983124163"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

This doesn’t resolve the white-space issue either since the iframe’s height is calculated according to the tallest card. Shortening the iframe causes the taller cards to scroll.
...

Yes, you are correct that with iFrame, the height is calculated by the script part of the embed codes. I think there is no other way around this, so I'm forwarding this thread to our backend team to see if they can adjust this format. 

We cannot give you an ETA for this, and there is no guarantee that our backend team will consider this option. Most parts of the card form are fixed and designed that way. We'll let you know.