Dynamically create iFrame with PHP

  • Profile Image
    chrdunne
    Asked on November 08, 2017 at 09:18 AM

    Hi

    Initially the problem appeared to be fixed and in Preview mode I can use Fill Form and Conditional Logic appears to be working.

    On my website I want to pass a parameter to the form - parameter is called source.

    So my URL looks like 

    https://form.jotformeu.com/73112398154354?source=acmp

    If I go to this link, everything appears to be working correctly. But I want to dynamically generate this as the source parameter may be different depending on which page the user accesses the form from.

    So I am using PHP to generate the iframe code and append the parameter. Code at end of this message.

    I also have a HTML page with the iframe code (modified to include the parameter). When I visit the HTML page everything seems to work. But if I visit the php page, the form is presented but conditional logic and validation are not working. Also on the final page, the submit button does nothing and in the Javascript console I see errors.

    list.js:646 Configurable list ready {type: "ready", qid: "47", formID: "73112398154354", required: true, static: false, …}

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q124_whoIs' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q23_tellUs' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q125_whenYour125' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q126_pleaseProvide[addr_line1]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q126_pleaseProvide[addr_line2]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q126_pleaseProvide[city]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q126_pleaseProvide[state]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q126_pleaseProvide[postal]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q126_pleaseProvide[country]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q85_describeFire85' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q86_describeBurglar' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q112_pleaseSelect112[]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q112_pleaseSelect112[]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q112_pleaseSelect112[]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q112_pleaseSelect112[]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q112_pleaseSelect112[]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q112_pleaseSelect112[]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q112_pleaseSelect112[]' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q41_additionalInsured' is not focusable.

    73112398154354?source=ACMP&source=ACMP:1 An invalid form control with name='q42_additionalInsured42' is not focusable.


    If I remove the parameter everything seems to work ok.

    I've tried clearing caches. I copied the form to another account. But I'm still getting the same errors.

    My PHP code is

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Main Program Quote Request</title>


    </head>

    <body>


    <?php


    $source = $_GET['source']; 

    echo '<iframe

    id="JotFormIFrame-73112398154354"

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

    allowtransparency="true"

    src="https://form.jotformeu.com/73112398154354?source='.$source.'"

    frameborder="0"

    style="width: 1px;

    min-width: 100%;

    height:8200px;

    border:none;"

    scrolling="no">

    </iframe>

    <script type="text/javascript">

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

    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>';

    ?>


    </body>

    </html>

  • Profile Image
    ashwin_d
    Answered on November 08, 2017 at 11:16 AM

    I am not a PHP expert but looking at the code you have shared, I am not sure why it is showing the console error in browser. I would suggest you to please share the webpage URL where you have hosted your PHO code and we will take a look.

    What exactly is your requirement of dynamically passing the URL parameter and also including the script part of the iFrame code within the PHP code. It can be moved out of the PHP code.

    We will wait for your response.

  • Profile Image
    chrdunne
    Answered on November 09, 2017 at 04:14 AM

    We have a form on the site which can be accessed from multiple landing pages. We want to track which landing page the user comes from. 

    We could add the form URL to each landing page, but this would be extra maintenance if the form ID every changes and there is a risk one of the changes will be missed.

    So we want to allow the user to click on a link e.g. www.company.com/form.php?source=landingpage1.

    There is no specific reason for including the script code part of the iFrame in the PHP code - but since this was all generated from Jotform I though it safer to ensure I was including it exactly as is.

    You can go to the following URL to see an example of the problem

    https://www.anderson-group.com/getaquote/main/form.php?source=acmp

    You will see several mandatory fields. If you click Next without filling them in, only one of those mandatory fields will cause an error. Other pages in the form have similar behaviour.

    Chris

  • Profile Image
    liyam
    Answered on November 09, 2017 at 06:14 AM

    Can you tell us the page where the code is embedded?

    Update: My apologies. I see that you have shared the URL of the page but I failed to see it as a response. I checked the page but I did not encounter any errors. 

    I checked it on my end, copy-pasting your code and placed it on my test website but I do not see any errors. Here is my test page: http://lexanimo.rf.gd/jotform/chrdunne.php?source=acmp

    We'll look forward to your response.

    Thanks.

  • Profile Image
    raledo
    Answered on November 09, 2017 at 07:03 AM

    Hi

    I just tried your URL and I see the errors. I have tried in both Chrome and IE.

    When the first page of the form is displayed, try clicking NEXT. I see the following

    1510228876jotform_required_error.PNG

    Only one field marked with error message. But I should see the following

    1510228926jotform_required_working.PNG

    When I complete all fields on all pages, and then click Submit, I see the following in the JavaScript console.

    1510228980jotform_submit_errors.PNG

  • Profile Image
    ashwin_d
    Answered on November 09, 2017 at 08:29 AM

    Thank you for sharing the screenshots. I did test the issue and I am able to replicate the issue you are having. I am not sure what is causing this issue. 

    I would suggest you to please remove the script part of the iFrame embed code and see if that makes any difference. 

  • Profile Image
    liyam
    Answered on November 09, 2017 at 09:50 AM

    I just made a further test and debugged your script, and here is how to resolve your problem:

    Remove the GET parameter from your script:

    15102384112017-11-09_2238.png

    What happens:

    - When you visit the page with the get parameter source, and you have on your script the same source included, it gets appended. So when you visit the page like this: 

    https://www.anderson-group.com/getaquote/main/form.php?source=acmp,

    on your script, it becomes like this:

    https://form.jotformeu.com/73112398154354?source=acmp&source=acmp

    Notice that it gets encoded twice. 

    This also means that you do not need to use the PHP code for that one, so you can just take it out from the echo.

    Feel free to let us know if you have additional questions.

    Thanks.

  • Profile Image
    raledo
    Answered on November 09, 2017 at 10:26 AM

    OK. It actually worked when I removed the javascript. So is the case that the Javascript adds the parameters, and so there is no need for my PHP code to add the parameters?

  • Profile Image
    ashwin_d
    Answered on November 09, 2017 at 11:45 AM

    Yes that's correct and that's what my colleague @liyam has explained in previous reply.

    You can also go ahead and remove the javascript code as well. The only use of the Javascript code is to dynamically increase/decrease the height of the iFrame.

  • Profile Image
    raledo
    Answered on November 09, 2017 at 12:19 PM

    Thanks. This is resolved now.