Inschrijfformulieren maken en insluiten

Published: 16 juli 2026 · Last updated: 21 juli 2026 · By Marcus Biel

Een ingesloten formulier wordt rechtstreeks in een bestaande pagina op je website geplaatst. Het blijft onderdeel van de omliggende content in plaats van erboven te verschijnen.

Ingesloten formulieren werken goed in blogartikelen, landingspagina's op je eigen website, nieuwsbriefsecties, zijbalken en voetteksten. De locatie waar je de formuliercode toevoegt, bepaalt waar het formulier verschijnt.

Deze handleiding behandelt de stappen die specifiek zijn voor ingesloten formulieren. De algemene functies voor visuele bewerking worden uitgelegd in de hoofdgids Inschrijfformulierbouwer.

Een ingesloten formulier maken

Open “Signup Forms”, klik op “Create Form” en selecteer “Embedded Form”. Voer een duidelijke interne naam in en ga verder naar de bouwer.

Je kunt ook een bestaand formulier bewerken door op de naam ervan te klikken in het overzicht van inschrijfformulieren.

De interne naam wordt niet automatisch aan bezoekers getoond. Geef het formulier een naam die verwijst naar de locatie of het doel ervan, bijvoorbeeld “Nieuwsbrief homepage”, “Blogvoettekst” of “Productupdates”.

Een startontwerp kiezen

Ingesloten formulieren bieden een leeg formulier, een standaardformulier en vier ontworpen sjablonen:

• Kalme notitie
• Kortingsstrook
• Donkere redactionele stijl
• Minimalistisch blauw

Kies het ontwerp dat het beste past bij de ruimte en toon van de website waarop het formulier verschijnt. Elk startontwerp kan na selectie volledig worden aangepast.

Het ingesloten formulier ontwerpen

Gebruik “Layout” en “Content” om het formulier in te delen. Een ingesloten formulier kan het inschrijfformulier combineren met ondersteunende tekst, afbeeldingen, lijsten, knoppen, socialmedia-links, een abonneedeller, tussenruimtes of scheidingslijnen.

Voor een smalle zijbalk of voettekst is een ontwerp met één kolom meestal het makkelijkst leesbaar. In een breder paginagedeelte kan een indeling met twee kolommen een korte uitleg of afbeelding naast de velden plaatsen.

Selecteer het blok van het inschrijfformulier om abonneevelden, verplichte velden, labels, verborgen tags, een voortgangsindicator en een optionele abonneedeller te kiezen. Vervolgens kun je de formuliercontainer, velden en verzendknop afzonderlijk opmaken.

Open “Page settings” om de achtergrond en algemene ontwerpstandaarden voor het canvas van het ingesloten formulier te wijzigen. Houd rekening met de omliggende website. Een transparante of eenvoudige achtergrond sluit vaak natuurlijker aan, terwijl een contrasterende achtergrond het inschrijvingsaanbod meer laat opvallen.

De volledige instructies voor indelingen, content, lagen, velden, tags, typografie en vormgeving vind je in De inschrijfformulierbouwer gebruiken.

De inschrijvingsflow koppelen

Gebruik de besturing voor de inschrijvingsflow in de koptekst van de bouwer om te controleren wat er na verzending gebeurt, welke Double Opt-in-e-mail wordt verzonden en wat de bezoeker na bevestiging ziet.

Je kunt een bestaande flow selecteren, de toegewezen flow bewerken of een nieuwe flow maken. Als de geselecteerde flow met andere formulieren wordt gedeeld, houd er dan rekening mee dat bewerkingen ook gevolgen kunnen hebben voor die formulieren.

Voorbeeld bekijken en opslaan

Klik op “Preview” om het volledige formulier te bekijken voordat je het op je website plaatst. Controleer de volgorde van de velden, labels, ruimte voor foutmeldingen, knoptekst en de hoeveelheid ondersteunende content.

Klik op “Save changes” om de huidige versie op te slaan. Ga terug naar het overzicht van inschrijfformulieren wanneer je klaar bent om het formulier in te sluiten.

Het formulier activeren

Het ingesloten formulier moet actief zijn voordat de openbare code kan worden gebruikt.

