Es kann unser gehostetes Formular mit einen iFrame eingebunden werden.
Dabei kann mit dem Parameter css ein eigenen Stylesheet übergeben werden. Der dynamische Query-Parameter der Seite muss an das iFrame übergeben werden.
<html>
<head>
<style>
iframe {
width: 100%;
height: 800px;
border: 0;
}
</style>
</head>
<body>
<iframe id="iFrame" src="https://fo.sitec.com/forms/checkin.html? css=https://www.testhotel.com/css/styles.css&code=ZGVtb19nYXN0fEJ8MjU5OUNCWXw="></iframe>
</body>
</html>
Cyan: von uns gehostetes Formular
Orange: URL des Stylesheets (css)
Gelb: Automatisch generierter Parameter aus der FOC
Die Parameterübergabe kann serverseitig (z.B. asp.net, php) oder auch clientseitig erfolgen, z.B: mit jQuery.
$('#iFrame').attr('src', 'https://fo.sitec.com/forms/checkin.html?css=https:// https://www.testhotel.com/css/styles.css&code=' + location.search.substr(1));
Gelb: Hier wird aus der URL der automatisch generierte Parameter ausgelesen
Der vollständige Code könnte wie folgt aussehen:
<html>
<head>
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<!-- // jQuery -->
<style>
iframe {
width: 100%;
height: 800px;
border: 0;
}
</style>
</head>
<body>
<iframe id="iFrame"></iframe>
<script>
$('#iFrame').attr('src', 'https://fo.sitec.com/forms/checkin.html?css=https://www.testhotel.com/css/styles.css&code=' + location.search.substr(1));
</script>
</body>
</html>