Pop-up- en fly-out-formulieren optimaliseren voor mobiel

Wat je leert

Lees hoe je je aanmeldingsformulier voor mobiel ontwerpt met Klaviyo's best practices in gedachten, zodat je zeker weet dat je popup- en fly-out-formulier geoptimaliseerd zijn voor mobiele bezoekers.

Online shoppers gebruiken steeds vaker hun mobiele apparaten om nieuwe winkels te ontdekken, producten te bekijken en aankopen te doen. Daarom is het belangrijker dan ooit om ervoor te zorgen dat je website er op mobiel net zo goed uitziet als op desktops, en dat geldt ook voor je aanmeldingsformulieren.

Voordat je van start gaat

In Klaviyo kun je formulieren maken die op alle apparaten worden weergegeven (dus zichtbaar zijn op desktop- en mobiele apparaten), of je kunt formulieren alleen voor mobiel maken die alleen op mobiele apparaten worden weergegeven.

Als je formulier is ingesteld om op alle apparaten te worden weergegeven, optimaliseert Klaviyo automatisch sommige elementen, zoals lettergroottes en afbeeldingen, om de weergave voor shoppers op mobiele apparaten te verbeteren. In deze gids worden extra best practices behandeld om rekening mee te houden. Gebruik de weergaveselector rechtsboven in de formulierbouwer om tijdens het maken van je formulier te schakelen tussen desktop- en mobiele weergave. Het desktop-icoon laat zien hoe het formulier eruitziet voor desktopshoppers, terwijl het mobiele icoon laat zien wat mobiele shoppers zien.

Deze gids behandelt best practices voor het maken van popup- en fly-out-formulieren die op mobiele apparaten worden weergegeven. Deze zijn handig, ongeacht of je formulier op alle apparaten of alleen op mobiel wordt weergegeven. Ga voor een uitgebreider overzicht van aanmeldingsformulieren specifiek op mobiele apparaten naar basis: mobiel formulierontwerp.

Algemene best practices voor formulieren

Veel van de best practices voor desktopformulieren gelden ook voor mobiele apparaten:

• Houd het kort en krachtig: overweeg een meertrapsformulier als je veel velden hebt.
  • Als je formulier toestemming voor e-mail en sms verzamelt, verzamel dan e-mail in de eerste stap, gevolgd door sms in de tweede stap. Gebruik Smart Opt-in voor een eenvoudigere mobiele opt-in-ervaring. Voor Smart Opt-in moet sms zijn ingeschakeld in je account en heb je een betaald sms-abonnement nodig; zie de gelinkte handleiding voor installatievereisten.
• Zorg dat je het makkelijk kunt sluiten, zodat bezoekers niet gefrustreerd raken en je site verlaten.
  • Met een formulierteaser kunnen shoppers een formulier dat ze hebben gesloten opnieuw openen. Stel de teaser in op Tonen nadat formulier is gesloten of Tonen voordat formulier wordt weergegeven en nadat formulier is gesloten.
• Als je formulier is ingesteld om op alle apparaten te worden weergegeven (dus desktop- en mobiele shoppers zien het allebei) en het een afbeelding aan de zijkant bevat, laat je de afbeeldingsinstelling op Desktop staan in Edit styles > Side image. Hierdoor wordt de afbeelding aan de zijkant op mobiele apparaten verborgen, zodat er meer ruimte overblijft voor de inhoud van je formulier.
  

• Gebruik beknopte labels voor elk van je invoervelden (bijv. e-mailadres, telefoonnummer, enz.) die op één regel passen, zodat shoppers gemakkelijk zien om welke informatie je vraagt.

SEO en mobiele formulieren

Het is belangrijk om best practices voor mobiele SEO in gedachten te houden, vooral wanneer je formulieren maakt op je homepage of andere landingspagina's. Formulieren die verschijnen op veelvoorkomende landingspagina's vanuit organische zoekresultaten mogen de content van je site niet bedekken of de ervaring van een bezoeker verstoren; anders kan de pagina worden bestraft door zoekalgoritmen. Meer informatie over intrusieve interstitials en SEO.

Om dit te voorkomen:

• Open Targeting en gedrag > Weergave. Stel onder Timing Formulier weergeven in op Op basis van regels, schakel Na tijdvertraging in en voer de vertraging in seconden in. Als je andere timingregels inschakelt, zet je Alleen weergeven als aan alle geselecteerde voorwaarden wordt voldaan aan, zodat een andere timingregel het formulier niet weergeeft voordat de vertraging is verstreken.
• Voeg een teaser toe en stel de weergaveoptie in op Tonen voordat formulier wordt weergegeven en nadat formulier is gesloten.

Pop-ups optimaliseren

Een pop-upformulier verschijnt in het midden van het scherm van een shopper, bedekt vaak een groot deel van de pagina en belemmert de mogelijkheid om met andere elementen op de pagina te interageren zolang het formulier open is. Dit maakt pop-ups storender, maar zorgt ook voor een hogere conversie.

