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 i betalda Klaviyo-abonnemang.
• 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. Öppna formulärets meny Åtgärder (3 punkter) och välj Redigera.
2. Välj Redigera stilar i det vänstra sidofältet.
3. Bläddra till avsnittet Anpassad CSS längst ner på panelen.
4. Slå på Aktivera anpassad CSS.
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 har varje komponent ett fält för Klassnamn under CSS-klasser. Standardnamnet baseras på komponenttypen, så komponenter av samma typ delar det.

1. Välj komponenten i formulärförhandsvisningen.
2. Under CSS-klasser anger du ett unikt namn i Klassnamn, till exempel form-headline. Ange namnet utan en inledande punkt.

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 startar tom – den visar inte formulärets nuvarande stilar, eftersom de genereras när formuläret renderas på din webbplats. När du har angett dina klassnamn väljer du Redigera stilar och anger dina regler i Anpassad CSS-kod. För att rikta in dig på element använder du någon av följande 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

För textblock ska du rikta in dig på texten i blocket samt dess yttre omslutande element. !important -deklarationen nedan åsidosätter inline-stil för line-height i texten.

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

.form-headline,
.form-headline * {
  line-height: 1.2 !important;
  letter-spacing: 0.5px;
}

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

Med Custom CSS kan du också använda formatering som inte är tillgänglig i redigeraren, till exempel höger-till-vänster-text. Det här exemplet åsidosätter den infogade textjusteringen på rubriken:

.form-headline,
.form-headline * {
  direction: rtl;
  text-align: right !important;
}

Förhandsgranska och publicera

Om ditt formulär redan är live kommer publicering av testsideinriktning tillfälligt att göra att det slutar visas på sina vanliga sidor. Återställ den inriktning du vill ha efter testningen.

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. Begränsa formuläret till en testsida som inte är offentligt synlig innan du publicerar. För URL-inriktning väljer du Inriktning och beteende > Inriktning. Under URL:er aktiverar du Visa endast på vissa URL:er, väljer Exakt matchning och anger hela testsidans URL, inklusive https://. För ett formulär som öppnas av en anpassad utlösare utlöser du det på testsidan i stället.
4. Välj Publicera eller schemalägg, välj Publicera nu och klicka sedan på Publicera nu. Lös alla blockeringsvarningar innan du publicerar.
5. Skicka in en testregistrering på ditt publicerade formulär för att bekräfta att alla inmatningar och knappar fortfarande fungerar.
6. När testet lyckas återställer du dina avsedda inställningar för inriktning och publicerar igen med Publicera eller schemalägg > Publicera nu. Om du använder en anpassad utlösare kan du göra formuläret tillgängligt via din avsedda utlösare.

Inaktivera anpassad CSS

För att ta bort anpassad formatering väljer du Redigera stilar och stänger av Aktivera anpassad CSS. Förhandsgranskningen av ditt formulär återgår till redigerarens standardformatering. Detta är också det snabbaste sättet att kontrollera om ett visningsproblem orsakas av din anpassade kod. För att tillämpa ändringen på din webbplats väljer du Publicera eller schemalägg, väljer Publicera nu och klickar sedan på Publicera nu. Din CSS-kod och dina komponentklassnamn sparas om du väljer att slå på 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 kontrollera förhandsvisningen av formuläret och granska sedan din kod. För att kontrollera ändringen på din webbplats publicerar du formuläret igen. Kontrollera särskilt regler som döljer eller flyttar fält och knappar.

Jag ser inte avsnittet Anpassad CSS.
Anpassad CSS är tillgängligt i betalda Klaviyo-abonnemang. Öppna formuläret i redigeraren, välj Redigera stilar och scrolla till Anpassad CSS.

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 omslutaren medan den synliga texten renderas i ett nästlat underelement. I så fall ska du rikta in dig på underelementen också, till exempel: .form-headline, .form-headline * { ... }. Om underelementet har en inline-stil för samma egenskap kommer det inte att åsidosätta den stilen om du bara riktar in dig på det. Lägg till !important bara för den egenskap du behöver åsidosätta, som i exemplen ovan.

Vanliga frågor

Kan jag lägga till anpassad HTML i mitt formulär?
Ja. Med en betald Klaviyo-plan kan du lägga till ett HTML -block för anpassat innehåll. Detta är separat från anpassad CSS och låter dig inte redigera HTML-koden i befintliga block. Lär dig hur du använder ett anpassat HTML-block.

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?
Förhandsgranskningen av formuläret återgår till standardformattering. Publicera ändringen för att tillämpa den på din webbplats. Din CSS-kod och dina komponentklassnamn sparas och återställs om du aktiverar anpassad CSS igen.