Survey123 embed code doesn't work for standalone page

Jay_Gregory — Sun, 12 Dec 2021 10:24:21 GMT

I am trying to create a single webpage with a single iframe that can host my Survey123 survey. The sole reason I am not just sending a link via email is so users think the survey comes from an internal resource. That is, the survey link url starts with Survey123.arcgis.com, but if I can host a page internally, I can make it seem as if it is coming from within my own organization's domain.

Below is my single page, which was essentially constructed from the embed code taken directly from Survey123 website.

There are essentially two issues I'm seeing:

1. There is a double scrollbar which I can't seem to easily fix

2. When I submit the survey, the data posts correctly, however the submitting button or form never goes away, and there is an error in the console that says Uncaught (in promise) TypeError: Cannot assign to read only property 'message' of object ''

Can anyone help me with these two issues? There is lots of examples on stack overflow for getting rid of double scrollbars, but none seem to work in this case, and don't really understand forms within iframes so can't speak to the second issue....

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Survey</title>
    <meta name="description" content="Survey">
    <meta name="author">
    <style>
        .embed-container {
            position: relative;
            height: 0;
            padding-bottom: 80%;
            max-width: 100%;
        }

        .embed-container iframe,
        .embed-container object,
        .embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        small {
            position: absolute;
            z-index: 40;
            bottom: 0;
            margin-bottom: -15px;
        }
    </style>
    <script>
        var survey123webform = document.getElementsByName('survey123webform')[0]; 
        window.addEventListener("message", function(e) { 
            if (e.data) {
                var t = JSON.parse(e.data); 
                "survey123:onFormLoaded" === t.event && t.contentHeight && (survey123webform.parentNode.style.height = t.contentHeight + "px") && (survey123webform.parentNode.style["padding-bottom"] = "unset"); 
                } 
            });
    </script>
</head>
<body>
    <div class="embed-container">
        <iframe name="survey123webform" width="500" height="400" frameborder="0" marginheight="0" marginwidth="0"
            title="EON Earth Survey"
            src="//mysurveyurls&hide=navbar,footer"></iframe>
    </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Survey123 embed code doesn't work for standalone page

JamesTedrick — Tue, 21 Apr 2020 23:10:09 GMT

Hi Jay,

A couple of things:

- in your HTML, you aren't setting any style properties like height for the page itself - setting appropriate styles should address the scrollbar issue

- You may want to get the new version of the embed link that accompanied the 3.9 release - the message processing function has been updated.

topic Survey123 embed code doesn't work for standalone page in ArcGIS Survey123 Questions

Survey123 embed code doesn't work for standalone page

Re: Survey123 embed code doesn't work for standalone page