Hur man stylar Contact Form 7-formulär i WordPress

Du installerade troligen Contact Form 7 på din WordPress-webbplats eftersom den är gratis och har varit ett av de mest populära kontaktformulärplugins för WordPress.

Du kanske dock har märkt att standardformulären ser ganska enkla ut på din live-webbplats. Den grundläggande gråa stilen kan krocka med resten av din webbplats och få den övergripande designen att kännas mindre polerad.

Eftersom Contact Form 7 inte inkluderar en visuell redigerare eller inbyggda stilalternativ, kräver ändringar lite arbete om du inte är bekväm med kod.

Den goda nyheten är att du inte behöver vara utvecklare för att fixa detta. Med bara några CSS-justeringar kan du få dina formulär att se rena, moderna och helt i linje med ditt varumärke ut.

I den här nybörjarvänliga guiden guidar vi dig steg för steg genom hur du anpassar Contact Form 7, utan någon avancerad kodning eller designkunskap. 🙌

Varför styla dina Contact Form 7-formulär?

Att styla dina formulär i Contact Form 7 gör att din webbplats ser mer professionell ut, förbättrar läsbarheten och hjälper dina formulär att matcha ditt varumärke. Allt detta kan öka förtroendet och formulärkonverteringar.

Innan vi går in på detaljerna är Contact Form 7 ett av de mest populära plugin-programmen för kontaktformulär för WordPress. Det är gratis att använda och låter dig lägga till ett WordPress-formulär med hjälp av kortkod.

Nackdelen är att Contact Form 7 är ganska begränsad när det gäller design och anpassningsfunktioner. Dessutom erbjuder den inga inbyggda alternativ för att ändra stilen på dina formulär.

Detta gör det svårt att matcha designen på ditt kontaktformulär med ditt webbplatstema eller ändra grundläggande detaljer som teckensnitt och bakgrundsfärg för att få ditt formulär att sticka ut.

Ännu viktigare är att pluginet har fryst ny funktionsutveckling, vilket innebär att det inte kommer att få uppdateringar utöver kritiska buggfixar och säkerhetsuppdateringar.

Med det sagt ska vi nu titta på hur man stylar ett Contact Form 7-formulär i WordPress. Här är vad vi kommer att täcka i följande avsnitt:

Låt oss börja!

Komma igång med Contact Form 7

Först måste du installera och aktivera plugin-programmet Contact Form 7 på din webbplats.

För att göra detta, gå till Plugins » Lägg till nytt plugin i ditt WordPress-adminområde.

Detta öppnar sidan där du kan välja ett plugin från WordPress plugin-katalog.

Använd sökfunktionen för att snabbt hitta pluginet. Klicka sedan på knappen 'Installera nu' i sökresultatet.

Glöm inte att klicka på knappen 'Aktivera' för att aktivera det på din WordPress-webbplats. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till Kontakt » Lägg till ny från din WordPress-instrumentpanel.

Du kan nu redigera formulärinställningarna för din webbplats och börja med att ange en titel för ditt formulär.

Plugin-programmet lägger automatiskt till standardfälten för namn, e-postadress, ämne och meddelande. Du kan också lägga till fler fält genom att helt enkelt dra och släppa dem där du vill ha dem.

När du är klar, glöm inte att klicka på 'Spara'-knappen och kopiera kortkoden.

Nästa steg är att bädda in formuläret i ditt blogginlägg eller din sida.

För att göra det, redigera helt enkelt ett inlägg eller lägg till ett nytt.

När du är i WordPress-redigeraren, klicka på '+'-tecknet högst upp och lägg sedan till ett Kortkod-block.

Därefter, ange helt enkelt kortkoden för ditt Contact Form 7-formulär i kortkod-blocket. Det kommer att se ut ungefär så här:

[contact-form-7 id="117" title="Contact Form"]

Publicera nu ditt inlägg eller din sida för att se kontaktformuläret i aktion.

