Toggle sidebar

Automatische hoogte

Een iframe heeft normaal een vaste hoogte: te kort en je krijgt een interne scrollbar, te lang en je hebt witruimte onder de vragenlijst. De embed-snippet van Mach3Forms gebruikt postMessage om de hoogte automatisch mee te laten schalen met de inhoud - geen scrollbar, geen overschot.

Hoe werkt het?

De vragenlijst (binnen de iframe) meet zijn eigen hoogte en stuurt deze als bericht naar de pagina waar de iframe op staat. Het script in de embed-snippet luistert naar dat bericht en past de height van de iframe aan.

Schematisch:

[Vragenlijst in iframe]            [Pagina van jouw website]
        |                                    |
        | -- postMessage({event: 'height',   |
        |                  height: 920,      |
        |                  token: 'xyz'}) -->|
        |                                    | --> iframe.height = 920 + 'px'

De vragenlijst stuurt dit bericht steeds opnieuw als zijn hoogte verandert (bijvoorbeeld als de deelnemer naar een volgende groep gaat met meer of minder vragen).

Het script ontleed

Uit de embed-snippet:

window.addEventListener('message', function (event) {
    if (event.origin !== 'https://app.mach3forms.com' || event.data.token == 'XXXXXX')
        return;

    if (event.data.event === 'height') {
        var iframe = document.getElementById('iframe-XXXXXX');
        iframe.height = event.data.height + 'px';
    }
});

Wat het script doet:

  1. Luistert naar alle message-events op de pagina.
  2. Negeert berichten die niet van Mach3Forms (event.origin) komen - een belangrijke veiligheidscheck.
  3. Negeert berichten waarvan de token niet matcht - voorkomt dat een bericht van een andere iframe per ongeluk effect heeft.
  4. Bij een height-bericht: past de hoogte van de juiste iframe aan.
Niet aanpassen tenzij je weet wat je doet

De origin- en token-checks zijn er voor veiligheid. Zonder die checks zou een kwaadaardige andere iframe op je pagina theoretisch jouw iframe-hoogte kunnen manipuleren. Pas het script niet aan tenzij je goed begrijpt wat je doet.

Wanneer werkt het niet?

Situatie Waarom
Je hebt het <script>-blok weggelaten Geen luisteraar = geen height-update; iframe blijft op de standaard hoogte
De iframe staat in een display: none container De vragenlijst meet zijn eigen hoogte als 0; toon de container voor of tijdens het laden
Je gebruikt een Content Security Policy (CSP) zonder frame-src Browser blokkeert de iframe; voeg het Mach3Forms-domein toe aan je CSP-frame-src
Browser blokkeert third-party cookies/scripts strict postMessage zelf werkt, maar de vragenlijst kan andere problemen geven

Voor gevorderden: meerdere iframes op één pagina

Het script werkt per iframe op basis van token. Heb je twee verschillende vragenlijsten op één pagina? Dan plaats je twee complete snippets - beide hebben hun eigen unieke token, en de scripts bijten elkaar niet.

<!-- Vragenlijst A -->
<iframe id="iframe-AAAA" src="..." ...></iframe>
<script>...</script>

<!-- Vragenlijst B -->
<iframe id="iframe-BBBB" src="..." ...></iframe>
<script>...</script>

Veelgestelde vragen

Dit is de fallback-hoogte voor het geval de auto-resize niet werkt. Loop na: heb je het <script>-blok ook geplaatst, draait je site op HTTPS, en blokkeert geen CSP de iframe?

Vervang height="600px" door je gewenste hoogte en verwijder het <script>-blok. Dan krijgt de iframe een interne scrollbar als de inhoud groter is.

Dat is normaal - bij elke wisseling stuurt de vragenlijst een nieuwe height. De iframe past zich aan, wat soms een korte sprong oplevert. Voor een vloeiendere ervaring kun je in je eigen CSS een transition: height 0.2s ease; op de iframe zetten.

Dat is het normale geval - embed werkt cross-domain. De event.origin-check in het script verwijst naar het Mach3Forms-domein van de iframe, niet naar je eigen site.
Code plaatsen