Aangepaste CSS in aanmeldingsformulier gebruiken

Leer hoe je aangepaste CSS gebruikt om je Klaviyo-aanmeldingsformulier op te maken die verder gaat dan wat beschikbaar is in de formuliereneditor. Aangepaste CSS geeft je gedetailleerde controle over eigenschappen zoals regelhoogte, letterafstand en elementafstand, zodat je formulieren exact overeenkomen met je merk.

Voordat je van start gaat

Let op het volgende voordat je aangepaste CSS gebruikt:

• Aangepaste CSS is alleen beschikbaar bij betaalde Klaviyo-abonnementen. Deze functie wordt geleidelijk uitgerold, dus het kan zijn dat je hem nog niet in je account ziet.
• Klaviyo Support kan geen problemen met aangepaste code oplossen. Problemen die door aangepaste CSS worden veroorzaakt (bijv. kapotte indelingen, verborgen velden, renderproblemen) zijn jouw verantwoordelijkheid om te oplossen en op te lossen. Als een formulier met aangepaste CSS niet wordt weergegeven of zich niet correct gedraagt, schakel je eerst aangepaste CSS uit om te controleren of je code de oorzaak is.
• Aangepaste CSS past alleen opmaak toe. Je kunt via deze functies de HTML van je formulier of de blokken ervan niet toevoegen.
• Test voordat je publiceert. Aangepaste CSS kan de bruikbaarheid van formulieren beïnvloeden (als je bijvoorbeeld per ongeluk een verplicht veld verbergt, kun je aanmeldingen in de weg staan). Bekijk altijd een voorbeeld van je formulier en test het voordat je het publiceert.

Aangepaste CSS inschakelen

Aangepaste CSS op een formulier inschakelen:

1. Ga naar aanmeldingsformulier en open je formulier in de editor.
2. Selecteer het tabblad Stijlen.
3. Scrol naar het gedeelte Aangepaste CSS onderaan het paneel.
4. Aangepaste CSS inschakelen.
5. Bekijk het waarschuwingsbericht. Door aangepaste CSS in te schakelen, erken je dat Klaviyo Support niet kan helpen bij problemen die door je aangepaste code worden veroorzaakt.

Zodra dit is ingeschakeld, verschijnt er een CSS-editor waarmee je aangepaste CSS voor je formulier kunt schrijven. Aangepaste CSS wordt per formulier ingeschakeld; Aanzetten voor het ene formulier heeft geen invloed op je andere formulieren.

Klassenamen instellen voor formulieronderdelen

Als aangepaste CSS is ingeschakeld, krijgt elk onderdeel in je formulier een CSS-klasseveld, dat zichtbaar is onderaan de zijbalk van het onderdeel wanneer je het onderdeel selecteert. De klassenaam is standaard de naam van het onderdeel en je kunt deze overschrijven met de jouwe om gemakkelijker toegang te krijgen.

Gebruik deze klassenamen als selectors in je CSS. Je eigen klassenamen instellen is de meest betrouwbare manier om formulierelementen te targeten, omdat ze stabiel en leesbaar blijven.

Als je aangepaste CSS later uitschakelt, blijven je klassenamen behouden en verschijnen ze opnieuw als je deze CSS opnieuw inschakelt.

Je CSS schrijven

De CSS-editor begint leeg. Deze toont niet de huidige stijlen van je formulier, omdat deze worden gegenereerd wanneer het formulier op je site wordt weergegeven. Gebruik een van deze benaderingen om elementen te targeten:

• Gebruik je klassenamen. Verwijs naar de klassenamen die je hebt ingesteld in je formulieronderdelen (aanbevolen).
• Inspecteer je live formulier. Open je gepubliceerde formulier op je website en gebruik vervolgens de ontwikkelaarstools van je browser (klik met de rechtermuisknop > Inspecteren) om de selecteurs te identificeren waarop je je wilt richten.

Richt je niet op de automatisch gegenereerde klassenamen van Klaviyo. Deze zijn intern, kunnen gehashte waarden bevatten en kunnen zonder voorafgaande kennisgeving worden gewijzigd. Je CSS zou stilletjes kapot gaan. Gebruik in plaats daarvan je eigen klassenamen.

