Hogyan lehet a Contact Form 7 űrlapokat CSS-sel formázni WordPressben
Szeretné, ha a WordPress űrlapjai ugyanolyan élesek lennének, mint a weboldala többi része? A Contact Form 7 segítségével teljes mértékben irányíthatja az űrlap megjelenését CSS használatával. Ez az útmutató lépésről lépésre bemutatja, hogyan szabhatja testre a Contact Form 7 űrlapokat, így egységes, márkázott élményt teremthet látogatói számára.
Miért érdemes a Contact Form 7 űrlapokat formázni?
A Contact Form 7 az egyik legnépszerűbb WordPress bővítmény űrlapok készítéséhez – de az alapértelmezett megjelenése egyszerű. Az egyedi stílusozás a klasszikus WordPress témákban lehetővé teszi, hogy:
Igazítsa az űrlapot a weboldal arculatához
Használhatóság és akadálymentesség javítása
Tegye az űrlapokat hívogatóbbá és professzionálisabbá
1. lépés: Azonosítsa az űrlap CSS szelektorait
Mielőtt elkezdené a stílusozást, tudnia kell, mely CSS szelektorok célozzák meg az űrlap elemeit.
Minden Contact Form 7 űrlap egyedi osztályba van csomagolva: .wpcf7
Az egyes elemek, például a beviteli mezők, szövegterületek és beküldés gombok szabványos HTML tageket használnak
2. lépés: Egyedi CSS hozzáadása a WordPress oldalához
Két fő módon adhat hozzá CSS-t:
A Testreszabó használatával:
Lépjen a Megjelenés > Testreszabás > További CSS menüpontra, majd illessze be a stílusokat.
MEGJEGYZÉS: A fejlettebb testreszabásokhoz adja hozzá CSS-ét a gyermek témája style.css fájljához.
3. lépés: Írja meg saját CSS-ét
Íme néhány gyakori példa a kezdéshez, a „text” és „submit” űrlap elemeket használva példaként:
Minden Contact Form 7 űrlap stílusozása
.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;
}
A CSS-ben található pszeudoosztályok, mint például a :hover, lehetővé teszik az elemek állapot vagy felhasználói interakció szerinti stílusozását. Például a :hover pszeudoosztály akkor alkalmaz stílust, amikor a felhasználó az egérmutatót egy gomb vagy mező fölé viszi. Ezt gyakran használják a gombok kiemelésére vagy színük megváltoztatására, amikor föléjük viszik az egeret, így az űrlapok interaktívabbá és látványosabbá válnak. Egyéb hasznos pszeudoosztályok: :focus (amikor egy mező aktív) és :active (amikor egy elemre kattintanak). A pszeudoosztályok használata javítja a felhasználói élményt azáltal, hogy azonnali visszajelzést ad, amikor a látogatók az űrlappal lépnek interakcióba.
Egy adott űrlap célzása
Minden űrlapnak egyedi azonosítója van, például #wpcf7-f123-o1. Ezt használhatja csak az adott űrlap stílusozásához:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Cserélje le az f123-o1 értéket a saját űrlapjának azonosítójára. Az egyedi azonosítót úgy találja meg, hogy megnyitja azt az oldalt, ahol a Contact Form 7 űrlap be van ágyazva, jobb egérgombbal kattint az űrlapon, majd kiválasztja az „Elem vizsgálata” lehetőséget a böngészőben. Keresse meg a .wpcf7 osztályú <div> elemet – az azonosító valahogy így fog kinézni: id="wpcf7-f123-o1" a HTML kódban. Ezt az azonosítót használja a CSS szelektorban, hogy csak az adott űrlapot célozza meg.
4. lépés: Használja a Contact Form 7 beépített osztályait
A Contact Form 7 automatikusan osztályokat ad az elemekhez, így még könnyebb a célzás. Például:
.wpcf7-form-control – Minden űrlapvezérlő
.wpcf7-submit – A beküldés gomb
A szerkesztőben saját osztályokat is hozzáadhat az űrlaphoz, így még nagyobb kontrollt kap.
Példa
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
5. lépés: Előnézet és finomhangolás
Miután elmentette a CSS-t, frissítse az oldalt, hogy lássa a változásokat. Használja a böngésző elemvizsgálóját a stílusok valós idejű módosításához, mielőtt bemásolja őket az oldalába. Ne felejtse el törölni a weboldal gyorsítótárát a változtatások után, hogy a frissítések minden látogató számára láthatóak legyenek.
Íme egy példa előtte-utána képekkel egy demó weboldalon, ahol a 3. lépésben bemutatott CSS kóddal kékre színeztük az űrlapmezők keretét.
Gyors tippek a jobb űrlapstílushoz
Legyen akadálymentes: Biztosítson jó színkontrasztot és olvasható betűméreteket
Használjon térközöket: Adjon hozzá kitöltést és margókat a rendezett, átlátható megjelenésért
Emelje ki a hibákat: Stílusozza a hibaüzeneteket jól látható színnel (például pirossal), hogy a felhasználók könnyen javíthassák a hibákat
Tesztelje mobilon is: Győződjön meg róla, hogy az űrlap minden eszközön jól néz ki
Hibaelhárítás
Ha a stílusok nem jelennek meg, próbálja ki ezeket a lépéseket:
Törölje a böngésző és az oldal gyorsítótárát – Néha a gyorsítótárazott fájlok megakadályozzák az új CSS megjelenését. Ha gyorsítótárazó bővítményt vagy menedzselt tárhelyet használ, azokat is törölje.
Ellenőrizze a CSS specifikusságot – Ha a stílusok nem érvényesülnek, próbálja meg specifikusabbá tenni a szelektorokat, hogy felülírják a meglévő stílusokat.
Győződjön meg róla, hogy a megfelelő CSS fájlt vagy szekciót szerkeszti – Ellenőrizze, hogy a kódot a megfelelő helyre írja be, például a További CSS panelbe, a gyermek téma style.css fájljába vagy egy egyedi CSS bővítménybe.
Ellenőrizze a CSS osztályokat elírás vagy hibák miatt – Keressen elírt osztályneveket, felesleges szóközöket vagy véletlenül rossz osztály használatát. Ellenőrizze azt is, hogy a célzott osztály valóban létezik-e az űrlap HTML-jében.
Ellenőrizze a duplikált vagy ütköző osztályokat – Győződjön meg róla, hogy a használt osztály nincs-e már máshol alkalmazva eltérő stílussal, ami felülírhatja a módosításait.
Kövesse az általános legjobb gyakorlatokat – Használjon egyértelmű és következetes osztályneveket, minden CSS szabályt pontosvesszővel zárjon, és mindig zárja le a kódblokkokat kapcsos zárójelekkel (}).
Ha ezeket a gyakori hibákat átnézi a kódjában, biztosíthatja, hogy az egyedi stílusok helyesen jelenjenek meg az oldalán.
Példa: Teljes egyedi CSS egy Contact Form 7 űrlaphoz
.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;
}
Íme egy példa egy olyan űrlapra, amelyet a fenti CSS kóddal stílusozott. Ez a CSS kód több kulcselem megjelenését testreszabja a Contact Form 7 űrlapban. Minden szövegmezőt, e-mail mezőt és szövegterületet céloz, világosszürke keretet, lekerekített sarkokat, kényelmes kitöltést és egységes szélességet adva nekik a letisztult, modern megjelenésért.
A kód a beküldés gombot is stílusozza zöld háttérrel, fehér szöveggel, lekerekített élekkel és vastag, könnyen olvasható betűtípussal. Amikor a felhasználók az egérrel a beküldés gomb fölé viszik a kurzort, a háttér sötétebb zölddé válik, így interaktív visszajelzést ad.
CSS hozzáadása: klasszikus témák vs blokk témák
Ez az útmutató a Contact Form 7 űrlapok CSS-sel történő stílusozásához a WordPress Klasszikus Témákhoz készült. A Klasszikus Témák, mint például a népszerű Astra, a Testreszabót használják, ahol könnyedén hozzáadhat egyedi CSS-t a „További CSS” szekcióban. Így egyszerűen stílusozhatja űrlapjait, és élőben láthatja a változásokat.
Ha azonban az oldala Blokk Témát használ (néha Teljes Oldalszerkesztés vagy FSE témának is nevezik), a folyamat eltérő. A Blokk Témák nem mindig tartalmazzák a Testreszabót vagy az „További CSS” mezőt alapértelmezetten. Ehelyett a Webhely Szerkesztőt használja a dizájn módosításához. Bár beállíthat globális stílusokat a színekhez, tipográfiához és elrendezéshez, az egyedi CSS hozzáadása nem mindig érhető el a felületen.
Mit tegyen, ha Blokk Témát használ
Nyissa meg a WordPress vezérlőpultját, és lépjen a Megjelenés > Szerkesztő (Webhely Szerkesztő) menüpontra.
A Webhely Szerkesztőben keresse meg a Stílusok panelt (a félig árnyékolt kör ikon).
Néhány Blokk Téma már kínál „További CSS” opciót a Stílusok panelen, de ez a témától és a WordPress verziójától függ.
Ha nem lát lehetőséget egyedi CSS hozzáadására, használhat például WPCode bővítményt, hogy webhelyszinten adjon hozzá CSS-t. WPCode kezdőbarát, bármilyen témával működik, így akkor is stílusozhatja űrlapjait, ha a témája nem támogatja közvetlenül a CSS szerkesztését a felületen. Vegye figyelembe, hogy a bővítmény telepítése befolyásolhatja a weboldalán már meglévő űrlapok stílusát is.
További források
A Contact Form 7 űrlapok stílusozása egyszerű, de hatékony módja annak, hogy javítsa weboldala felhasználói élményét. Néhány sor CSS-sel elérheti, hogy űrlapjai a márkája szerves részének tűnjenek.