A CSS 7-es kapcsolatfelvételi űrlap beállítása

Tartalom

irányok
tippek
figyelmeztetés
Amire szüksége van

A 7-es formanyomtatvány egy WordPress közzétételi platform plugin, amely lehetővé teszi a felhasználók számára, hogy gyorsan hozzanak létre egyedi kapcsolati űrlapokat. Bár a nyomtatványok könnyen létrehozhatók és telepíthetők, a mezők minimálisan testre szabhatók, így bármelyik webhelyhez integrálható. Hozzon létre egyéni stílusokat, és hajtsa végre azokat a bővítmény által létrehozott űrlapmezőkben.

irányok

Testreszabja a Contact Form 7 mezők stílusát a CSS használatával (Comstock / Comstock / Getty Images)

Nyissa meg a WordPress téma stíluslapját, és görgessen a végéhez. Hozzon létre egy megjegyzett területet, így könnyen megtalálhatja a kódját. példa:

/ Itt kezdődik az egyéni CF7 kódom /
A mezők és szövegterületek stílusainak testreszabása. Ehhez hozzon létre egy bejegyzést a stíluslapon. példa:

.wpcf7 bemenet [type = "text"], .wpcf7 areadotexto {}

Adjon hozzá határokat, háttereket, párnázatot és szövegelemeket. Példák:

.wpcf7 bemenet [type = "text"] {háttér: nincs ismétlődő görgetés 0 0 # F9F9F9; határ: 1px szilárd # 8E9BA9; párnázás: 5px; szélesség: 200px; }
A legördülő és a kiválasztási menük stílusainak testreszabása.Ehhez hozzon létre egy bejegyzést a stíluslapon. példa:

.wpcf7 bemenet [type = "select"] {

}

A szövegmezőkhez hasonló kiválasztási mezők testreszabása. A kiválasztási mezők nem olyan szélesek, mint a szövegmezők, így néhány extra képpontot adjon a szélességéhez. példa:

.wpcf7 bemenet [type = "selected"] {háttér: nincs ismétlődő görgetés 0 0 # F9F9F9; határ: 1px szilárd # 8E9BA9; párnázás: 5px; szélesség: 210px; }
Testreszabhatja az elküldési gomb stílusát. Ehhez hozzon létre egy bejegyzést a stíluslapon. példa:

.wpcf7 bemenet [type = "benyújtás"] {

}

Testreszabhatja a küldés gombot, hogy kiegészítse a webhely megjelenését és érzetét (továbbra is kiemelkedjen a háttérben). Példa egy piros küldési gombra:

.wpcf7 bemenet [type = "benyújtás"] {háttérszín: # 990000; határ: 4px szilárd # B34040; szín: #FFFFFF; }
Mentse el a változásokat a stíluslapon, és adja át az adatokat a téma mappába.

tippek

Próbálja ki a különböző stílusokat és a különböző szegélyszíneket.
Csináljon egy új ellenőrzést a Firefox, a Safari és az Internet Explorer űrlapjain, mert minden böngésző kissé eltérő beviteli mezőket biztosít.

figyelmeztetés

Adjon hozzá egyéni CSS-t a téma stíluslapjához, és ne a bővítménystíluslapot. Ha ezt megteszi, a bővítmény frissítésekor a mappában lévő fájlok testreszabása elveszhet.