Om te optimaliseren hoe pop-ups werken op mobiele apparaten:

1. Voorkom dat het formulier wordt gesloten wanneer een mobiele shopper buiten het formuliergebied klikt om het aantal onbedoelde formulierafsluitingen te verminderen.
   • Ga naar Targeting en gedrag > Weergave.
   • Scroll omlaag naar Klik buiten het formulier om te sluiten.
   • Schakel Op mobiel uit om te voorkomen dat tikken buiten de pop-up deze sluit.
     

2. Zorg dat het sluitpictogram van je formulier (de X-knop) groot genoeg is, ook op een klein scherm zoals dat van een mobiel apparaat.
   • Klik op het sluitpictogram in het formuliervoorbeeld om de grootte aan te passen.
   • Test hoe het formulier eruitziet op je eigen mobiele apparaat om te zorgen dat het makkelijk te vinden en aan te klikken is.
     Het sluitpictogram in het formulier links kan bijvoorbeeld lastig zijn om aan te klikken op een mobiel apparaat. Het sluitpictogram in het formulier rechts is daarentegen groter en makkelijk te vinden.
     

3. Laat je pop-up visueel opvallen ten opzichte van de rest van je site door een overlaykleur, een slagschaduw of beide te gebruiken.
   • Selecteer Stijlen bewerken om het paneel Stijlen te openen.
   • Kies in het gedeelte Overlaykleur een semi-transparante kleur om de focus op je formulier te leggen en de content van je site te dimmen terwijl het formulier open is.
   • Configureer een schaduw om subtiele schaduwvorming rond je formulier toe te voegen, zodat het zich onderscheidt van de omringende content.
4. Pas de marges van je formulier aan, zodat het er op mobiele apparaten meer uitziet als een pop-upformulier en niet van rand tot rand loopt.
   
   1. Selecteer Stijlen bewerken en scrol vervolgens omlaag naar Marge.
   2. Vergroot de horizontale marges op basis van hoe het formulier eruitziet in de mobiele preview.

Fly-outs optimaliseren

Wanneer er een fly-out-formulier verschijnt, kunnen mobiele bezoekers nog steeds met je site communiceren achter het formulier, tenzij Mobiele overlay is ingeschakeld. Ze kunnen ervoor kiezen om het formulier te sluiten, het in te vullen of het open te laten terwijl ze verder browsen. Over het algemeen maakt dit fly-out-formulieren minder opdringerig dan pop-ups.

Zo optimaliseer je je fly-out-formulier voor een mobiel apparaat:

1. Stel je formulier in om vanaf de boven- of onderkant van het scherm uit te vliegen.
   • Selecteer Stijlen bewerken om het paneel Stijlen te openen.
   • Selecteer Mobiele fly-out-formulierpositie en kies vervolgens Vastzetten onderaan of Vastzetten bovenaan.
     Op mobiele apparaten in portretstand schuift je formulier uit vanaf de boven- of onderkant van het scherm en bedekt het een gedeelte van het scherm van rand tot rand. In liggende stand gebruikt dit de normale fly-out-formulierpositie.
     

2. Scheid je fly-out-formulier visueel van de rest van je site met een mobiele overlay, een slagschaduw of beide.
   • Selecteer Stijlen bewerken om het paneel Stijlen te openen.
   • Scroll naar de instellingen voor Mobiele overlay en Schaduw.
   • Schakel Mobiele overlay in om interactie met de rest van je site te blokkeren terwijl het fly-out-formulier open blijft. De overlay wordt niet weergegeven wanneer het fly-out-formulier op een desktop wordt bekeken.
   • Schakel Slagschaduw in om subtiele schaduw rondom je formulier toe te voegen, zodat het zich onderscheidt van de omringende content. Let op: de instellingen voor Slagschaduw zijn van invloed op zowel de mobiele als de desktopversie van je formulier.
     

Volgende stappen

Wanneer je klaar bent om je wijzigingen live te zetten:

1. Klik in de formuliereditor op Publiceren of plannen.
2. Los alle blokkerende meldingen op. Als er opties voor plannen verschijnen, selecteer je Nu publiceren. Klik op Nu publiceren om je wijzigingen te publiceren.

Controleer het gepubliceerde formulier op je mobiele apparaat en zorg dat je voldoet aan de targeting- en weergavevoorwaarden.

Zodra je je formulieren hebt geoptimaliseerd voor mobiele apparaten, kun je je formulierontwerpen A/B-testen om beter te begrijpen wat je sitebezoekers prefereren.

Extra hulpbronnen

• Aan de slag met aanmeldingsformulieren
• Inzicht in instellingen voor het sluiten van formulieren
• Basisprincipes: mobiele formulieren ontwerpen
• Hoe je sms-toestemming verzamelt met een tikken voor sms-formulier