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 Cut off Problem Returned

    Asked by thebidcalendar on December 17, 2015 at 02:13 AM

    I have two forms on one page.. One is being cut off, it is longer than the other one.

    I have posted both as script, cut off, both as Iframe, cut off, one iframe and one script still cut off.

    Is there a way to build a form that can be submitted in multi parts, all parts will have mandatory blanks that have to be filled prior to submitting.

     

    Page URL:
    http://www.thebidcalendar.com/request-for-subscription.php

    cut form cut two forms iframe
  • Profile Image
    JotForm Support

    Answered by Charlie on December 17, 2015 at 02:55 AM

    Upon checking your website, there are two forms embedded on the same page. The problem is that they are calling the same resources that causes conflicts.

    If you are using the iFrame code, please note that there's a script included on it when you copy the code, the script is responsible to adjusting your iFrame's size to make it mobile responsive. The problem is that you have two scripts on the same page that is being called.

    Please try the following if this will fix the issue:

    1. Here is the iFrame embed code of your left side form:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/53485348053156" frameborder="0" style="width: 100%; height: 1253px; 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>

     

    2. Here is the iFrame embed code of your right side form:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/53485695473167" frameborder="0" style="width:100%;

          height:739px;

          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>

     

    3. Noticed that both iFrame have the same script code, the code highlighted in yellow.

    4. If you remove only one script code, what it does is it will adjust both of the iFrame's height with the same value. This means the longer form will probably be cut off.

    5. What you can do is remove BOTH script codes then make sure that you have declared the correct height value on the iFrames. This means, the final embed code will be something like this:

    Left side form:

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

        </iframe>

     

    Right side form:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/53485695473167" frameborder="0" style="width:100%;

          height:739px;

          border:none;" scrolling="no">

        </iframe>

     

     

    However, the possible problem that you have will be the responsive layout of these forms. I tried to recreate your website so that I can better test it, see if if you are having problems viewing this one: https://shots.jotform.com/charlie/two_forms_727480/test.html 

     

    Let us know if that helps.

  • Profile Image

    Answered by thebidcalendar on December 17, 2015 at 03:45 AM

    Using the two iframe codes causes a rejection of the credit card number.
    This was my initial problem when I was using two script. When I went to
    the 1 script and 1 iframe the credit card number problem was solved, but
    the cut off problem stuck its head up.
    My customer has to be able to submit the form on the left regardless of
    how they pay, I do accept check payments.
    If I make one form with both these forms on it and all mandatory fields
    the customer won't be able to submit the info in the left form without
    filing out the info in the right form. So if they are paying by check it
    won't fly.
    I want to keep both forms on one page, or have a form that could be
    split to allow two different submittals, one not affecting the other.
    Until it can be solved, I am going to take the restriction off the
    credit card part of the form and use one form.
    ---
    George Johnson
    The Bid Calendar
    gjohnson@thebidcalendar.com
    ...
  • Profile Image
    JotForm Support

    Answered by beril on December 17, 2015 at 04:37 AM

    Hi,

    We are glad to hear that the credit card number problem was solved,

    The second form is for customers who are paying with credit card. I can suggest you redirect your customers to your second form who are paying with credit card.

     

  • Profile Image

    Answered by thebidcalendar on December 17, 2015 at 05:45 AM

    Don't know what is wrong not. I went back to my original form, using
    script and it rejects the credit card number, tried two different credit
    cards with same result "invalid Credit Card Number"
    Would you look at it again.
    HTTP://WWW.THEBIDCALENDAR.COM/REQUEST-FOR-SUBSCRIPTION.PHP [4]
    ---
    George Johnson
    The Bid Calendar
    gjohnson@thebidcalendar.com
    ...
  • Profile Image

    Answered by thebidcalendar on December 17, 2015 at 05:45 AM

    Thanks,
    No, credit card problem just got back to where it was at first.
    Form has started not accepting credit card numbers again. I just must be
    picking wrong code. Tried iframe and its now sitting on site with
    script. Both reject for Invalid credit card number. Tried two cards,
    same result.
    HTTP://WWW.THEBIDCALENDAR.COM/REQUEST-FOR-SUBSCRIPTION.PHP [4]

    ---
    George Johnson
    The Bid Calendar
    gjohnson@thebidcalendar.com
    ...
  • Profile Image
    JotForm Support

    Answered by beril on December 17, 2015 at 07:45 AM

    The problem might be due to having two forms on the same page. I think, redirecting to different page might be solve the problem.

    When I check your website, I see that none of your forms are there.

     

     

     

  • Profile Image

    Answered by thebidcalendar on December 17, 2015 at 09:45 AM

    Try now, i was working on it
    http://www.thebidcalendar.com/request-for-subscription.php
    [4]
    ---
    George Johnson
    The Bid Calendar
    gjohnson@thebidcalendar.com
    ...
  • Profile Image
    JotForm Support

    Answered by Charlie on December 17, 2015 at 10:51 AM

    It seems like you have two problems discussing on this thread. Please do note that it would be best to focus on one topic or problem per thread. I went ahead and opened a separate thread regarding the credit card problem in this link: https://www.jotform.com/answers/727767. Please refer and reply to that link instead.

     

    Now, regarding the forms. Please check my test form here: https://shots.jotform.com/charlie/two_forms_727480/test.html. The left side form has a credit card field, I cloned your form and setup my own Stripe payment wizard, I then use a test card number 4242424242424242 and security code 123. And it works, you can check the screencast below. You can also make a test submission in my website.

     

    Please note that when you are using the iFrame code (and removed the script included on it), forms won't affect each other and the credit card should still work. I presume the problem regarding the forms being cut off on your page should now be resolved by using the iFrame without its script codes included on them. Please check my post.

    I hope that helps.

  • Profile Image

    Answered by thebidcalendar on December 17, 2015 at 04:45 PM

    could you furnish me with the two I frame codes you used, I will try
    them.
    I will completly rebuild the forms from scratch and utilize your codes
    in adding to my site.
    ---
    George Johnson
    The Bid Calendar
    gjohnson@thebidcalendar.com
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on December 17, 2015 at 06:56 PM

    Hi George,

    You can copy the 2 iframe codes used by Charlie separately from here

    Iframe 1:  http://pastie.org/10638934

    Iframe 2: http://pastie.org/10638935

    Hope this help. Let us know if further assistance is needed.

     

  • Profile Image

    Answered by thebidcalendar on December 17, 2015 at 07:45 PM

    Ok, used them and tried a credit card. Response was.
    OOPS!
    Your card was declined. Your request was in test mode, but used a non
    test card.
    ---
    George Johnson
    The Bid Calendar
    gjohnson@thebidcalendar.com
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on December 17, 2015 at 09:04 PM

    Can you share to us the URL of the website where we can check the latest updates you did?

    Please take note also that you need to set your own form URL on the iframe code I have provided previously.

    http://pastie.org/10638935#5

    http://pastie.org/10638934#5

     

    The current forms on those embed code where Charlie's test form. That could be the reason when you test submit, the payment option did not work.

    I apologize I missed to mention it previously.

    Let us know how it goes.

     

  • Profile Image

    Answered by thebidcalendar on December 17, 2015 at 09:45 PM

    http://www.thebidcalendar.com/request-for-subscription.php [6]
    I have it working now, so far.
    What I did was put both forms on one, manually entered the API codes and
    so far it is working. Ran my card thru it with no problem.
    I would still like to be able to break the two forms apart, but can live
    with this, set up.
    Why doesn't jotform furnish the iframe code without the script to allow
    more than one form on one page?
    I want to thank all you guys and gals for all the help.
    You are the greatest.
    ---
    George Johnson
    The Bid Calendar
    gjohnson@thebidcalendar.com
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on December 17, 2015 at 11:06 PM

    Thank you for taking the time updating us on the status. We are glad to know it finally work.

    Why doesn't jotform furnish the iframe code without the script to allow more than one form on one page?

    The script part of the iframe embed code was meant to address the issue of iframe embed not being able to dynamically resize(height) when using different device browsers. Without the script part.. the iframe will behave in static way such us it has it has a fixed height. This is more evindent when the form has multiple pages, and the pages of the form have different height.

    You are welcome also :)

     

    Cheers