Stijlen voor een aanmeldingsformulier begrijpen

Wat je leert

Leer hoe je Klaviyo's aanmeldingsformulier builder gebruikt om je formulier te ontwerpen door de ontwerpinstellingen te bewerken die beschikbaar zijn in het gedeelte Stijlen. Stijlinstellingen zijn van toepassing op je hele aanmeldingsformulier, ook in alle stappen van een formulier en in het succesbericht. 

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

Voordat je van start gaat

Voordat je je aanmeldingsformulier gaat stylen, navigeer je naar het tabblad aanmeldingsformulier > Aanmeldingsformulier maken .Je kunt een kant-en-klare template uit de formulierbibliotheek aanpassen of een gloednieuw aanmeldingsformulier template maken. Voeg alle inhoud en invoerblokken toe die je wilt opnemen voordat je gaat stylen. 

Als je een aanmeldingsformulier bouwt dat alleen mobiel is, zie dan Basisprincipes: ontwerp van mobiele formulieren.

Soorten vormen

Bovenaan in het gedeelte Stijlen kun je een formuliertype kiezen: popup, volledige pagina, fly-out of insluiten:

• Pop-ups verschijnen in het midden van het browservenster. Een popup trekt de aandacht en kan het beste worden gebruikt voor belangrijke aanbiedingen of kritieke berichten. Pop-ups hebben het hoogste conversiepercentage van alle soorten formulieren. 
• Flyouts schuiven in het browservenster vanuit elke richting die je kiest. Deze kunnen, net als pop-ups, worden gebruikt om iemand iets te laten bereiken of om te leiden, maar omdat het een minder opdringerige optie is, kun je het gebruiken om op een passieve manier informatie over je browsers te verzamelen.
• Ingebedde formulieren verschijnen waar je het meegeleverde codefragment op je site plakt. Ingebedde formulieren zijn het minst opdringerige aanmeldingsformulier en worden meestal gebruikt in de voettekst van een site om e-mailadressen te verzamelen. 
• Formulieren met een volledige pagina worden over het hele browservenster weergegeven, zodat de aandacht van je klanten volledig wordt verzameld. Dit zijn formulieren met een hoge conversie omdat ze niet gemakkelijk over het hoofd kunnen worden gezien, maar dit maakt ze ook indringender omdat kopers interactie met het formulier moeten hebben om het te sluiten.
  • Overweeg om een formulier op een volledige pagina te gebruiken als landingspagina om je abonneelijst te laten groeien. 
• Banners verschijnen als een balk boven of onder aan een webpagina. Ze zijn minder opdringerig dan pop-ups of formulieren op volledige pagina's en bieden een continue zichtbaarheid en een mobielvriendelijk ontwerp dat soepel integreert met je website. Je kunt instellen dat de banner met de pagina mee scrolt of vast blijft staan, inhoudsblok of invoerveld direct aan de banner toevoegen of de banner zo configureren dat wanneer iemand erop klikt er een ander formulier van je account wordt geopend. 
  • Om een ander formulier te laten verschijnen als 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, waarna je het live formulier kiest dat je wilt weergeven. Merk op dat dit niet mogelijk is voor ingesloten formulieren.

Achtergrondafbeeldingen en zijafbeeldingen 

Om eigen beeldmateriaal aan je aanmeldingsformulier toe te voegen, gebruik je een zijafbeelding of achtergrondafbeelding. Zijafbeeldingen verschijnen links of rechts van de inhoud van je formulier, terwijl achtergrondafbeeldingen worden weergegeven achter je formuliervelden. 

Als je een afbeelding in een formulier gebruikt, moet je met een paar dingen rekening houden:

• Er zijn veel soorten afbeeldingsformaten om uit te kiezen. JPEG's zorgen voor een goede balans tussen kwaliteit en formaat voor kleurrijke afbeeldingen, terwijl PNG's transparante afbeeldingen of logo's scherp kunnen houden. 
  • Streef naar een bestandsgrootte van 50-100 KB 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 op het web worden bekeken, leiden grotere bestanden tot een langzamere laadtijd.
  • Merk op dat een afbeelding over de volledige breedte bij 72 dpi vaak groter is dan 1MB, en het verkleinen van de afbeelding kan de kwaliteit verminderen. Overweeg de afweging tussen afbeeldingskwaliteit en laadtijd bij het kiezen van afbeeldingen.
• Zorg ervoor dat je een afbeelding van redelijke kwaliteit gebruikt voor de beste resultaten. 
  
  • Op het web is het gebruik van een resolutie van 72 dpi de beste werkwijze. Om een balans te vinden tussen afbeeldingskwaliteit en laadsnelheid, moet je proberen je afbeeldingen tussen 600 en 1000 px breed te houden, en minder dan 2000px hoog voor afbeeldingen over de hele breedte. Afbeeldingen die minder zijn dan de volledige breedte van de e-mail kunnen kleiner zijn dan 600px.
    
    • Let op: als je een aanmeldingsformulier voor een volledige pagina gebruikt, dan heb je een grotere afbeelding met een hoge resolutie nodig (bijvoorbeeld een minimale breedte van 1980px) om in het formulier van groter formaat te passen. Houd er wel rekening mee dat dit nog steeds invloed kan hebben op de laadtijd.
• Voeg alt-tekst toe aan je afbeelding om de toegankelijkheid te bevorderen voor alle gebruikers die je formulieren gebruiken. 

