Inzicht in stijlen voor een aanmeldingsformulier

Wat je leert

Leer hoe je Klaviyo’s builder voor aanmeldingsformulieren gebruikt om je formulier te ontwerpen door de ontwerpinstellingen te bewerken die beschikbaar zijn in de sectie Stijlen. Stijlinstellingen worden toegepast op je hele aanmeldingsformulier, inclusief op alle stappen van het 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

Navigeer voordat je je aanmeldingsformulier gaat vormgeven naar Aanmeldingsformulieren > Formulier maken. Als je wordt gevraagd een kanaal te kiezen, voer je een naam in, selecteer je Web en klik je op Maken. Je kunt een vooraf gebouwde template uit de formulierenbibliotheek aanpassen of een gloednieuwe template voor een aanmeldingsformulier maken. Voeg alle content- en invoerblokken toe die je wilt opnemen voordat je gaat stylen.

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

Typen formulieren

Bovenaan het gedeelte Stijlen kies je een Formuliertype: Pop-up, Volledige pagina, fly-out-formulier, Insluiten of Banner.

• 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.
• Volledige pagina -formulieren worden over het hele browservenster weergegeven en trekken de volledige aandacht van je shoppers. Dit zijn formulieren met een hoog conversiepercentage, omdat ze niet gemakkelijk over het hoofd kunnen worden gezien. Dit maakt ze echter ook storender, omdat shoppers met het formulier moeten interacteren om het te 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.
  • Als je een andere form wilt activeren vanuit een banner, klik je op de knop van de banner in de preview en stel je Action in op Open een andere form. Kies onder Formulier om te openen een live pop-up, fly-out-formulier of formulier op een volledige pagina. Embedded forms kunnen deze actie ook gebruiken, maar een embedded form, banner of weer op voorraad-form kan niet de form zijn die wordt geopend.

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.
  • Door de pixelafmetingen van een afbeelding te verkleinen of de afbeelding te comprimeren, kun je de bestandsgrootte verkleinen, maar kan ook de kwaliteit afnemen. Houd bij het kiezen van afbeeldingen rekening met de afweging tussen beeldkwaliteit en laadtijd.
• Zorg dat je een afbeelding van redelijk hoge kwaliteit gebruikt voor de beste resultaten.
  
  • Om de beeldkwaliteit en laadsnelheid in balans te houden, kun je je afbeeldingen het beste tussen 600 en 1000 px breed houden en minder dan 2000 px hoog voor afbeeldingen op volledige breedte. Afbeeldingen die minder breed zijn dan het volledige formulier, kunnen kleiner zijn dan 600 px.
    • Als je een aanmeldingsformulier op een volledige pagina gebruikt, heb je een grotere afbeelding met hoge resolutie nodig (bijv. een minimale breedte van 1980 px) om bij het grotere formulier te passen. Houd er 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.

Aanmeldingsformulieren verschijnen in webbrowsers, terwijl e-mails verschijnen in e-mailclients. Gebruik afbeeldingen met een hoge resolutie met beheersbare bestandsgroottes en test hoe ze eruitzien op elk type apparaat. Afbeeldingen die je uploadt via de formuliereditor moeten 5 MB of kleiner zijn.

Voeg een zijafbeelding toe

Zijafbeeldingen zijn beschikbaar voor pop-up-, fly-out-formulier-, ingesloten en formulieren voor volledige pagina’s. Zo voeg je een zijafbeelding toe:

1. Ga naar de sectie Stijlen en scrol 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. Klik op het lege zijafbeeldingsgebied in het formuliervoorbeeld en klik vervolgens op Afbeelding selecteren om een afbeelding uit je bibliotheek te kiezen of een nieuwe te uploaden.

Standaard stelt het toevoegen van een zijafbeelding pop-upformulieren, fly-out-formulieren en ingesloten formulieren in op 780 px breed, met een Medium zijafbeelding. Pas het aandeel van de afbeelding in het formulier aan in Stijlen > Afbeelding aan de zijkant. Pas de totale breedte van het formulier aan in Pop-upinstellingen, instellingen voor fly-out-formulier of insluitinstellingen. Voor formulieren op volledige pagina pas je de contentbreedte aan in Instellingen voor volledige pagina.

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.

Afbeeldingen aan de zijkant zijn standaard verborgen op mobiele apparaten. Wil je er ook één op mobiel tonen? Ga dan naar Stijlen > Afbeelding aan de zijkant en selecteer Alle apparaten. Bekijk een voorbeeld van de mobiele lay-out nadat je deze wijziging hebt doorgevoerd.

Een achtergrondafbeelding toevoegen

Om een achtergrondafbeelding toe te voegen:

