Embedded forms
Om formulieren van de formulierenserver te kunnen tonen in andere sites moeten aan beide kanten serverinstellingen worden gedaan om Cross-Origin Resource Sharing (CORS) toe te staan. Aan de formulierenserverkant zet Seneca de Access-Control-Allow-Origin header voor de host (of desgewenst hosts) van de klant. Aan de embeddende kant moet de Content Security Policy (CSP) de customer host van de formulierenserver opnemen in script-src, style-src, connect-src, frame-src en form-action.
De CSPs connect-, style- en script-src spreken voor zich. Frame-src en form-action zijn nodig omdat file uploads via een reguliere form POST in een iframe naar de formulierenserver worden verstuurd.
Als alle http headers goed staan is het embedden van een formulier een kwestie van vier regels html opnemen in een pagina:
| XML |
Copy Code
|
|---|---|
<div class="sfs-xforms-section [sfs-load-all-css]">
Als het formulier niet laadt kunt u het <a class="form-link" href="https://embeddemo.formulierenserver.nl/producturl">hier</a> invullen.
</div>
<script src="https://embeddemo.formulierenserver.nl/Scripts/xforms.embed.js"></script>
|
|
De tekst binnen de sfs-xforms-section kan naar believen worden aangepast. De class attributen zijn wel van belang. De sfs-xforms-section geeft het element aan waar het formulier geplaatst zal worden. We gebruiken een div element in plaats van een section, omdat section in Internet Explorer niet werkte. De anchor tag met class "form-link" bevat de url van het product dat geladen moet worden. Standaard worden alleen de stylesheets xforms_base.css en jquery-ui.css geladen. Wanneer de class "sfs-load-all-css" op de sfs-xforms-section staat worden alle stylesheets die in de normale rendering van het product worden gebruikt ook voor het embedded formulier ingeladen.
Het xforms-embed.js script plaatst eerst een span met de class "sfs-loading-form" aan het begin van de section. Hier kan met css een notificatie worden getoond dat het script bezig is. Als het formulier is ingeladen wordt de volledige inhoud van de section vervangen door het opgehaalde formulier element. Daarna wordt het custom event "XForms_FormAvailable" afgevuurd. Daaraan kunnen eventueel extra scripts worden gekoppeld om het formulier te verrijken.