Omdat aanmeldingsformulieren worden weergegeven op browsers (in tegenstelling tot e-mail, die wordt weergegeven op e-mailserviceproviders), zijn er minder aanbevelingen voor hoe je ze moet opmaken en aanpassen. Browsers kunnen afbeeldingen van alle soorten en maten weergeven, dus blijf in het algemeen bij afbeeldingen met een hoge resolutie, hanteerbare bestandsgroottes en test het uiterlijk op elk type apparaat. 

Een zijafbeelding toevoegen

Om een zijafbeelding toe te voegen:

1. Ga naar het gedeelte Stijlen en scroll naar de instellingen voor Zijdeafbeelding.
2. Selecteer Afbeelding links of afbeelding rechts, afhankelijk van waar je de afbeelding wilt hebben.
   
3. Selecteer een afbeelding. Standaard zijn formulieren met afbeeldingen aan de zijkant ingesteld op 780px breed en gemiddelde grootte; dit kan echter worden aangepast in het gedeelte Afbeelding aan de zijkant op het tabblad Stijlen, afhankelijk van de grootte van het formulier of als je de afbeelding kleiner of groter wilt laten lijken.

Merk op dat zijafbeeldingen worden ingesteld op stapniveau, dus je kunt aparte afbeeldingen instellen voor elke stap van je formulier. Ga voor meer informatie over weergaveopties voor zijafbeeldingen naar ons artikel Hoe voeg ik zijafbeeldingen toe in aanmeldingsformulier. 

Een achtergrondafbeelding toevoegen

Een achtergrondafbeelding toevoegen:

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

Als je een zij- of achtergrondafbeelding aan je formulier toevoegt, kun je een voorbeeld van alle formulierstappen bekijken, inclusief het succesbericht, door elke stap in de bovenste menubalk te selecteren. Standaard past de hoogte van je formulier zich aan op basis van de inhoud en formuliervelden op elke stap, dus sommige stappen kunnen langer of korter zijn dan andere. Als je formulier een afbeelding bevat, kan sommige afbeeldingsinhoud worden afgesneden op kleinere stappen. Om dit te voorkomen kun je een minimale hoogte instellen onder Formuliertype in het gedeelte Stijlen. 

Opties voor kleur en spatiëring

Gebruik de instellingen voor Formulierstijlen en invoerveldstijlen om kleuren, randkleuren, opvulling en marges in te stellen. Deze instellingen gelden voor alle stappen van je formulier, tenzij je conflicterende instellingen (bijvoorbeeld voor tekst of kleuren) toepast binnen de stijlinstellingen van een specifiek inhoudsblok.

Lettertypen en tekststijlen

Bewerk de tekst (bijv. lettertype, grootte, kleur, enz.) voor je inhoudsblok (bijv. een e-mail- of telefoonnummerveld) onder invoerveld Tekststijlen.

Bewerk de tekst voor een specifiek inhoudsblok door op het blok in het voorbeeld van het formulier te klikken en het menu Tekstopties te gebruiken dat verschijnt. KlaviyoDe formuliereditor gebruikt de UTF-8 coderingsstandaard, wat betekent dat het Latijnse tekens, emoji's, dubbele byte-tekens en meer ondersteunt.

Uw aanmeldingsformulier kan gebruik maken van de webveilige lettertypes van de Klaviyo editors, een van onze Klaviyo-gehoste aangepaste lettertypes, of u kunt uw eigen aangepaste lettertypes toevoegen. Leer hoe je aangepaste lettertypen kunt gebruiken in je aanmeldingsformulier. 

Pictogrammen sluiten

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

Als je hebt gekozen voor een formulier dat de hele pagina beslaat, is de enige manier waarop je klanten het formulier kunnen sluiten het klikken op het sluitpictogram. Dit is handig om hun aandacht te verzamelen; maar zorg ervoor dat het sluitpictogram duidelijk en zichtbaar is, zodat kopers niet gefrustreerd raken door de onderbreking van je formulier op de volledige pagina.

Aangepaste HTML en CSS

KlaviyoDe aanmeldingsformulier-editor van support heeft momenteel geen aangepaste HTML- of CSS-inhoud. Voor tips en inspiratie over het aanpassen van je formulier met Klaviyo's editor ga je naar het community forum. 

Resultaat

Je hebt nu geleerd hoe je verschillende stijlinstellingen in de formuliereditor kunt aanpassen om je aanmeldingsformulier te ontwerpen.

Volgende stappen

Nadat je je aanmeldingsformulier hebt vormgegeven, leer je hoe je het gedrag van je formulier kunt instellen, inclusief welke bezoekers het formulier moeten zien en wanneer het moet verschijnen. Lees ons artikel over hoe je formuliertargeting en gedragsinstellingen kiest.

Als je eenmaal je aanmeldingsformulier hebt gepubliceerd, pas dan je opt-in bevestigingsmail aan als dubbele toestemming is ingeschakeld voor je lijst. Maak vervolgens een welkomstserie om het aanbod van je formulier te leveren (bijvoorbeeld een korting of gratis verzending op hun eerste bestelling) en laat nieuwe abonnees kennismaken met je merk.

Extra hulpbronnen

• Aan de slag met aanmeldingsformulieren
• Hoe je een aanmeldingsformulier A/B test
• Cursus: Strategische aanmeldingsformulieren maken