What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form embedded on website not showing submit button?

    Asked by cetot on April 08, 2016 at 08:46 AM

    I use iframe and paste to my website, but when i view the form using my hp, (mobile), it did not display full form, no SUBMIT BUTTON . half form only. How?



    This is a re-post of a comment on Which form embed code should I use?

    Mobile no submit no submit button and
  • Profile Image
    JotForm Support

    Answered by Charlie on April 08, 2016 at 09:47 AM

    Could you please share us the website page where the form is embedded? You might need to adjust the height value of your iFrame embed code. Please also make sure that the form is mobile responsive. Here's a guide that you can refer to: https://www.jotform.com/help/322-How-To-Make-Mobile-Friendly-Forms-on-JotForm.

    We'll wait for your response. 

  • Profile Image

    Answered by cetot on April 08, 2016 at 12:00 PM

    i have done follow the guide given but still not full form display in mobile. 

    my website to the registration form : http://nourulle.com/register-as-dropship-agent.html

     

    Thank you

  • Profile Image
    JotForm Support

    Answered by Charlie on April 08, 2016 at 01:25 PM

    The problem seems to be related to a script conflict that is responsible for making your form mobile responsive. I see your form is loading a jQuery, if you have other JS libraries then those things has a high probability that would conflict with the script code that we have. 

    Example:

    Here's your iFrame embed code:

        <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.co/60931795558873"

          frameborder="0"

          style="width:100%;

          height:539px;

          border:none;"

          scrolling="no">

        </iframe>

        <script type="text/javascript">

          window.handleIFrameMessage = function(e) {

            var args = e.data.split(":");

            var 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);

          }

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            var ifr = document.getElementById("JotFormIFrame");

            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;

            }

          }

          </script>

     

    It has two parts, one is wrapped in <iframe> (green highlight) and the other is a <script> code (yellow highlight). The script code is involved in making your <iframe> mobile responsive. However, the problem is that your website seems to also have its own scripts to make the whole website responsive. The conflict happens here. Which is why your form is not fully showing in mobile device, because it doesn't adjust correctly.

     

    Could you try the following:

    Solution 1: 

    In your iFrame code, find the height value and adjust it to 3000px. See if that works:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.co/60931795558873" frameborder="0" style="width: 100%; height: 3000px; border: none;" scrolling="no">

        </iframe>

     

     

    Solution 2:

    Paste only the code wrapped in <iframe> tags AND removed the <script> code that was included in it. Why? We'll see if the jQuery and other scripts tries to make your iFrame mobile responsive. Make sure to also set the height value that will cover the whole form. What might happen is that your jQuery or other JS library will not make it mobile responsive, if that is the case, you'll need to set a fixed height.

     

    Let us know if that works.