Einbindung als iFrame

7 27. November 2024

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>