-
emprendedoresalfa.infoFecha de consulta 21 de marzo de 2024, 15:18
Hola
Espero estés bien.
Comentarte que tenemos un formulario, el cual, hemos embebido a nuestra web. Notamos que el texto que agregamos no se ve bien. ¿Es posible remover la barra de navegación lateral sin tener que editar el texto, pero que el texto luzca perfecto?
El código que hemos usado para embeber el formulario fue este:
<script type="text/javascript" src="https://form.jotform.com/jsform/230658037496666"></script>
Te muestro a continuación como se ve el formulario embebido en nuestra web:
https://www.loom.com/share/b939ab2869c847318b9d19cd6d34da60?sid=604576af-8d2d-4a57-98c2-7ccb534bc624
Ojalá puedas ayudarnos a resolver esta situación. -
Ryan Enterprise SupportFecha de respuesta 21 de marzo de 2024, 17:42
Hi Marcos,
Thanks for reaching out to Jotform Support. Unfortunately, our Spanish 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 Spanish, 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. Unfortunately, it is not possible to manually remove the side navigation as we cannot inject a CSS code in a Card Form layout. Can you try to embed your form using the Iframe embed code instead and see if your form will be responsive? Let me show you how:
1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. Click on Embed in the menu on the left side of the page.
3. Select the Iframe embed code.4. Click on the Copy Code button and paste it on your website.
Give it a try and let us know how it goes. -
emprendedoresalfa.infoFecha de respuesta 21 de marzo de 2024, 21:42
Hi Ryan
We have several forms that have the same problem, one of them, for example, we can't place it with iframe, because it is a floating opinion button.
I share it with you to see if you can do something for us.
FLOATING OPINION FORM
<script src="https://form.jotform.com/s/umd/latest/for-cardform-feedback-embed.js"></script>
<script>
new JF_FeedbackEmbedButton({
buttonIcon: "default",
buttonFontColor: "#FFFFFF",
buttonBackgroundColor: "#262626FE",
formId: 240684363585667
,
buttonText: "¿Tienes una sugerencia?",
buttonSide: "Bottom",
buttonAlign: "Right",
base: "https://form.jotform.com/",
});
</script>
<script type="text/javascript">
var ifr = document.getElementById("lightbox-240684363585667");
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("lightbox-" + args[(args.length - 1)]); } else { iframe = document.getElementById("lightbox"); }
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>
We want to fix, the same form but we are embedding it in a web with iframe:
<iframe
id="JotFormIFrame-240684363585667"
title="Formulario Maestro de Mejoras"
onDISABLEDload="window.parent.scrollTo(0,0)"
allowtransparency="true"
allow="geolocation; microphone; camera; fullscreen"
src="https://form.jotform.com/240684363585667"
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-240684363585667");
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>
Finally, the other form we want to fix is:
Formulario de opinión:
<iframe
id="JotFormIFrame-230658037496666"
title="Formulario de opinión [ANÓNIMO]"
onDISABLEDload="window.parent.scrollTo(0,0)"
allowtransparency="true"
allow="geolocation; microphone; camera; fullscreen"
src="https://form.jotform.com/230658037496666"
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-230658037496666");
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>
These are our 2 forms and 3 codes that we want to modify so that the texts in each of them look good
-
William Jotform SupportFecha de respuesta 21 de marzo de 2024, 23:57
Hi Marcos,
Thanks for getting back to us. Unfortunately, we cannot do more than what is available on the form builder because your form uses a card form layout. So this is not possible. You can however switch to a classic form layout so that the contents of your form can be styled further.
You can check out the steps from this guide how to change your form layout.
Let us know if you hare more questions,