Så använder du anpassad CSS i registreringsformulär

Lär dig hur du använder anpassad CSS för att utforma dina Klaviyo-registreringsformulär utöver vad som finns tillgängligt i formulärredigeraren. Anpassad CSS ger dig finkornig kontroll över egenskaper som radhöjd, teckenavstånd och elementavstånd, så att dina formulär kan matcha ditt varumärke exakt.

Innan du börjar

Observera följande innan du använder anpassad CSS:

• Anpassad CSS är endast tillgängligt med betalda Klaviyo-abonnemang. Denna funktion rullas ut gradvis, så du kanske inte ser den i ditt konto ännu.
• Klaviyo support kan inte felsöka anpassad kod. Problem som orsakas av anpassad CSS (till exempel brutna layouter, dolda fält, renderingsproblem) är ditt ansvar att felsöka och åtgärda. Om ett formulär med anpassad CSS inte visas eller fungerar inte korrekt ska du först inaktivera anpassad CSS för att kontrollera om din kod är orsaken.
• Anpassad CSS gäller endast för styling. Du kan inte lägga till eller redigera HTML-koden för ditt formulär eller dess block genom denna funktion.
• Testa innan du publicerar. Anpassad CSS kan påverka formulärets användbarhet (om du till exempel av misstag döljer ett obligatoriskt fält kan det förhindra registreringar). Förhandsgranska och testa alltid ditt formulär innan du publicerar.

Aktivera anpassad CSS

För att aktivera anpassad CSS i ett formulär:

1. Navigera till registreringsformulär och öppna ditt formulär i redigeraren.
2. Välj fliken Stilar.
3. Bläddra till avsnittet Anpassad CSS längst ner på panelen.
4. Växla anpassad CSS till på.
5. Granska varningsmeddelandet. Genom att aktivera anpassad CSS bekräftar du att Klaviyo Support inte kan hjälpa till med problem som orsakas av din anpassade kod.

När detta är aktiverat visas en CSS-redigerare där du kan skriva anpassad CSS för ditt formulär. Anpassad CSS är aktiverat per formulär. Om du aktiverar det för ett formulär påverkas inte dina andra formulär.

Ange klassnamn på formulärskomponenter

När anpassad CSS är aktiverad får varje komponent i ditt formulär ett CSS- klassfält, synligt längst ner i komponentens sidofält när du väljer den. Klassnamnet är som standard komponentens namn, och du kan åsidosätta det med ditt eget för enklare åtkomst.

Använd dessa klassnamn som väljare i din CSS. Att ange egna klassnamn är det mest tillförlitliga sättet att rikta in sig på formulärelement, eftersom de förblir stabila och läsbara.

Om du senare inaktiverar anpassad CSS sparas dina klassnamn och visas igen om du aktiverar det igen.

Skriv din CSS

CSS-redigeraren börjar tom – den visar inte formulärets aktuella stilar, eftersom de genereras när formuläret återges på din webbplats. För att rikta in sig på element ska du använda någon av dessa metoder:

• Använd dina klassnamn. Referera till de klassnamn du har ställt in på dina formulärskomponenter (rekommenderas).
• Inspektera ditt aktiva formulär. Öppna ditt publicerade formulär på din webbplats och använd sedan webbläsarens utvecklingsverktyg (högerklicka > Inspektera) för att identifiera de väljare du vill rikta dig mot.

Undvik att rikta in dig på Klaviyos automatiskt genererade klassnamn. Dessa är interna, kan innehålla hashar-värden och kan ändras utan föregående meddelande – vilket tyst skulle bryta din CSS. Använd dina egna klassnamn istället.

Exempel

Anta att du anger klassnamnet form-headline på ditt rubrikblock och email-input på ditt block för e-postinmatning:

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

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

Anpassad CSS låser också upp styling som inte är tillgänglig i redigeraren, till exempel höger-till-vänster-text:

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

Förhandsgranska och publicera

När du har skrivit din CSS:

1. Använd redigerarens förhandsgranskning för att kontrollera formulärets utseende.
2. Verifiera ditt formulär på både dator och mobil, eftersom anpassad CSS kan påverka var och en på olika sätt.
3. Publicera ditt formulär på en icke-offentlig sida för att validera hur det visas på webbplatsen.
4. Skicka in en testregistrering på ditt publicerade formulär för att bekräfta att alla inmatningar och knappar fortfarande fungerar.
5. Publicera ditt formulär offentligt.

Inaktivera anpassad CSS

Om du vill ta bort anpassad styling inaktiverar du anpassad CSS på fliken Stilar. Ditt formulär återgår omedelbart till sin standardredigeringsstil. Detta är också det snabbaste sättet att kontrollera om ett visningsproblem orsakas av din anpassade kod. Din tidigare CSS-kod sparas för om du väljer att aktivera anpassad CSS igen.

Felsökning

Min CSS gäller inte.
Bekräfta att anpassad CSS är aktiverad, att dina väljare matchar de klassnamn som har angetts för dina komponenter och att du har publicerat den senaste versionen av formuläret. Stilar på din webbplats kan också komma i konflikt med eller åsidosätta formulärstilar. Använd webbläsarens utvecklingsverktyg för att kontrollera vilka regler som vinner.

Mitt formulär ser trasigt ut eller har slutat samla in registreringar.
Inaktivera anpassad CSS för att bekräfta orsaken och granska sedan din kod. Kontrollera särskilt om det finns regler som döljer eller flyttar inmatningar och knappar.

Jag ser inte avsnittet Anpassad CSS.
Anpassad CSS är endast tillgängligt med betalda abonnemang och rullas ut gradvis. Om du har ett betalt abonnemang och inte ser det ännu, kom tillbaka snart.

Typografistilar i en anpassad klass tillämpas inte.

Om layoutstilar som margin fungerar men textstilar som letter-spacing eller line-height inte gör det, är den anpassade klassen troligen kopplad till den yttre omslutningen medan den synliga texten renderas i ett kapslat underordnat element. I så fall ska du rikta in dig på de underordnade elementen också, till exempel: .form-headline, .form-headline * { ... }.

Vanliga frågor

Kan jag lägga till anpassad HTML i mitt formulär?
Nej. Du kan inte lägga till HTML-element i ett formulär eller redigera HTML-koden för befintliga block. Anpassad CSS ändrar endast stilen på formulärets befintliga komponenter.

Fungerar anpassad CSS i alla mina formulär?
Anpassad CSS är aktiverat per formulär, för formulär som visas på din webbplats. Aktivera det individuellt på varje formulär som du vill anpassa.

Kommer Klaviyo Support att hjälpa mig skriva eller åtgärda min CSS?
Nej. Klaviyo support kan inte skriva, granska eller felsöka anpassad kod. Om ett formulär med anpassad CSS har ett problem kommer du att uppmanas att inaktivera anpassad CSS för att utesluta det innan supporten kan undersöka saken ytterligare.

Vad händer med min CSS om jag inaktiverar funktionen?
Ditt formulär återgår till standardstil. Dina komponentklassnamn sparas och återställs om du aktiverar anpassad CSS igen.