Contact Form 7 widget: űrlap stílusozása CSS nélkül

A Contact Form 7 saját stílusbeállítást nem ad: az űrlap azt veszi át, amit a sablonod a mezőkkel csinál. A Contact Form 7 widget ezt az Elementor paneljébe hozza. Kiválasztasz egy meglévő űrlapot, és a Stílus lapon átszabod a beviteli mezőit, az üzenetmezőt, a jelölőnégyzeteket és a rádiógombokat, a fájlfeltöltő gombot és a küldés gombot. CSS-t nem kell írnod.

A widget az ingyenes bővítményben van, a Pro-hoz nem kell. Az Elementor ingyenes változata is elég hozzá.

Előkészületek

• A Contact Form 7 bővítmény legyen telepítve és aktív. A widget csak addig létezik, amíg ez a bővítmény aktív: ha kikapcsolod, a widget az Elementorból is eltűnik.
• Legyen legalább egy űrlap a Kapcsolat → Új hozzáadása oldalon. A widget nem hoz létre űrlapot, csak a meglévők közül választ.
• Kapcsold be a widgetet: The Plus Addons → Widgets, keress rá a Contact Form 7 szóra, és kapcsold be a kapcsolóját.

A widget hozzáadása és az űrlap kiválasztása

1. Szerkeszd az oldalt Elementorral.
2. Húzd a Contact Form 7 widgetet a vászonra.
3. A Content szakaszban a Select Form listából válaszd ki az űrlapot.
4. Az Alignment mezővel balra, középre vagy jobbra igazíthatod az űrlapot. Ez eszközönként (asztali gép, tablet, mobil) külön állítható.

https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor

A képen a Tartalom lap látszik: az űrlap kiválasztása és az igazítás.

Az űrlap rögtön megjelenik a vásznon, de egyszerűbbnek látszik, mint a szerkesztőn kívül: a widget eltávolítja a Contact Form 7 által örökölt mezőszegélyeket és háttereket, hogy te építhesd fel a megjelenést.

https://minta-bolt.hu/kf4-cf7/

A képen jól látszik, hogy a beállítás nélküli űrlap mezői láthatatlanok. Ez a kiinduló állapot, nem hiba. Legalább a beviteli mezőket stílusozd meg, különben a látogató nem látja, hová írhat.

A Stílus lap szakaszai

A panel szakaszainak a neve angolul jelenik meg.

Szakasz	Mit stílusoz
Input Fields Styling	Az egysoros mezők: szöveg, e-mail, URL, telefon, szám, dátum és a legördülő lista
Text Area (Message) Field	A többsoros üzenetmező
CheckBox/Radio Field	A jelölőnégyzetek és a rádiógombok
File/Upload Field	A fájlfeltöltő gomb
Outer(Field) Styling	A mezőket körülvevő sor
Submit/Send Button	A küldés gomb
Response Message	A siker-, hiba- és érvényesítési üzenetek az űrlap alatt
Ajax Response	A betöltésjelző, amíg az űrlap küldése tart
On Scroll View Animation	Belépő animáció az egész űrlapra, amikor a látogató odagörget

Beviteli mezők

Az Input Fields Styling minden egysoros mezőt lefed. A beállítások:

• Padding és Margin, eszközönként külön.
• Tipográfia, Text Color és Placeholder Color.
• Háttér: egyszínű, színátmenetes vagy kép.
• Border Options: előbb kapcsold be a Box Border kapcsolót. A Border Style, a Border Width és a Border Color csak bekapcsolt kapcsolónál hat. A Border Radius a kapcsolótól függetlenül működik.
• Normal és Focus fül: a Focus a mező állapota, amíg a látogató beleír, ott külön színt és lekerekítést adhatsz.
• Dobozárnyék, szintén Normal és Focus állapotra.

Üzenetmező

A Text Area (Message) Field külön szakasz, mert az üzenetmezőnek saját magassága és átméretezése van. A beállításai a beviteli mezőkéivel egyeznek: padding, margin, szövegszín, helyőrző színe, háttér, Box Border stílussal, szélességgel és színnel, lekerekítés, Normal és Focus fül. A mező magasságát is itt állítod.

Az Input Fields Styling nem hat az üzenetmezőre. Ha az üzenetmező kilóg a sorból, ennek ez az oka.

Jelölőnégyzetek és rádiógombok

A Contact Form 7 a böngészőre bízza ezeket, ezért Windowson, macOS-en és Androidon másképp néznek ki. A widget elrejti a böngésző saját vezérlőjét, és a helyére saját elemet rajzol, így mindenhol egyformák.

A CheckBox/Radio Field két fülből áll, Check Box és Radio Button, mindkettőn ugyanazok a beállítások:

• Tipográfia és Icon Size.
• Checked Color és Checked Bg Color: a pipa és a doboza kijelölt állapotban.
• UnChecked Color és UnChecked Bg Color: ugyanez kijelöletlen állapotban.
• Check Box Position: a doboz a felirat előtt vagy után áll. Az alapérték After (után).
• Border Options: Box Border, Border Style, Border Color és Border Radius.

https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor

A képen a Check Box fül beállításai láthatók. A Box Border alapból ki van kapcsolva.

Fájlfeltöltő gomb

A Contact Form 7 fájlmezője a böngésző saját fájlválasztója, amit CSS-sel nem lehet megbízhatóan formázni. A widget ezt teljesen elrejti, és a helyére egy gombot rajzol, amit a File/Upload Field szakaszban stílusozol: Padding, tipográfia, Min Height Field, Text Color, Icon Color, Alignment, Style, háttér és szegélybeállítások (Box Border, Border Radius).

https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor

A képen a fájlfeltöltő gomb beállításai látszanak. A gomb felirata a nyilvános oldalon angolul marad („Choose a file…”), mert a widget így írja ki.

Küldés gomb

A Submit/Send Button szakaszban szélességet, paddingot, margót, tipográfiát, szövegszínt, hátteret (szín, színátmenet vagy kép), szegélyt és lekerekítést állíthatsz, Normal és Hover fülön külön.

Egyéb szakaszok

Szakasz	Mit állít	Alapérték
Extra Options a Tartalom lapon (Outer Section Styling)	Melyik elemet célozza az Outer(Field) Styling: az űrlap saját címkesorait, vagy a te .tp-cf7-outer osztályodat	Default Label Field
Outer(Field) Styling	A mezőt körülvevő sor: padding, margin, háttér, szegély	nincs beállítva
Response Message	A siker-, hiba- és érvényesítési üzenetek	nincs beállítva
Ajax Response	A betöltésjelző az elküldés alatt	nincs beállítva
On Scroll View Animation	Belépő animáció az egész űrlapra	ki

Az eredmény

Az alábbi űrlap a beviteli mezők, az üzenetmező, a választómezők, a fájlgomb és a küldés gomb stílusozása után készült, egyetlen sor egyedi CSS nélkül.

https://minta-bolt.hu/kf4-cf7-stilus/

A képen a mezők lekerekített, barna szegélyt kaptak, a választómezők és a fájlgomb a widget saját elemei.

Működés

• Minden beállítás csak az adott widgetpéldányra érvényes. Ha ugyanazt az űrlapot két widgettel ágyazod be, mindkettőt máshogy stílusozhatod.
• A widget nem nyúl az űrlaphoz: a mezők, az érvényesítés, a levelezési beállítások és a spamvédelem a Kapcsolat menüben maradnak.
• A padding, a margin, a tipográfia, az igazítás és a szegélyszélesség eszközönként külön állítható.
• A választómezőket és a fájlgombot a widget újrarajzolja, ezért minden böngészőben egyformák.

Korlátok

• Stílusbeállítás nélkül a widget eltávolítja a mezők szegélyét és hátterét, tehát a beviteli mezők láthatatlanok. Közzététel előtt legalább az Input Fields Styling szakaszt állítsd be.
• A kijelölt jelölőnégyzet pipája Font Awesome-ikon, amit a The Plus Addons maga nem tölt be. Ha az oldalon nincs más ikon, a pipa üres négyzetként jelenhet meg. Bármelyik Elementor ikon widget az oldalon betölti a betűkészletet, és ez megoldja.
• A Border Style, a Border Width és a Border Color addig nem hat, amíg a Box Border ki van kapcsolva. Ez minden ilyen szakaszban igaz.
• A widget azt stílusozza, amit a Contact Form 7 maga rajzol. Harmadik féltől származó Contact Form 7 kiegészítők elemeit nem fedi le.

Hibaelhárítás

• A widget nincs a panelen. Nézd meg, hogy a Contact Form 7 aktív-e, majd hogy a Contact Form 7 kapcsoló be van-e kapcsolva a The Plus Addons → Widgets oldalon. A widget csak aktív űrlapbővítménnyel regisztrálódik.
• A Select Form lista üres. Még nincs űrlap. Hozz létre egyet a Kapcsolat → Új hozzáadása oldalon, és töltsd újra az Elementor szerkesztőjét.
• A szegély színe nem változik. Kapcsold be a Box Border kapcsolót abban a szakaszban.
• A beviteli mezőknek nincs látható széle. Ez az alapállapot. Adj nekik hátteret, vagy kapcsold be a Box Border kapcsolót az Input Fields Styling alatt.
• A pipa helyén üres négyzet van. A Font Awesome nincs betöltve az oldalon. Tegyél az oldalra bármelyik Elementor ikont, vagy töltsd be a Font Awesome-ot a sablonodból.