För den här handledningen använde vi standardformuläret för kontakter och lade till det på en WordPress-sida. Så här såg kontaktformuläret ut på vår testsida.

Nu är du redo att anpassa ditt Contact Form 7-formulär i WordPress.

Metod 1: Stylning av Contact Form 7-formulär med anpassad CSS

Eftersom Contact Form 7 inte har inbyggda stilalternativ, måste du använda CSS för att styla dina formulär.

Contact Form 7 lägger till standard CSS-klasser och ID:n till formulärelementen. Detta gör det enklare att anpassa designen om du kan lite CSS.

Varje Contact Form 7-formulär använder CSS-klassen .wpcf7, som du kan rikta in dig på för att styla ditt formulär.

I det här exemplet kommer vi att använda ett anpassat teckensnitt som heter Lora i våra inmatningsfält och ändra bakgrundsfärgen på formuläret. Se till att detta teckensnitt laddas av ditt WordPress-tema, eller ändra helt enkelt 'lora' till ett teckensnitt som ditt tema redan använder:

.wpcf7 {
  background-color: #fbefde;
  border: 1px solid #f28f27;
  padding: 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background-color: #725f4c;
  color: #FFF;
  font-family: lora, sans-serif;
  font-style: italic;
}

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
  background-color: #725f4c;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

Du kan enkelt lägga till denna CSS genom att gå till Utseende » Anpassa » Ytterligare CSS i din WordPress-instrumentpanel.

Om du behöver mer hjälp, se vår guide om hur du enkelt lägger till anpassad CSS på en WordPress-webbplats.

Så här såg vårt kontaktformulär ut efter att ha applicerat denna CSS.

Stilning av flera Contact Form 7-formulär

Om du använder flera kontaktformulär och vill styla dem olika, kan du rikta in dig på det unika ID som Contact Form 7 genererar för varje formulär.

Nackdelen med CSS:en vi använde ovan är att den kommer att tillämpas på alla Contact Form 7-formulär på din webbplats.

För att börja, öppna helt enkelt sidan som innehåller formuläret du vill ändra. Högerklicka sedan på det första fältet i formuläret och välj alternativet 'Inspektera'.

Oroa dig inte om koden ser komplex ut; du behöver bara hitta en specifik rad.

Ett verktygsfält för utvecklare öppnas längst ner eller på sidan av skärmen och visar sidans HTML-kod. I det här fältet måste du lokalisera startraden för formulär koden.

Som du kan se i skärmdumpen ovan, börjar vår kod för kontaktformuläret med raden:

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

ID-attributet är en unik identifierare som genereras av Contact Form 7 för detta specifika formulär. Det är en kombination av formulär-ID och inläggs-ID där detta formulär läggs till.

