-
mpeerGefragt 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:könnt ihr mir einen Tipp geben, wie ich das sauber formatiert einpflegen kann.
Danke -
Felizio Product Triage SpecialistGeantwortet 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.
-
mpeerGeantwortet 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 SupportGeantwortet 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:
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.
-
mpeerGeantwortet am 9. Juni 2023 um 02:08
I tested it on a Galaxy S10 with actual Chrome Browser.
-
Ryan Enterprise SupportGeantwortet 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.
-
mpeerGeantwortet am 9. Juni 2023 um 03:03
Now it works perfectly. Big THANKS👏🏼