How To: Test ArcGIS Survey123's Generated HTML Locally Using Python's http.server Module

Summary

ArcGIS Survey123 forms can be embedded in websites using an <iframe> HTML element. The ArcGIS Survey123 Web App can generate <iframe> HTML for any publicly shared survey under the survey’s Collaborate tab (Survey > Share survey > Share this survey > Embed). The generated <iframe> element can then be copy/pasted into a website’s HTML.

It may be useful to observe how a Survey123 form appears or behaves when embedded in a website using an <iframe> element. However, a test HTML file including a Survey123 generated <iframe> does not load as a file in your web browser. Instead, it must be served via HTTP. See Mozilla’s documentation on opening HTML files locally for more information.

Procedure

Test HTML files with Survey123 generated <iframe> elements can be served to yourself using Python's http.server module, assuming Python is installed, and Windows' IIS Web Management Tools and World Wide Web Services are enabled.

Start by creating an HTML file on your computer using a text editor such as Notepad++ or VS Code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Survey123 iframe test</title>
    </head>
    <body>
    </body>
</html>

Note: 
Saving this file in a new folder makes the next steps easier.

Once the HTML file is created, copy/paste the generated Survey123 <iframe> element into the HTML, pasting the <style> element inside the <head> element and the <div>/<iframe> elements inside the <body> element

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Survey123 iframe test</title>
        <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>
    </head>
    <body>
        <div class="embed-container">
            <iframe name="survey123webform" width="500" height="400" frameborder="0" marginheight="0"
                marginwidth="0" title="Bug Map Zoom Level" src="//survey123.arcgis.com/share/ae9c15b587494647b5186d69e81d042f"
                allow="geolocation https://survey123.arcgis.com; camera https://survey123.arcgis.com">
            </iframe>
        </div>
        <script>var survey123webform = document.getElementsByName('survey123webform')[0]; window.addEventListener("message", 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>
    </body>
</html>

View the HTML file in a web browser to test the embedded survey’s appearance and behavior. As noted, unlike simpler HTML files, we cannot open the file directly in our browser via its local file path, but we can serve it to ourselves via HTTP using Python’s http.server module.
1. Open a Command Prompt or Python Command Prompt.
2. Navigate to the folder where the HTML file is saved using the cd command, for example: cd .\Desktop\Test
3. Paste python -m http.server after the prompt and press Enter.
4. In a web browser, open http://localhost:8000/ and click the HTML file you just created. It should load in your browser tab.
5. When finished inspecting it, return to the Command Prompt or Python Command Prompt and press Ctrl+C to stop serving.

Article ID: 000026171

Software: