Chapters
- Formulierbouwer voor inschrijvingen: formulieren ontwerpen
- Landingspagina’s bouwen en publiceren
- Inschrijfformulieren maken en insluiten
- Pop-upformulieren maken en weergeven
- Slide-informulieren maken en positioneren
Contents
the email tool that makes email marketing simple
- Guides and Tutorials
- Formulierbouwer voor inschrijvingen: formulieren ontwerpen
Formulierbouwer voor inschrijvingen: formulieren ontwerpen
Published: · Last updated: · By Marcus Biel
In brief
Leer hoe je met de visuele aanmeldformulierbouwer van Maildroppa sjablonen kiest, inhoud ordent, velden vormgeeft, tags toewijst en flows koppelt.
De Formulierbouwer voor inschrijvingen is de visuele editor voor alle inschrijfformulieren en landingspagina's van Maildroppa.
Je kunt deze gebruiken om lay-outs te ordenen, tekst en afbeeldingen toe te voegen, abonneevelden te configureren, kleuren en lettertypen te wijzigen, tags toe te wijzen en te bepalen wat er gebeurt nadat iemand het formulier heeft verzonden. Het canvas toont het resultaat terwijl je werkt, zodat je geen code hoeft te schrijven om een complete inschrijfervaring te ontwerpen.
Maildroppa gebruikt dezelfde builder voor vier formuliertypen:
- Landingspagina's zijn complete zelfstandige pagina's die je publiceert en deelt met een link.
- Ingesloten formulieren worden rechtstreeks in een pagina op je website geplaatst.
- Pop-ups verschijnen boven je website en kunnen ook vanuit een pagina-element worden geopend.
- Slide-ins verschijnen aan een geselecteerde rand of positie van het browservenster.
Deze handleiding legt alle functies uit die deze formuliertypen gemeen hebben. De gekoppelde handleidingen leggen alleen de instellingen en stappen uit die uniek zijn voor elk type.
De Formulierbouwer voor inschrijvingen openen
Open “Signup Forms” in Maildroppa. Je kunt vervolgens op “Create Form” klikken om een nieuwe landingspagina, ingesloten formulier, pop-up of slide-in te maken.
Als je verder wilt werken aan een bestaand formulier, klik je op de naam ervan of kies je “Edit Form” in het menu met acties via de drie puntjes in het overzicht van inschrijfformulieren.
Geef het formulier een duidelijke interne naam. Namen zoals “Nieuwsbrief homepage”, “Webinar-pop-up” of “Zomerleadmagnet” zijn later gemakkelijker te herkennen dan algemene namen zoals “Formulier 1”. De formuliernaam helpt je het formulier in Maildroppa te beheren en wordt niet automatisch aan bezoekers getoond.
De builder begrijpen
De builder is verdeeld in vier hoofdgedeelten.
De bovenste balk bevat de formuliernaam en de belangrijkste acties. Hier kun je terugkeren naar het overzicht, je werk bekijken en het opslaan. Bij landingspagina's worden in deze balk ook de opties voor concept en publicatie weergegeven.
De linkerzijbalk bevat “Layout”, “Content” en “Layers”. Gebruik deze om de structuur te maken, nieuwe elementen toe te voegen en alles wat al op het canvas staat te beheren.
Het canvas is het centrale werkgebied. Het toont de huidige pagina of het huidige formulier. Klik op een element om het te selecteren. Je kunt elementen ook naar een andere locatie slepen of nieuwe elementen toevoegen vanuit de linkerzijbalk.
De rechterzijbalk bevat “Settings” en “Page settings”. Met “Settings” wijzig je het geselecteerde element. Met “Page settings” wijzig je de algemene achtergrond en standaardinstellingen voor het ontwerp.
Op kleinere schermen openen de zijbalken als panelen met de knoppen “Content” en “Settings”. De beschikbare functies blijven hetzelfde.
Beginnen met een template
Wanneer je een formulier maakt, biedt de builder startontwerpen voor het geselecteerde formuliertype. Je kunt beginnen met een leeg ontwerp, het standaardformulier gebruiken of een kant-en-klaar template kiezen.
Templates bieden een startlay-out, kleuren, typografie en voorbeeldinhoud. Ze beperken niet wat je later kunt wijzigen. Nadat je een template hebt geselecteerd, kan elk element nog steeds worden bewerkt, verplaatst, gedupliceerd, aangepast of verwijderd.
Elk formuliertype heeft templates die bij het doel passen. Landingspagina's bevatten bijvoorbeeld complete ontwerpen voor Nieuwsbrief-, Leadmagnet-, Webinar- en Wachtlijstpagina's. Ingesloten formulieren, pop-ups en slide-ins hebben hun eigen compacte startontwerpen.
Als je niet zeker weet welk template je moet kiezen, selecteer dan het template waarvan de structuur het dichtst bij je doel ligt. Tekst, kleuren en afbeeldingen wijzigen gaat meestal sneller dan dezelfde structuur vanaf een leeg canvas opbouwen.
De lay-out maken
Open “Layout” in de linkerzijbalk om een nieuwe rij cellen toe te voegen. De beschikbare lay-outs zijn onder andere:
- Eén cel
- Twee, drie of vier gelijke cellen
- Twee cellen met een verhouding van 2:1
- Twee cellen met een verhouding van 1:2
Klik op een lay-out om deze op de huidige invoegpositie toe te voegen of sleep deze naar het canvas. Je kunt vervolgens inhoud in elke cel plaatsen.
Selecteer een kader of kolom om de grootte, ruimte, uitlijning, achtergrond, rand en binnenmarges aan te passen in de rechterzijbalk. Bij lay-outs met meerdere kolommen kun je ook de relatieve kolombreedtes wijzigen.
Gebruik lay-outs om een duidelijke leesvolgorde te creëren. Eén kolom werkt goed voor compacte inschrijfformulieren. Een lay-out met twee kolommen is handig wanneer een afbeelding, lijst met voordelen of evenementinformatie naast het inschrijfformulier moet verschijnen.
Inhoud toevoegen
Open “Content” in de linkerzijbalk om afzonderlijke inhoudsblokken toe te voegen. Je kunt op een blok klikken om het in te voegen of het naar de gewenste positie op het canvas slepen.
De builder biedt de volgende inhoudsblokken:
Signup form — Bevat de abonneevelden en de verzendknop. Een ontwerp heeft één inschrijfformulierblok nodig voordat het als werkend formulier kan worden opgeslagen. Zodra het blok aanwezig is, wordt het niet meer als extra inhoudsblok aangeboden.
Text — Voegt koppen, alinea's of andere opgemaakte tekst toe.
Image — Voegt een afbeelding toe vanaf een URL, via een upload of uit de mediabibliotheek van Maildroppa. Je kunt alternatieve tekst opgeven, een link toevoegen en afmetingen, beeldverhouding, uitsnede, brandpunt, rotatie en spiegeling instellen.
Video — Voegt een YouTube- of Vimeo-video, een embed-URL of een rechtstreeks videobestand toe. Je kunt ook een voorbeeldafbeelding en het uiterlijk van de afspeelknop instellen.
List — Voegt een lijst met opsommingstekens of nummers toe. Bewerk de items en stel de kleur van de markeringen, ruimte, typografie en uitlijning in.
Button — Voegt een linkknop toe met instelbare tekst, URL, grootte, breedte, kleuren, rand, typografie en uitlijning.
Social links — Voegt gekoppelde pictogrammen toe voor diensten zoals Facebook, Instagram, LinkedIn, TikTok, YouTube of je website.
Subscriber counter — Toont het huidige aantal bevestigde abonnees. Je kunt een offset toevoegen, het label wijzigen en het nummer en de tekst opmaken.
Spacer — Voegt instelbare lege ruimte toe. De ruimte voor desktop en mobiel kan afzonderlijk worden ingesteld.
Divider — Voegt een horizontale lijn toe met instelbare kleur, dikte, breedte, stijl, uitlijning en ruimte.
Landingspagina's bieden ook complete herbruikbare secties. Deze worden uitgelegd in de handleiding voor landingspagina's.
Elementen selecteren en ordenen
Klik op een element op het canvas om het te selecteren. De instellingen verschijnen in de rechterzijbalk.
Met de bedieningselementen op of bij het geselecteerde element kun je het verplaatsen, dupliceren of verwijderen. Je kunt een element ook naar een andere cel of positie slepen. Een plaatsingsindicator toont waar het wordt ingevoegd.
Open “Layers” wanneer de pagina veel geneste kaders, kolommen en inhoudsblokken bevat. Het deelvenster Layers toont de volledige structuur in een lijst. Van daaruit kun je:
- Een element selecteren
- Het een andere naam geven zodat het gemakkelijker te herkennen is
- Het omhoog of omlaag verplaatsen
- Het naar een andere positie slepen
- Het vergrendelen of ontgrendelen
- Het dupliceren
- Het verwijderen
Vergrendelen is handig wanneer een voltooide achtergrond, afbeelding of sectie niet per ongeluk mag worden verplaatst. Ontgrendel de laag wanneer je deze opnieuw wilt bewerken of verplaatsen.
Gebruik “Undo” en “Redo” in de werkbalk van de builder om recente ontwerpwijzigingen stap voor stap ongedaan te maken of opnieuw uit te voeren.
Tekst bewerken
Klik in een tekstelement om de inhoud rechtstreeks op het canvas te bewerken. De tekstwerkbalk biedt alinea- en kopstijlen samen met algemene opmaakopties.
Afhankelijk van de geselecteerde tekst kun je vet, cursief, onderstrepen, doorhalen, subscript, superscript, uitlijning, lijsten met opsommingstekens of nummers, links en emoji's gebruiken. Met de instellingen voor geselecteerde tekst kun je typografie en kleuren aanpassen zonder elk ander tekstelement te wijzigen.
Gebruik de algemene typografie-instellingen onder “Page settings” wanneer alle koppen, hoofdtekst, links of knoppen dezelfde consistente stijl moeten hebben. Gebruik de instellingen voor het geselecteerde element wanneer slechts één blok er anders uit moet zien.
Het inschrijfformulier configureren
Selecteer het inschrijfformulierblok op het canvas om de instellingen te openen. De beschikbare secties omvatten de voortgangsbalk, abonnee-teller, velden, verborgen tags, formuliercontainer, invoervelden en verzendknop.
Abonneevelden
Het e-mailadres is het centrale veld van een inschrijfformulier. Je kunt ook abonneevelden toevoegen die in je Maildroppa-account bestaan.
Voor elk veld kun je het label en de tijdelijke aanduiding wijzigen, bepalen of het verplicht is en kiezen of het veldlabel wordt weergegeven. Velden kunnen opnieuw worden gerangschikt door ze te slepen of de verplaatsingsknoppen te gebruiken.
Vraag alleen om informatie die je echt nodig hebt. Kortere formulieren zijn sneller in te vullen, terwijl extra velden nuttig zijn wanneer de informatie wordt gebruikt voor segmentatie of personalisatie.
Verborgen tags
Verborgen tags worden niet aan bezoekers getoond. Wanneer iemand zich via het formulier inschrijft, wijst Maildroppa de geselecteerde tags automatisch aan die abonnee toe.
Dit is handig om de bron of interesse achter een inschrijving te identificeren. Een formulier voor een webinar kan bijvoorbeeld een tag “Webinar” toepassen, terwijl een leadmagnetformulier een tag voor het gedownloade onderwerp kan toepassen.
Voortgangsbalk
De voortgangsbalk kan worden uitgeschakeld of worden weergegeven als percentage of indicator met twee stappen.
Voor een percentage-indicator kun je de tekst, kleuren, tekengrootte, dikte en uitlijning wijzigen. Voor een indicator met twee stappen kun je de labels voor beide stappen bewerken en actieve en inactieve kleuren kiezen.
Een voortgangsindicator kan helpen uitleggen dat het verzenden van het formulier de eerste stap is en het bevestigen van de Double Opt-in-e-mail de tweede.
Abonnee-teller in het formulier
Het inschrijfformulier kan het huidige aantal bevestigde abonnees vóór of na de verzendknop weergeven.
Je kunt een offset toevoegen, een label schrijven, de positie kiezen en de typografie en uitlijning aanpassen. De offset wordt opgeteld bij het aantal bevestigde abonnees dat door Maildroppa wordt weergegeven.
Deze formulierteller verschilt van het zelfstandige inhoudsblok “Subscriber counter”. Gebruik de formulierinstelling wanneer het aantal rechtstreeks aan het verzendgedeelte gekoppeld moet zijn. Gebruik het inhoudsblok wanneer de teller ergens anders in het ontwerp moet verschijnen.
Ontwerp van formulier, invoervelden en knop
De instellingen voor “Signup Form Block” bepalen de container rond de velden, inclusief achtergrond, rand, hoekradius en ruimte.
De invoerinstellingen bepalen de achtergronden, labels, tekst, tijdelijke aanduidingen, randen en ruimte van de velden. De verzendknop heeft afzonderlijke instellingen voor tekst, typografie, kleuren, rand, afmetingen en uitlijning.
Je kunt rechtstreeks op het canvas op de voortgangsbalk of verzendknop klikken om onmiddellijk de instellingen voor dat onderdeel te openen.
Het algemene uiterlijk wijzigen
Open “Page settings” in de rechterzijbalk om het algemene ontwerp te wijzigen. Voor ingesloten formulieren, pop-ups en slide-ins gelden deze instellingen voor het formuliercanvas en niet voor een complete gehoste pagina.
Je kunt de hoofdbackground, achtergrondafbeelding, maximale breedte en ruimte op mobiel instellen. De uiterlijkinstellingen bepalen de standaardwaarden voor:
- Lettertype en tekstkleur van de body
- Linkkleur, onderstreping en hoverkleur
- Lettertype, kleur, dikte, grootte en regelhoogte van koppen
- Knoppen
- Kaders, randen, hoekradius, tussenruimtes en binnenmarges
- Binnenmarges van de pagina op mobiel en het punt waarop kolommen onder elkaar worden geplaatst
Deze standaardwaarden houden het ontwerp consistent. Afzonderlijke blokken kunnen hiervan indien nodig afwijken.
Een inschrijfstroom koppelen
Elk formulier is gekoppeld aan een Signup Flow. De inschrijfstroom bepaalt het traject van de abonnee nadat het formulier is verzonden:
- Wat de bezoeker direct na het verzenden van het formulier ziet
- Welke Double Opt-in-e-mail wordt verzonden
- Wat er gebeurt nadat de abonnee het e-mailadres heeft bevestigd
Open de optie voor de inschrijfstroom in de koptekst van de builder om de momenteel toegewezen flow te bekijken. Je kunt een andere bestaande flow selecteren, de geselecteerde flow bewerken of een nieuwe maken.
Een inschrijfstroom kan door meerdere formulieren worden gebruikt. Als je een gedeelde flow bewerkt, heeft de wijziging gevolgen voor elk formulier dat deze gebruikt. Daarom laat Maildroppa je kiezen of je de gedeelde flow wilt bewerken of een afzonderlijke kopie voor het huidige formulier wilt maken.
Voorbeeld bekijken en opslaan
Klik op “Preview” om het volledige ontwerp en de inschrijfervaring te controleren voordat je deze openbaar maakt. Een voorbeeld is handig om lange tekst, afbeeldingsverhoudingen, veldvolgorde, knoplabels en de algemene balans van het formulier te controleren.
Klik voor ingesloten formulieren, pop-ups en slide-ins op “Save changes” wanneer je klaar bent om de huidige versie op te slaan.
Landingspagina's gebruiken opties voor concept en publicatie in de bovenste balk. Ze kunnen worden opgeslagen zonder te worden gepubliceerd, en wijzigingen aan een al gepubliceerde pagina blijven ongepubliceerd totdat je ze publiceert. De volledige workflow wordt uitgelegd in Een landingspagina bouwen en publiceren.
Ga na het opslaan terug naar het overzicht van inschrijfformulieren om een websiteformulier te activeren en in te sluiten of een gepubliceerde landingspagina te beheren.
Ga verder met jouw formuliertype
Het algemene ontwerpwerk is nu voltooid. Ga verder met de handleiding voor het formulier dat je maakt:
Ready to Send Better Emails?
Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.
No credit card required. No time limit.