Vi kommer att använda detta ID i vår CSS för att styla endast detta specifika kontaktformulär. I koden nedan, ersätt standard .wpcf7 med ditt unika ID (t.ex. #wpcf7-f113-p114-o1).

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Observera att du måste använda ID:t som genererades på din egen webbplats, annars fungerar inte CSS:en. Eftersom detta ID inkluderar det specifika sid-ID:t (som p114), om du flyttar detta kontaktformulär till en annan sida senare, måste du uppdatera din CSS med det nya ID:t.

Du kan nu upprepa denna process för varje formulär du vill anpassa, och ersätta ID:t med det som genererats för det specifika formuläret.

Stilformulär baserat på inlämningsstatus

Contact Form 7 lägger automatiskt till CSS-klasser till ditt formulär baserat på användarinteraktioner, vilket gör att du kan styla framgångsmeddelanden, felstatusar och laddningsstatusar olika.

Här är statusklasserna som Contact Form 7 tillämpar:

• .wpcf7-init — Initial status (före användarinteraktion)
• .wpcf7-sent — Formuläret skickades framgångsrikt
• .wpcf7-failed — Inlämning misslyckades (serverfel)
• .wpcf7-invalid — Formuläret har valideringsfel
• .wpcf7-spam — Inlämning flaggad som spam
• .wpcf7-aborted — Inlämning avbruten av användaren

Exempel: Styla en lyckad formulärinlämning med en grön kant:

div.wpcf7.wpcf7-sent {
    border: 3px solid #4caf50;
    background-color: #e8f5e9;
    padding: 20px;
}

Exempel: Styla valideringsfel med en röd kant:

div.wpcf7.wpcf7-invalid {
    border: 3px solid #f44336;
    background-color: #ffebee;
}

Exempel: Lägg till en subtil laddningsindikator:

div.wpcf7.wpcf7 form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

Dessa statusklasser låter dig ge tydlig visuell feedback till användarna, vilket förbättrar formulärets användbarhet och användarupplevelse.

Metod 2: Styla Contact Form 7-formulär med CSS Hero

Ett enklare sätt att ändra stilen på Contact Form 7-formulär är att använda CSS Hero. Det låter dig redigera dina formulär utan att skriva någon CSS.

Vi har testat den här pluginen för att se om den är bra. Läs allt om den i vår kompletta recension av CSS Hero.

Eftersom CSS Hero är en premium-plugin måste du först skapa ett CSS Hero-konto på deras webbplats. Klicka bara på knappen ‘Skaffa den nu’, välj en plan och slutför köpet.

När det är gjort får du ditt CSS Hero-kontopanel, där du kan hitta ditt plugins zip-fil och licensnyckel.

Du kan nu installera och aktivera CSS Hero-pluginet på din webbplats. Gå till Plugins » Lägg till nytt plugin i ditt WordPress adminområde.

Du kan sedan klicka på knappen 'Upload Plugin' för att öppna filuppladdaren.

Därefter klickar du bara på 'Choose File' och väljer pluginets .zip-fil.

När den är uppladdad kan du klicka på knappen ‘Installera nu’ och sedan ‘Aktivera’ när den visas. För detaljer, se vår guide om hur man installerar en WordPress-plugin.

Efter aktivering kan du besöka sidan som innehåller ditt formulär på din live-webbplats. Du kommer att se ett alternativ 'Customize with CSS Hero' i adminverktygsfältet högst upp.

CSS Hero erbjuder ett enkelt gränssnitt med pek-och-klicka för att redigera CSS utan att skriva någon kod.

Med hjälp av pluginen kan du klicka på vilket fält, rubrik eller andra element som helst i ditt formulär och redigera bakgrundsfärgen, teckensnitt, ramar, marginaler och mycket mer.

När du har anpassat ditt formulär klickar du helt enkelt på knappen 'Spara & Publicera' längst ner.

Bonustips 💡: Ett kodfritt sätt att styla WordPress-formulär

Om CSS inte är din grej finns det ett mycket enklare sätt att skapa snygga formulär på några minuter: WPForms. Medan Contact Form 7 kräver CSS-kunskaper för att anpassa, ger WPForms dig professionellt utseende formulär direkt ur lådan utan någon kodning krävs.

Varför WPForms-användare älskar det (mer än Contact Form 7)

WPForms används av över 6 miljoner webbplatser och rankas konsekvent som enklare att använda än Contact Form 7. Här är varför:

• 5-minuters formulärskapande: Riktiga användare rapporterar att de skapar sitt första professionella formulär på under 5 minuter med dra-och-släpp-byggaren. Ingen inlärningskurva för CSS krävs.
• 2 100+ förbyggda mallar: Välj bland tusentals färdiga formulärmallar för kontaktformulär, undersökningar, registreringar, betalningar och mer. Välj bara en och anpassa.
• AI-driven formulärbyggare: Beskriv ditt formulär på enkel svenska, till exempel "Jag behöver ett formulär för konferensregistrering med val av måltider", så genererar WPForms AI det omedelbart.
• Professionell design utan designkunskaper: Formulär ser rena och polerade ut på din webbplats automatiskt och matchar modern webbdesign-standarder utan manuellt stilarbete.
• Enastående support: När du behöver hjälp får du snabba, experthjälp från WPForms-teamet, till skillnad från att förlita dig på community-forum för gratis plugins.

Hur man stylar ett formulär i WPForms

När du skapar ditt kontaktformulär, gå till sektionen Inställningar » Teman inuti WPForms dra-och-släpp-byggare.

Väl inne väljer du bland 40+ vackra, fördesignade teman för att omedelbart matcha din webbplats design.

Dessa teman är helt anpassningsbara. Du kan:

• Justera fältstorlek, kanter och färger
• Justera etikettfonter, underetiketter och felmeddelanden
• Styla inlämningsknappen så att den matchar ditt varumärke

Så här kan det se ut på din skärm:

Alternativt kan du tillämpa ett WPForms-tema från WordPress blockredigerare.

Efter att ha lagt till ditt formulär på en sida, öppna inställningspanelen för blocket till höger och rulla ner till avsnittet 'Teman'. Du hittar då WPForms inbyggda formulärteman, samma lista som den inuti formulärbyggaren.

Du hittar också anpassningsalternativ för formulärfält, etikett, knapp, behållare och bakgrund.

För steg-för-steg-instruktioner, se vår guide om hur man anpassar och stylar WordPress-formulär.

Slutsatsen: Om du vill hoppa över CSS-handledningen och få professionella formulär live idag, är WPForms ditt bästa val. Det sparar timmar av stilarbete och ger resultat som ser ut som om en designer har byggt dem.

FAQ: Stylning av Contact Form 7 i WordPress

Om du precis har börjat med Contact Form 7 eller vill finjustera din design, kommer dessa snabba vanliga frågor att hjälpa dig med de vanligaste stilfrågorna.

Hur stylar jag Contact Form 7:s skicka-knapp?

Du kan styla Contact Form 7:s skicka-knapp med CSS genom att rikta in dig på standardklassen .wpcf7-submit. Lägg sedan till dina egna stilar under Utseende » Anpassa » Ytterligare CSS.

Hur konfigurerar jag Contact Form 7 i WordPress?

För att konfigurera Contact Form 7 kan du öppna ditt formulär, gå till fliken 'E-post', ange adressen 'Till' (dit meddelanden ska skickas) och se till att e-posttaggarna matchar dina formulärfält.

Är Contact Form 7 gratis att använda?

Ja, Contact Form 7 är helt gratis att ladda ner och använda från den officiella WordPress.org plugin-katalogen. Kärnpluginet kostar ingenting, även om vissa valfria tredjeparts-tillägg eller integrationer kan vara betalda.

Är Kontaktformulär 7 bra?

Contact Form 7 är ett funktionellt, allmänt använt alternativ om du vill ha en gratis och flexibel formulärplugin och inte har något emot en lite mer teknisk installation.

Det är kraftfullt i kombination med anpassad HTML och CSS, men det erbjuder ingen visuell dra-och-släpp-byggare, så ändringar i stil och layout kräver ofta redigering av kod eller användning av ytterligare verktyg.

Kan jag lägga Contact Form 7 i Canva för redigering?

Nej, du kan inte redigera ett Contact Form 7-formulär inuti Canva eftersom Contact Form 7 är en WordPress-plugin och behöver en WordPress-miljö för att fungera. Du kan dock designa utseendet på ditt formulär i Canva som en mockup och sedan återskapa den designen i WordPress.

Ytterligare resurser för anpassning av WordPress-formulär

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du stylar Contact Form 7-formulär i WordPress.

Du kanske också vill se våra andra hjälpsamma guider om:

• Hur man lägger till bildval i WordPress-formulär
• Hur man lägger till automatisk komplettering för adressfält i WordPress
• Tips för att skapa mer interaktiva formulär i WordPress
• Använda villkorlig logik i WordPress-formulär
• Ultimativ guide till att använda WordPress-formulär

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.