Inzicht in stijlen voor een aanmeldingsformulier

Wat je leert

Leer hoe je de aanmeldingsformulierbuilder van Klaviyo gebruikt om je formulier te ontwerpen door de ontwerpinstellingen te bewerken die beschikbaar zijn in de sectie Stijlen. Stijlinstellingen zijn van toepassing op je aanmeldingsformulier, waaronder op alle stappen van een formulier en op het succesbericht.

Houd het ontwerp van je aanmeldingsformulier eenvoudig. Het moet duidelijk en overzichtelijk zijn en 1 hoofddoel hebben. Daarnaast wil je dat het gemakkelijk te lezen en te volgen is.

Voordat je van start gaat

Voordat je je aanmeldingsformulier opmaakt, ga je naar het tabblad Aanmeldingsformulieren > Aanmeldingsformulier maken. Je kunt een vooraf gebouwde template uit de formulierenbibliotheek aanpassen, of een volledig nieuwe template voor een aanmeldingsformulier maken. Voeg alle content- en invoerblokken toe die je wilt opnemen voordat je gaat opmaken.

Als je een aanmeldingsformulier maakt dat alleen voor mobiel is bedoeld, bekijk dan basisprincipes: ontwerp van mobiele formulieren.

Typen formulieren

Bovenaan de sectie Stijlen kun je een formuliertype kiezen: pop-up, volledige pagina, fly-out-formulier of insluiten:

• Pop-ups verschijnen in het midden van het browservenster. Een popup is een echte blikvanger en kun je het best gebruiken voor belangrijke aanbiedingen of kritieke boodschappen. Pop-ups hebben van alle formuliertypen het hoogste conversiepercentage.
• Fly-outs schuiven vanuit elke door jou gekozen richting het browservenster in. Deze kunnen, net als pop-ups, worden gebruikt om iemand iets te laten doen of om iemand door te sturen, maar omdat het een minder opdringerige optie is, kun je het gebruiken om op een passieve manier informatie te verzamelen over je browsers.
• Ingesloten formulieren verschijnen waar je het meegeleverde codefragment op je site plakt. Ingesloten formulieren zijn het minst opdringerige aanmeldingsformulier en worden meestal gebruikt in de footer van een site om e-mailadressen te verzamelen.
• Formulieren op volledige pagina worden over het hele browservenster weergegeven en vragen de volledige aandacht van je bezoekers. Dit zijn formulieren met een hoog conversiepercentage omdat ze niet gemakkelijk over het hoofd kunnen worden gezien. Dit maakt ze echter ook storender omdat bezoekers interactie met het formulier moeten hebben om het te kunnen sluiten.
  • Overweeg een schermvullend formulier als landingspagina te gebruiken om je abonneelijst te laten groeien.
• Banners verschijnen als een balk bovenaan of onderaan een webpagina. Ze zijn minder opdringerig dan pop-ups of paginavullende formulieren en bieden continue zichtbaarheid en een mobielvriendelijk ontwerp dat naadloos integreert met je website. Je kunt de banner mee laten scrollen met de pagina of vast laten staan, contentblokken of invoervelden rechtstreeks aan de banner toevoegen, of de banner zo configureren dat wanneer iemand erop klikt, er een ander formulier uit je account wordt geopend.
  • Om een ander formulier te activeren dat wordt weergegeven wanneer een shopper op de banner klikt, klik je op de knop in het voorbeeld en stel je de Actie in op Een ander formulier openen. Kies vervolgens het live formulier dat je wilt weergeven. Let op: dit is niet mogelijk voor ingesloten formulieren.

Achtergrondafbeeldingen en zijafbeeldingen

Als je aangepaste afbeeldingen aan je aanmeldingsformulier wilt toevoegen, gebruik dan een zijafbeelding of achtergrondafbeelding. Afbeeldingen aan de zijkant verschijnen links of rechts van je forminhoud, terwijl achtergrondafbeeldingen achter je formuliervelden worden weergegeven.

Als je een afbeelding in een formulier gebruikt, zijn er een paar dingen om in gedachten te houden:

• Er zijn veel soorten afbeeldingsindelingen om uit te kiezen. JPEG's brengen kwaliteit en bestandsgrootte goed in balans voor kleurrijke afbeeldingen, terwijl PNG's transparante afbeeldingen of logo's scherp kunnen houden.
  • Houd een bestandsgrootte van 50-100 KB aan voor zijafbeeldingen en minder dan 200 KB voor achtergrondafbeeldingen om afbeeldingen van hoge kwaliteit te garanderen zonder de laadtijden van je site te vertragen.
• Zoals bij alle afbeeldingen die je op internet bekijkt, zorgen grotere bestandsgroottes voor langzamere laadtijden.
  • Let op: een afbeelding op volledige breedte met 72dpi is vaak groter dan 1MB, en het verkleinen van de afbeelding kan de kwaliteit verlagen. Houd rekening met de afweging tussen beeldkwaliteit en laadtijd bij het kiezen van afbeeldingen.
• Zorg dat je een afbeelding van redelijk hoge kwaliteit gebruikt voor de beste resultaten.
  
  • Op het web is het gebruik van een resolutie van 72 dpi best practice. Om een balans te vinden tussen beeldkwaliteit en laadsnelheid, kun je je afbeeldingen het beste tussen 600 en 1000 px breed houden, en voor afbeeldingen over de volledige breedte minder dan 2000 px hoog. Afbeeldingen die niet de volledige breedte van de e-mail hebben, kunnen kleiner zijn dan 600 px.
    
    • Let op: als je een aanmeldingsformulier voor een volledige pagina gebruikt, heb je een grotere afbeelding met hoge resolutie nodig (bijv. een minimale breedte van 1980px) zodat deze past bij het grotere formulier. Houd er wel rekening mee dat dit nog steeds invloed kan hebben op de laadtijd.