1. Zet in Stijlen Achtergrondafbeelding aan.
2. Klik op Afbeelding selecteren om een afbeelding uit je bibliotheek te kiezen of een nieuwe te uploaden.
3. Kies hoe de afbeelding past: Bedekken vult het gebied en kan de afbeelding bijsnijden; Inpassen toont de volledige afbeelding en kan lege ruimte overlaten; Aangepast laat je de breedte instellen. Pas de uitlijning aan om de afbeelding te positioneren.

Als je een zij- of achtergrondafbeelding aan je formulier toevoegt, bekijk je een voorbeeld van alle formulierstappen, inclusief het succesbericht, door elke stap te selecteren in de bovenste menubalk. Standaard wordt de hoogte van je formulier aangepast op basis van de content en formuliervelden in elke stap, waardoor sommige stappen hoger of lager kunnen zijn dan andere. Wanneer je formulier een afbeelding bevat, kan een deel van de afbeelding op kleinere stappen worden afgesneden. Voor pop-up-, fly-out-formulier- en ingesloten formulieren pas je Minimumhoogte aan onder Pop-upinstellingen, Fly-out-formulier-instellingen of Insluitinstellingen in Stijlen. Formulieren voor volledige pagina’s hebben deze instelling niet. Controleer ook bij elke stap en elk apparaatformaat hoe de afbeelding past en is uitgelijnd.

Kleur- en afstandsopties

Gebruik in Stijlen Achtergrondkleur, Rand, Opvulling en Marge om de kleuren en witruimte van het formulier aan te passen. Gebruik Stijlen voor invoervelden om de invoervelden op te maken. Marge is niet beschikbaar voor ingesloten formulieren. Deze instellingen zijn van toepassing op alle stappen van je formulier, tenzij je conflicterende instellingen toepast in een specifiek blok.

Lettertypen en tekststijlen

Gebruik Stijlen > Tekst invoerveld om het lettertype, de grootte en de kleur te bewerken voor invoervelden, zoals velden voor e-mailadressen en telefoonnummers. Gebruik Tekst en koppen om gedeelde stijlen voor tekstblokken in te stellen. Kies Hoofdtekst of een kopniveau voordat je het uiterlijk aanpast.

Bewerk tekst voor een specifiek Tekst -blok door op het blok te klikken in de formulierpreview en de Content -editor te gebruiken die verschijnt. De formuliereneditor van Klaviyo gebruikt de UTF-8-coderingsnorm, wat betekent dat onder andere Latijnse tekens, emoji's, dubbele byte-tekens en meer 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 (standaard de X rechtsboven). Klik op het X-pictogram in de formulierpreview en pas daarna de instellingen voor Sluitpictogram aan. Ingesloten formulieren hebben geen sluitpictogram. Meer informatie over de opmaak van het sluitpictogram van een formulier.

Shoppers kunnen een formulier op volledig scherm sluiten met het sluitpictogram of de Escape-toets. Zorg dat het sluitpictogram duidelijk en zichtbaar is, zodat shoppers niet gefrustreerd raken door de onderbreking van je formulier op volledig scherm.

Aangepaste HTML en CSS

Betaalde Klaviyo-account kunnen aangepaste HTML en CSS gebruiken in aanmeldingsformulieren. Deze functies zijn bedoeld voor mensen die comfortabel code kunnen schrijven. Klaviyo biedt geen ondersteuning voor aangepaste code, en onjuiste code kan je formulier kapotmaken. Bekijk een voorbeeld van je formulier en test het op desktop en mobiel voordat je publiceert.

• Ga naar Stijlen > Aangepaste CSS om de styling te wijzigen met CSS en zet Aangepaste CSS inschakelen aan. Voer je code in bij Aangepaste CSS-code. Lees hoe je aangepaste CSS gebruikt in aanmeldingsformulieren.
• Als je aangepaste content wilt toevoegen, sleep je een HTML -blok vanuit Blokken toevoegen naar je formulier en selecteer je het om je markup in te voeren. Hiermee voeg je content toe binnen het blok; je bewerkt hiermee niet de HTML van bestaande blokken. Gebruik alleen ondersteunde tags en attributen. Lees hoe je een aangepast HTML-blok gebruikt in aanmeldingsformulieren.

Voor tips en inspiratie om je formulier aan te passen met de editor van Klaviyo ga je 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.

Je stijlwijzigingen moeten worden gepubliceerd voordat ze op je website worden weergegeven, inclusief wijzigingen aan een formulier dat al live staat. Zodra het ontwerp en de targeting klaar zijn, volg je de stappen om je aanmeldingsformulier te publiceren en te testen.

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.

Extra hulpbronnen