Voorbeeld

Stel dat je de klassenaam form-headline instelt voor je kopblok en email-input voor je e-mailinvoerblok:

.form-headline {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

Aangepaste CSS ontgrendelt ook opmaak die niet beschikbaar is in de editor, zoals van rechts-naar-links tekst:

.form-headline {
  direction: rtl;
  text-align: right;
}

Voorbeeld weergeven en publiceren

Na het schrijven van je CSS:

1. Gebruik de voorbeeldeditor van de editor om je formulier te bekijken.
2. Verifieer je formulier op zowel desktop als mobiel, omdat aangepaste CSS elk een ander effect kan hebben.
3. Publiceer je formulier op een niet-openbare pagina om te valideren hoe het op de site verschijnt.
4. Dien een testaanmelding in op je gepubliceerde formulier om te bevestigen dat alle invoer en knoppen nog steeds werken.
5. Je formulier openbaar publiceren.

Aangepaste CSS uitschakelen

Om aangepaste opmaak te verwijderen, schakel je aangepaste CSS uit op het tabblad Stijlen. Je formulier keert onmiddellijk terug naar de standaard editoropmaak. Dit is ook de snelste manier om te controleren of een weergaveprobleem wordt veroorzaakt door je aangepaste code. Je vorige CSS-code wordt opgeslagen voor als je ervoor kiest aangepaste CSS weer in te schakelen.

Probleemoplossing

Mijn CSS wordt niet toegepast.
Controleer of aangepaste CSS ingeschakeld is, of je selectors overeenkomen met de klassenamen die zijn ingesteld op je onderdelen en of je de nieuwste versie van het formulier hebt gepubliceerd. Stijlen op je website kunnen ook conflicteren met formulierstijlen of deze overschrijven. gebruik de ontwikkelaarstools van je browser om te controleren welke regels winnend zijn.

Mijn formulier ziet er niet uit of ik verzamelt geen aanmeldingen meer.
Schakel aangepaste CSS uit om de oorzaak te bevestigen en controleer dan je code. Controleer vooral op regels die invoer en knoppen verbergen of verplaatsen.

Ik zie het gedeelte Aangepaste CSS niet.
Aangepaste CSS is alleen beschikbaar voor betaalde abonnementen en wordt geleidelijk uitgerold. Als je een betaald abonnement hebt en deze nog niet ziet, kom dan binnenkort terug.

Typografiestijlen op een aangepaste klasse worden niet toegepast.

Als lay-outstijlen zoals margin wel werken, maar tekststijlen zoals letter-spacing of line-height niet, is de aangepaste class waarschijnlijk gekoppeld aan de buitenste wrapper terwijl de zichtbare tekst wordt gerenderd in een genest onderliggend element. Target in dat geval ook de onderliggende elementen, bijvoorbeeld: .form-headline, .form-headline * { ... }.

Veelgestelde vragen

Kan ik aangepaste HTML toevoegen aan mijn formulier?
Nee. Je kunt geen HTML-elementen toevoegen aan een formulier of de HTML van bestaande blokken bewerken. Aangepaste CSS verandert alleen de opmaak van de bestaande onderdelen van je formulier.

Werkt aangepaste CSS op al mijn formulieren?
Aangepaste CSS wordt per formulier ingeschakeld voor formulieren die op je website worden weergegeven. Schakel dit afzonderlijk in op elk formulier dat je wilt aanpassen.

Kan Klaviyo Support me helpen mijn CSS te schrijven of op te lossen?
Nee. Klaviyo Support kan geen aangepaste code schrijven, beoordelen of problemen oplossen. Als een probleem een probleem heeft met een formulier met aangepaste CSS, wordt je gevraagd om aangepaste CSS uit te schakelen om dit uit te sluiten voordat Support verder onderzoek kan doen.

Wat gebeurt er met mijn CSS als ik de functies uitschakel?
Je formulier keert terug naar de standaard opmaak. De namen van je onderdeelklassen worden opgeslagen en hersteld als je aangepaste CSS opnieuw inschakelt.