Om formulieren op een externe website te plaatsen kun je in de formulier instellingen bij de tab ‘Landingspagina’ een landingspagina aangemaakt moet worden voor het formulier. Onder de sub-tab ‘Delen’ kun je dan de iframe code kopiëren zodat je dit formulier middels een iframe kunt embedden op een andere website
Let op: dit werkt alleen als je andere website bij ons bekend is. Onze websites zijn namelijk tegen clickjacking beschermd zodat je formulieren niet misbruikt kunnen worden op andere websites dan die van jezelf. We whitelisten altijd je eigen hoofddomein/website. Als je een formulier op een andere website wilt embedden dan kun je ons daarover mailen. Als je de melding ‘[websitenaam] refused to connect.’ ziet op de plek waar je de iframe hebt geplaatst, dan moeten we die website nog whitelisten. Stuur ons in dat geval een email met de url van de website waar je het formulier op wilt plaatsen.
Op je andere website kun je deze code vaak in een HTML blok plaatsen, of direct in de HTML code van de website.
Een alternatief is om de landingspagina url van het formulier te kopiëren en op de externe website een link te plaatsen naar dit formulier.
Aanpassen van het iframe (om de scrollbar te voorkomen) #
De standaard hoogte van het iframe waarin het formulier weergegeven zal worden is 500px. Als je meerdere velden in het formulier hebt, dan kan het zijn dat het formulier daar niet volledig binnen past. In dat geval zie je aan de rechterkant een scrollbar.
Om dit op te lossen kun je in de embed code de hoogte van het iframe verhogen zodat het qua pixels net zo hoog is als het formulier. Probeer bijvoorbeeld eens 600 pixels. En als dat niet voldoende is, verhoog het dan totdat het formulier mooi wordt weergegeven. En om de scrollbar te verbergen kun je in de iframe code het volgende plaatsen: scrolling=”no”
De vetgedrukte elementen kun je dus naar wens wijzigen (LET OP – als je een Elementor pagina gebruikt op je eigen website, gebruik dan
<iframe id="fluentform" width="100%" loading="lazy" height="600px" style="min-height: 600px; width: 100%;" frameborder="0" src="https://demo.autorespond.nl/?ff_landing=3&embedded=1" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+40)+'px';" scrolling="no"></iframe>Let op: gaat het om een Elementor pagina? Gebruik dan onderstaande code, dat voorkomt (dat Elementor de code al uitvoert als je nog in de editor werkt):
<script>
document.addEventListener('DOMContentLoaded', function() {
// Check if we are NOT in the Elementor Editor
if ( !window.elementorFrontend ) {
if (window.top !== window.self) {
window.top.location = window.self.location.href;
}
console.log("This only runs on the live site!");
}
});
</script>Landingspagina ontwerp best practices #
Als je de landingspagina gebruikt voor een embed op een andere website, dan zijn dit de ‘best practices:
- Kies voor ‘Boxed’ layout
- Stel de achtergrond kleur hetzelfde in als de achtergrond kleur van de pagina waar je het formulier embed
- Verwijder de inner en outer schadum door op de cirkel icoontjes te klikken
Bevestigingspagina wordt getoond binnen het iframe #
We raden aan om de bevestigingspagina waar mogelijk binnen je Autorepsond website weer te geven. Maak bijvoorbeeld een landingspagina hiervoor en stel de bevestigingspagina in om die te tonen.
Maar als je het formulier via een iframe embed op een andere website en als bedanktpagina een url instelt op die externe website, dan wordt die bedanktpagina ook getoond binnen het iframe.
Om te zorgen dat die bedanktpagina geladen wordt buiten het iframe kun je op de betreffende bedanktpagina (in dit voorbeeld op de pagina ‘https://anderewbsite.nl/bedanktpagina‘) de volgende HTML code plaatsen:
<script type="text/javascript">
if (window.top !== window.self) {
window.top.location = window.self.location.href;
}
</script>Voeg deze code toe aan een HTML blok op de betreffende pagina op je eigen website.
Let op: is je bedanktpagina op je externe website gemaakt in Elementor? En wil je dus deze code toevoegen in de Elementor editor? Dan moet je een andere code gebruiken, omdat Elementor de code anders al direct uitvoert als je de pagina bewerkt in de Elementor editor. Gebruik dan deze code:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Check if we are NOT in the Elementor Editor
if ( !window.elementorFrontend ) {
if (window.top !== window.self) {
window.top.location = window.self.location.href;
}
console.log("This only runs on the live site!");
}
});
</script>Als wijzigingen niet getoond worden #
Als wijzigingen die je maakt in het formulier niet direct getoond worden op de pagina waar je het formulier op embed hebt, dan maak je zeer waarschijnlijk gebruik van een caching plugin. Zorg ervoor dat de cache van die url geleegd wordt. Als je WProcket gebruikt dan kan dat bijvoorbeeld als volgt:
Gebruik je Wix? #
Laat ons dit van te voren even weten. We moeten voor Wix enkele extra instellingen doorvoeren voordat je formulieren kunt embedden op een Wix pagina.
Om de iframe code van het formulier op een pagina in Wix te plaatsen kun je onderstaande screenshots volgen:
Na het toevoegen van het HTML blok kun je daarin de iframe code plakken en daarna kun je deze in de gewenste grootte slepen en op de juiste plek zetten:
Voorkomen dat externe Wix bedanktpagina binnen de iframe getoond wordt #
Als je in het formulier instelt dat de bevestigingspagina een pagina is op je Wix-site, dan zal die bedanktpagina binnen het iframe getoond worden. Om dat te voorkomen kun je eenmalig de volgende code in de header van je Wix website plaatsen.
De volgende code die je in de header van je pagina’s toevoegt zegt in feite ‘als er aan het einde van de url ?break_frame=true staat, breek dan uit het iframe (als je daarin getoond wordt)‘
<script type="text/javascript">
(function() {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('break_frame') === 'true') {
if (window.top !== window.self) {
window.top.location.href = window.location.href;
}
}
})();
</script>Je kunt dat in Wix doen door naar de Wix Settings te gaan en dan helemaal naar onderen te scrollen naar ‘custom code’:
Vervolgens voeg je een nieuwe custom code toe:
Je kunt dit in principe zo instellen dat het op alle pagina’s laadt en dat het op iedere pagina geladen wordt.
Vanaf nu kun je in je formulier als bedanktpagina een pagina op je Wix website gebruiken als jer aan het eind van de url ‘?break_frame=true‘ toevoegt:
