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>
