Hur du stylar formulär i Contact Form 7 med CSS i WordPress
Vill du att dina WordPress-formulär ska se lika snygga ut som resten av din webbplats? Med Contact Form 7 har du full kontroll över formulärets utseende med hjälp av CSS. Den här guiden leder dig steg för steg genom processen att styla Contact Form 7-formulär, så att du kan skapa en sömlös och varumärkesanpassad upplevelse för dina besökare.
Varför ska man styla Contact Form 7-formulär?
Contact Form 7 är ett av de mest populära WordPress-pluginsen för att bygga formulär – men dess standardutseende är grundläggande. Anpassad styling i klassiska WordPress-teman låter dig:
Matcha din webbplats varumärke
Förbättra användbarhet och tillgänglighet
Gör formulär mer inbjudande och professionella
Steg 1: Identifiera formulärets CSS-selektorer
Innan du börjar styla behöver du veta vilka CSS-selektorer som riktar in sig på dina formulärelement.
Varje Contact Form 7-formulär är inlindat i en unik klass: .wpcf7
Individuella element som inmatningsfält, textareor och skicka-knappar använder standard-HTML-taggar
Steg 2: Lägg till egen CSS på din WordPress-webbplats
Du kan lägga till CSS på två huvudsakliga sätt:
Via Anpassaren:
Gå till Utseende > Anpassa > Ytterligare CSS och klistra in dina stilar.
OBS: Lägg till din CSS i ditt barntemas style.css-fil för mer avancerade anpassningar.
Steg 3: Skriv din egen CSS
Här är några vanliga exempel för att komma igång, med komponenterna “text” och “submit” som exempel:
Styla alla Contact Form 7-formulär
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Pseudo-klasser i CSS, såsom :hover, låter dig styla element baserat på deras tillstånd eller användarinteraktion. Till exempel tillämpas :hover-pseudoklassen när en användare för muspekaren över en knapp eller ett fält. Detta används ofta för att markera knappar eller ändra deras färg vid hovring, vilket gör dina formulär mer interaktiva och visuellt tilltalande. Andra användbara pseudo-klasser är :focus (när ett fält är markerat) och :active (när ett element klickas på). Att använda pseudo-klasser förbättrar användarupplevelsen genom att ge omedelbar återkoppling när besökare interagerar med ditt formulär.
Rikta in dig på ett specifikt formulär
Varje formulär har ett unikt ID, som #wpcf7-f123-o1. Använd detta för att bara styla det formuläret:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Byt ut f123-o1 mot ditt faktiska formulär-ID. Du hittar formulärets unika ID genom att visa sidan där ditt Contact Form 7-formulär är inbäddat, högerklicka på formuläret och välja “Inspektera” (eller “Inspektera element”) i din webbläsare. Leta efter <div> med klassen .wpcf7 – ID:t visas som något i stil med id="wpcf7-f123-o1" i HTML-koden. Använd detta ID i din CSS-selektor för att rikta in dig på just det formuläret.
Steg 4: Använd Contact Form 7:s inbyggda klasser
Contact Form 7 lägger automatiskt till klasser på element, vilket gör det ännu enklare att rikta in sig. Till exempel:
.wpcf7-form-control – Alla formulärkontroller
.wpcf7-submit – Skicka-knappen
Du kan också lägga till egna klasser i formulärredigeraren för ännu mer kontroll.
Exempel
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Steg 5: Förhandsgranska och justera
Efter att du sparat din CSS, uppdatera din webbplats för att se ändringarna. Använd webbläsarens inspektionsverktyg för att justera stilar i realtid innan du kopierar dem till din webbplats. Kom ihåg att rensa webbplatsens cache efter ändringar så att uppdateringarna syns för besökarna.
Här är före- och efterexempel på ett formulär på en demosida, där vi använde CSS-koden från steg 3 för att göra rutorna runt varje formulärfält blåa.
Snabba tips för bättre formulärdesign
Gör det tillgängligt: Säkerställ bra färgkontrast och läsbara teckenstorlekar
Använd avstånd: Lägg till padding och marginaler för ett rent och luftigt utseende
Markera fel: Styla felmeddelanden med en tydlig färg (som rött) för att hjälpa användare att rätta till misstag
Testa på mobil: Se till att dina formulär ser bra ut på alla enheter
Felsökning
Om dina stilar inte visas, prova dessa steg:
Rensa webbläsarens och webbplatsens cache – Ibland förhindrar cachade filer att ny CSS visas. Om du använder ett cache-plugin eller hanterad hosting, rensa även dessa cacher.
Kontrollera CSS-specificitet – Om dina stilar inte tillämpas, försök göra dina selektorer mer specifika för att åsidosätta befintliga stilar.
Se till att du redigerar rätt CSS-fil eller sektion – Dubbelkolla att du lägger till din kod på rätt plats, till exempel i panelen Ytterligare CSS, ditt barntemas style.css eller ett anpassat CSS-plugin.
Granska CSS-klasser för stavfel eller misstag – Leta efter felstavade klassnamn, onödiga mellanslag eller oavsiktlig användning av fel klass. Kontrollera också att klassen du riktar in dig på faktiskt finns i formulärets HTML.
Kontrollera dubbletter eller motstridiga klasser – Se till att klassen du använder inte redan används någon annanstans med andra stilar som kan åsidosätta dina ändringar.
Följ allmänna bästa praxis – Använd tydliga och konsekventa namn på dina klasser, avsluta varje CSS-regel med semikolon och stäng alltid kodblock med en klammerparentes (}).
Att noggrant granska din kod för dessa vanliga problem hjälper till att säkerställa att dina egna stilar visas korrekt på din webbplats.
Exempel: Komplett egen CSS för ett Contact Form 7-formulär
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Här är ett exempel på ett formulär som har stylats med CSS-koden ovan. Denna CSS-kod anpassar utseendet på flera viktiga element i ditt Contact Form 7-formulär. Den riktar in sig på alla textfält, e-postfält och textareor, och ger dem en ljusgrå kant, rundade hörn, bekväm padding och enhetlig bredd för ett rent och modernt utseende.
Koden stylar också skicka-knappen med grön bakgrund, vit text, rundade kanter och fet, lättläst text. När användare hovrar över skicka-knappen blir bakgrundsfärgen mörkare grön, vilket ger interaktiv återkoppling.
Lägga till CSS: klassiska teman vs blockteman
Stegen i denna guide för att styla Contact Form 7-formulär med CSS är utformade för klassiska teman i WordPress. Klassiska teman, som det populära Astra, använder Anpassaren där du enkelt kan lägga till egen CSS under avsnittet “Ytterligare CSS”. Detta gör det enkelt att styla dina formulär och se ändringar direkt.
Om din webbplats däremot använder ett blocktema (ibland kallat Full Site Editing- eller FSE-tema) är processen annorlunda. Blockteman har inte alltid Anpassaren eller fältet “Ytterligare CSS” som standard. Istället använder du Webbplatsredigeraren för att göra designändringar. Medan du kan justera globala stilar för färger, typografi och layout, är det inte alltid möjligt att lägga till valfri CSS direkt i användargränssnittet.
Vad du ska göra om du använder ett blocktema
Öppna din WordPress-panel och gå till Utseende > Redigerare (Webbplatsredigeraren).
I Webbplatsredigeraren, leta efter panelen Stilar (ikonen med en halvskuggad cirkel).
Vissa blockteman erbjuder nu ett alternativ för “Ytterligare CSS” i panelen Stilar, men detta beror på ditt tema och din WordPress-version.
Om du inte ser något alternativ för att lägga till egen CSS kan du använda ett plugin som WPCode för att lägga till CSS på hela webbplatsen. WPCode är nybörjarvänligt och fungerar med alla teman, så att du ändå kan styla dina formulär även om ditt tema inte stöder direkt CSS-redigering i användargränssnittet. Tänk bara på att installationen av detta plugin kan påverka stilen på andra befintliga formulär på din webbplats.
Ytterligare resurser
Att styla dina Contact Form 7-formulär är ett enkelt men kraftfullt sätt att lyfta din webbplats användarupplevelse. Med bara några rader CSS kan du få dina formulär att se ut och kännas som en naturlig del av ditt varumärke.