Remover barra lateral de navegación

  • emprendedoresalfa.info
    Fecha 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 Jotform Support
    Fecha 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.

    Remover barra lateral de navegación Image 1 Screenshot 30

    4. Click on the Copy Code button and paste it on your website.

    Remover barra lateral de navegación Image 2 Screenshot 41
    Give it a try and let us know how it goes.

  • emprendedoresalfa.info
    Fecha 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 Support
    Fecha 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,