Als het formulier inactief is, open je het menu met acties met drie puntjes in het overzicht van inschrijfformulieren en kies je “Activate”. Bij een actief formulier wordt de actie “Show Code Snippet” weergegeven.

Deactiveer het formulier wanneer het niet langer beschikbaar moet zijn op je website. Deactivering haalt het formulier offline zonder het ontwerp of eerdere rapportgegevens te verwijderen.

De JavaScript-code kopiëren

Klik op “Show Code Snippet” en open het tabblad “JavaScript”. Maildroppa biedt een kort script met de unieke formulier-ID.

De code heeft deze structuur:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Kopieer de volledige code zonder het scriptadres of de formulier-ID te wijzigen.

De JavaScript-optie laadt het huidige opgeslagen formulier via de Maildroppa-formulierruntime. Wanneer je hetzelfde formulier later in Maildroppa bewerkt en opslaat, blijft het bestaande fragment naar die formulier-ID verwijzen. Je hoeft geen nieuw formulier te maken alleen om de tekst of het ontwerp te wijzigen.

Het formulier aan je website toevoegen

Plak het script op de plek op de pagina waar het ingesloten formulier moet verschijnen.

De exacte stappen zijn afhankelijk van je websitesysteem. Gebruik in een paginabouwer of contentmanagementsysteem een blok dat aangepaste HTML- of scriptcode accepteert. Voeg het script op een aangepaste website toe aan de relevante template- of paginamarkup.

Sommige website-editors verwijderen scripttags om veiligheidsredenen. Als het formulier na het publiceren van de pagina niet verschijnt, controleer dan eerst of de editor het volledige Maildroppa-script heeft behouden. Mogelijk moet je het speciale gedeelte voor aangepaste code van het systeem gebruiken of de persoon raadplegen die de website beheert.

Plak hetzelfde fragment van een ingesloten formulier niet meerdere keren op één pagina, tenzij je bewust hetzelfde formulier op verschillende locaties wilt tonen en die configuratie hebt getest.

Het HTML-tabblad gebruiken

Het tabblad “HTML” bevat de gegenereerde formuliermarkup. Deze optie is bedoeld voor aangepaste implementaties waarbij je rechtstreeks met de weergegeven HTML wilt werken.

Kopieer de volledige markup als je deze methode kiest. Omdat een aangepaste HTML-integratie kan worden beïnvloed door de stijlen en implementatie van je website, moet je de velden, validatie, verzending en bevestigingsflow zorgvuldig testen.

Voor het normale, door Maildroppa beheerde formulier is het JavaScript-fragment de kortere integratie. Het laadt de huidige openbare formulierconfiguratie aan de hand van de ID.

Het ingesloten formulier testen

Publiceer of bekijk een voorbeeld van de webpagina met de code. Test het formulier vervolgens zoals een bezoeker dat zou doen:

1. Controleer of het formulier op de juiste positie verschijnt.
2. Bekijk de pagina op een breed en een smal scherm.
3. Vul elk verplicht veld in.
4. Verzend het formulier en bekijk de reactie.
5. Open de Double Opt-in-e-mail.
6. Bevestig het adres en bekijk de uiteindelijke reactie.
7. Controleer of de abonnee en eventuele verborgen tags correct in Maildroppa verschijnen.

Als het formulier breder is dan de container van je website, pas je de formulierbreedte, kolomindeling, binnenruimte of instellingen voor stapelen op mobiel aan in de bouwer. Los problemen met de indeling niet op door de gegenereerde Maildroppa-code te wijzigen.

Een ingesloten formulier bijwerken

Open hetzelfde formulier in Maildroppa, breng de wijzigingen aan, bekijk een voorbeeld en klik op “Save changes”. Het JavaScript-fragment op je website blijft dezelfde formulier-ID gebruiken en laadt de opgeslagen openbare configuratie.

Als het formulier tijdelijk moet worden verwijderd, deactiveer je het via het overzicht van inschrijfformulieren. Als het niet langer nodig is, verwijder je het fragment ook van de website, zodat de pagina geen ongebruikte code bevat.