Form Title not mobile responsive after embedded on Website

  • solarstromrechner
    Gefragt am 28. November 2023 um 04:54

    Hallo Zusammen,

    ich habe mein Formular https://form.jotform.com/233046188213351 auf folgender Webseite eingebaut: https://start.solarstrom-rechner.de/. Leider wird das Formular nicht vollständig angezeigt, der obere Rand wird immer abgeschnitten. Ich habe schon versucht die Höhe zu verändern, aber ich habe keine Möglichkeit gefunden, die Überschrift komplett anzeigen zu lassen. Wie muss ich den Code dafür ändern, dass die Überschrift nicht mehr abgeschnitten wird?

    height 500px
    Form Title not mobile responsive after embedded on Website Image 1 Screenshot 30

    height 600px
    Form Title not mobile responsive after embedded on Website Image 2 Screenshot 41

    Ich habe folgenden Einbettungscode verwendet:
    <iframe id="JotFormIFrame-233046188213351" title="Erfahren Sie schnell was für Sie Solarstrom kostet und bringt" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/233046188213351" frameborder="0" style="min-width:100%;max-width:100%;height:539px;border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-233046188213351"); if (ifr) { var src = ifr.src; var iframeParams = []; if (window.location.href && window.location.href.indexOf("?") > -1) { iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&')); } if (src && src.indexOf("?") > -1) { iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&")); src = src.substr(0, src.indexOf("?")) } iframeParams.push("isIframeEmbed=1"); ifr.src = src + "?" + iframeParams.join('&'); } 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"; if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) { iframe.style.minHeight = 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": if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; } 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}), "*"); } }; window.isPermitted = function(originUrl, whitelisted_domains) { var url = document.createElement('a'); url.href = originUrl; var hostname = url.hostname; var result = false; if( typeof hostname !== 'undefined' ) { whitelisted_domains.forEach(function(element) { if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element ) { result = true; } }); return result; } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>


    Liebe Grüße

  • Mary Jotform Support
    Geantwortet am 28. November 2023 um 11:25

    Hi solarstromrechner,

    Thanks for reaching out to Jotform Support. Unfortunately, our German Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    Now, let me help you with your question. It seems that the problem is with the form title not being responsive after it's embedded on the web page. This issue will not be resolved through CSS code. In the meantime, you may disable the form title.

    • In the Builder page, go to Settings.
    • Click Show More Options.
      Form Title not mobile responsive after embedded on Website Image 1 Screenshot 30
    • Disable the Show Form Title by selecting No.
      Form Title not mobile responsive after embedded on Website Image 2 Screenshot 41

    I've gone ahead and escalated your issue to our Developers. Rest assured that we’ll get back to you with an update as soon as we have one.

    Thanks for your patience and understanding. We appreciate it.

  • solarstromrechner
    Geantwortet am 29. November 2023 um 04:30

    Thanks for your answer.

  • beril Jotform UI Developer
    Geantwortet am 19. Dezember 2023 um 09:28

    The issue should be fixed now. Thank you for reporting the issue.