• Voeg alternatieve tekst toe aan je afbeelding om de toegankelijkheid te verbeteren voor alle gebruikers die met je formulieren werken.

Omdat aanmeldingsformulieren in browsers worden weergegeven (in tegenstelling tot e-mails, die in ESP's worden weergegeven), zijn er minder aanbevelingen voor het opmaken en aanpassen ervan. Browsers kunnen afbeeldingen van alle typen en formaten weergeven, dus houd je in het algemeen aan afbeeldingen met een hoge resolutie, beheersbare bestandsgroottes en test je de weergave op elk type apparaat.

Voeg een zijafbeelding toe

Om een zijafbeelding toe te voegen:

1. Ga naar de sectie Stijlen en scroll naar de instellingen voor Afbeelding aan de zijkant.
2. Selecteer Afbeelding links of Afbeelding rechts, afhankelijk van waar je wilt dat de afbeelding verschijnt.
   

3. Selecteer een afbeelding. Standaard zijn formulieren met afbeeldingen aan de zijkant ingesteld op 780px breed en gemiddelde grootte; maar je kunt dit aanpassen in de sectie Side Image op het tabblad Styles, afhankelijk van de formuliergrootte of als je wilt dat de afbeelding kleiner of groter wordt weergegeven.

Houd er rekening mee dat zijafbeeldingen op stapniveau worden ingesteld, zodat je voor elke stap van je formulier aparte afbeeldingen kunt instellen. Ga voor meer informatie over weergaveopties voor zijafbeeldingen naar ons artikel hoe je zijafbeeldingen toevoegt aan aanmeldingsformulieren.

Een achtergrondafbeelding toevoegen

Om een achtergrondafbeelding toe te voegen:

1. Schakel de instelling Achtergrondafbeelding in onder Formulierachtergrond.
2. Upload je afbeelding met de knop Bladeren.
3. Pas de weergave-instellingen aan naar wens.
   

Als je een zij- of achtergrondafbeelding aan je formulier toevoegt, kun je een preview bekijken van alle formulierstappen, inclusief het succesbericht, door elke stap te selecteren in de bovenste menubalk. Standaard past de hoogte van je formulier zich aan op basis van de content en formuliervelden in elke stap, dus sommige stappen kunnen hoger of lager zijn dan andere. Wanneer je formulier een afbeelding bevat, kan sommige afbeeldingscontent worden afgesneden bij stappen met een kleiner formaat. Om dit te voorkomen, stel je een minimale hoogte in onder Form Type in de sectie Styles.

Kleur- en afstandsopties

Gebruik de instellingen voor Form Styles en Input Field Styles om kleuren, randkleuren, opvulling en marges in te stellen. Deze instellingen zijn van toepassing op alle stappen van je formulier, tenzij je conflicterende instellingen (bijv. voor tekst of kleuren) toepast in de stijlinstellingen van een specifiek contentblok.

Lettertypen en tekststijlen

Bewerk de tekst (bijv. lettertype, grootte, kleur, enz.) voor je contentblokken (bijv. een veld voor e-mailadres of telefoonnummer) onder Tekststijlen voor invoervelden.

Bewerk tekst voor een specifiek contentblok door in het formuliervoorbeeld op het blok te klikken en het menu met Tekst -opties te gebruiken dat verschijnt. De form editor van Klaviyo gebruikt de UTF-8-coderingsnorm, wat betekent dat onder andere Latijnse tekens, emoji's en dubbele byte-tekens worden ondersteund.

Je aanmeldingsformulier kan de webveilige lettertypen gebruiken die standaard in de Klaviyo-editors beschikbaar zijn, een van onze door Klaviyo gehoste aangepaste lettertypen, of je kunt je eigen aangepaste lettertypen toevoegen. Leer hoe je aangepaste lettertypen gebruikt in je aanmeldingsformulieren.

Pictogrammen sluiten

Je kunt de grootte, kleur en stijl van het sluitpictogram van je formulier aanpassen (de X in de rechterbovenhoek). Klik op het X-pictogram in de formuliereneditor en pas vervolgens de instellingen aan in de editor aan de linkerkant. Meer informatie over het stylen van het sluitpictogram van een formulier.

Als je hebt gekozen voor een formulier op een volledige pagina, kunnen je shoppers het formulier alleen sluiten door op het sluitpictogram te klikken. Dit is handig om hun aandacht te trekken; zorg er wel voor dat het sluitpictogram duidelijk en zichtbaar is, zodat shoppers niet gefrustreerd raken door de onderbreking van je formulier op een volledige pagina.

Aangepaste HTML en CSS

De editor voor aanmeldingsformulieren van Klaviyo ondersteunt momenteel geen aangepaste HTML- of CSS-content. Ga voor tips en inspiratie om je formulier aan te passen met de editor van Klaviyo naar het Community-forum.

Resultaat

Je hebt nu geleerd hoe je verschillende stijlinstellingen in de formuliereneditor aanpast om je aanmeldingsformulier te ontwerpen.

Volgende stappen

Zodra je je aanmeldingsformulier hebt vormgegeven, leer je hoe je het gedrag van je formulier instelt, waaronder welke bezoekers het formulier te zien moeten krijgen en wanneer het moet verschijnen. Ga naar ons artikel hoe je instellingen voor doelgroepbepaling en gedrag van formulieren kiest.

Zodra je je aanmeldingsformulier hebt gepubliceerd, pas je je opt-in-bevestigingsmail aan, als dubbele toestemming is ingeschakeld voor je lijst. Maak daarna een welkomstserie om de aanbieding van je formulier te leveren (bijv. korting of gratis verzending op hun eerste bestelling) en nieuwe abonnees kennis te laten maken met je merk.