Form formatting issues on embedded form

  • mpeer
    Gefragt am 5. Juni 2023 um 07:17

    Hallo Jotformteam,

    ich habe ein problem mit der Formatierung des eingebetteten Formulares.
    Auf einem Smartphone betrachtet sieht das Formular nämlich so aus:
    Form formatting issues on embedded form Image 1 Screenshot 20

    könnt ihr mir einen Tipp geben, wie ich das sauber formatiert einpflegen kann.
    Danke

  • Felizio Product Triage Specialist
    Geantwortet am 6. Juni 2023 um 07:15

    Hi Marcel,

    Thanks for reaching out to Jotform Support. We will be replying to your questions in English since we don't have any German agents available currently. Can you please share the webpage where your form is embedded so we can check it out for you?

    Once we hear back from you, we'll be able to help you with this.

  • mpeer
    Geantwortet am 6. Juni 2023 um 09:43

    English shouldn´t be a big problem ;-)
    The page where the Form is embedded is https://www.schankservice.at/bewerbung
    You have to scroll until the end of the Page.
    With the Browser on a Desktop or Tablet the style is okay.
    You have to open it with eg. Android mobile or something like that for getting the result as screenshoted


  • Ryan Enterprise Support
    Geantwortet am 6. Juni 2023 um 12:37

    Hi Marcel,

    Thanks for getting back to us. I checked your embedded form to see if I could replicate the issue, but everything was working properly. Check out the screenshot below to see my result:

    Form formatting issues on embedded form Image 1 Screenshot 20
    Can you tell us what device and browser are you using so that we can replicate the issue on our end?

    Once we hear back from you, we'll be able to help you with this.

  • mpeer
    Geantwortet am 9. Juni 2023 um 02:08

    I tested it on a Galaxy S10 with actual Chrome Browser.

  • Ryan Enterprise Support
    Geantwortet am 9. Juni 2023 um 02:38

    Hi Marcel,

    Thanks for getting back to us. I also tested it on my Galaxy S10+ device using the Chrome browser and I was able to replicate what you are referring to. As I checked your embedded code, it seems that you did not include the <script> tag for your Iframe Embed Code. You may need to include it so that the layout will be set to the default layout. You can use the Iframe Embed Code below:

        <iframe
    id="JotFormIFrame-223241329473352"
    title="Bewerbungsformular Website"
    onload="window.parent.scrollTo(0,0)"
    allowtransparency="true"
    allowfullscreen="true"
    allow="geolocation; microphone; camera"
    src="https://form.jotform.com/223241329473352"
    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-223241329473352");
    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>

    Give it a try and let us know how it goes.

  • mpeer
    Geantwortet am 9. Juni 2023 um 03:03

    Now it works perfectly. Big THANKS👏🏼