Using multilingual form with URL parameters

  • Profile Image
    GlobalSuccessFund
    Asked on June 28, 2017 at 01:05 AM

    Hi,

    I have created a multilingual form that I intend to use at a multilingual website (www.globalsuccessfund.org)

    Instead of having a dropdown within the form to toggle between English and Spanish, is it possible to have a direct URL for English, and another one for Spanish?

    The idea is, whenever we will click on a button on the English version of the website, it should open up the form in English, and the same for Spanish.

     

    I tried putting "??lang=en" at the end of the form URL but that didn't work.

  • Profile Image
    Charlie
    Answered on June 28, 2017 at 02:49 AM

    Apologies for the inconvenience. Have you tried using ?language=en and ?language=es instead? Here's how you can append it on your form's direct link:

    https://form.jotform.me/71390357810455?language=es - Spanish

    https://form.jotform.me/71390357810455?language=en - English

     

    If you are embedding the form in your website, you can use the iFrame embed code and append the ?language= directly in the src attribute.

    Here's an example of an iFrame embed code where I will append the language in the URL parameter:

     <iframe id="JotFormIFrame-71781387794978" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformpro.com/71781387794978?language=en" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-71781387794978"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); 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}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

     

    You can then create another page in the Spanish website and embed the form again but with a different language in the URL parameter.

    Let us know if that works.

  • Profile Image
    GlobalSuccessFund
    Answered on June 28, 2017 at 04:29 AM

    Thanks so much!! That works.

    Is there a way to remove the language changing dropdown from the top right corner of the form? I could just pass the parameters through the URL and not provide the users with an option to toggle languages while on the page

  • Profile Image
    Charlie
    Answered on June 28, 2017 at 05:06 AM

    You can hide the language drop down option by using CSS code. I see you already have a CSS code in your form for the language option, you can just update it to this:

    .language-dd {

      display: none !important;

    }

     

    You can follow this guide on how to inject custom CSS codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here's a test form I made where you can see how it looks after the change:

    https://form.jotformpro.com/71782206794969?language=es 

    https://form.jotformpro.com/71782206794969?language=en 

     

    I hope that helps.