Styling gyönyörű CSS formák WP Fluent Forms ‘ Global Styler

minden online vállalkozás tulajdonosa azt akarja, hogy kapcsolja be a vezet az ügyfelek. A valóságban azonban azt tapasztalják, hogy az emberek rendszeresen látogatják a webhelyet, de nem konvertálnak végfelhasználókká. Ahhoz, hogy a beszélgetés megy, sok online üzletemberek igénybe kapcsolatfelvételi űrlapok. Annak ellenére, hogy hatékony eszköz, sokan eredménytelenül használják a kapcsolatfelvételi űrlapokat. Ha kapcsolatfelvételi űrlapot ad hozzá webhelyéhez anélkül, hogy figyelembe venné annak stílusát és pozicionálását, akkor az inkább rosszat, mint jót tehet. Tehát hogyan készíthet gyönyörű CSS űrlapokat potenciális ügyfelei számára?

Nos, minden szabványos űrlapnak tiszta vizuális struktúrára, az űrlapelemek valódi hierarchiájára és magas funkcionalitására van szüksége, hogy tökéletesen nézzen ki, miközben zökkenőmentesen működik. Van egy csomó form builder plugin, amely segít a gyönyörű formák megtervezésében. Ebben a cikkben a wp Fluent Forms’ Global Styler nevű speciális űrlapkészítő pluginra összpontosítunk a gyönyörű CSS-űrlapok létrehozásában. De mielőtt belemennénk ebbe, dolgozzuk ki, miért elengedhetetlen a kapcsolatfelvételi űrlap kialakítása.

miért szükséges az online űrlapok formázása?

gyönyörű CSS űrlapok, styling kapcsolatfelvételi űrlapok
Ismerje meg a kapcsolatfelvételi űrlapok tervezésének fontosságát

a kapcsolatfelvételi űrlap elengedhetetlen része a webhelyének. A weboldal tervezésekor figyelmen kívül hagyhatja a kapcsolatfelvételi űrlapot, mivel ez az üzlet apró része. De nem hagyhatja figyelmen kívül a hatást, amelyet hagy. Ez a rész segít növelni az online üzleti webhely konverziós arányát. Tehát a kapcsolatfelvételi űrlap létrehozása során teljes figyelmet kell fordítania rá, és meg kell tennie a szükséges lépéseket egy stabil űrlap létrehozásához a webhelyéhez.

ellenkező esetben az űrlap rossz felhasználói élményt nyújthat, megzavarhatja a közönséget, ezáltal csökkentve a konverziós arányt. Lássunk néhány alapvető tippet a jó űrlap létrehozásához a webhelyén.

néhány általános tipp a gyönyörű CSS űrlapok létrehozásához

nos, nincsenek szigorú szabályok a kapcsolatfelvételi űrlapok formázására. Személyre szabhatja az űrlapot, ahogy akarja. De meg kell tartani a szemét néhány alapvető dolgot kell, mint például a kérdés minták szerint formában, mezők, tervezési értelemben, stb. Kérjük, nézze meg a következő részleteket.

tartalmazza a szükséges mezőket

styling forms CSS
adjon hozzá fontos mezőket

online űrlap kitöltése közben gyakran szembesülhet irreleváns vagy nem megfelelő kérdésekkel. Például, ha egy kapcsolatfelvételi űrlap kéri az útlevél számát, amikor az egyáltalán nem kapcsolódik az általuk nyújtott szolgáltatáshoz, akkor nagy valószínűséggel elhagyja ezt az oldalt, nem igaz?

ha viszont az űrlap nem tartalmaz elegendő releváns kérdést, az adatgyűjtés célja továbbra sem egyértelmű a közönség számára. Biztosítania kell azt is, hogy minden szükséges kérdést feltegyen az összes szükséges adat megszerzéséhez. A részletes, de vonzó kapcsolatfelvételi űrlap arra ösztönzi a közönséget, hogy töltse ki.

ilyen helyzetekben úgy kell megszerveznie az űrlapot, hogy ne untassa az embereket. Hozzáadhat egy kis pontosítást az egyes mezőkről, amelyek elnyerik az emberek bizalmát, és a webhelyén maradnak.

tegye felhasználóbaráttá az űrlapot

tervezze meg a felhasználók számára használható űrlapot

a felhasználók akár asztali számítógépeikről, akár bármilyen kézi eszközről bejutnak az űrlapba. Tehát az űrlapnak úgy kell lennie, hogy a felhasználók nehézségek nélkül kitölthessék az űrlapot. Az űrlapot úgy kell berendezni, hogy a felhasználók érezhessék a kitöltés kényelmét.

olyan sok oka van annak, hogy a felhasználók nem találják barátságosnak az űrlapot , például a használat, ami nagyon bosszantó lehet. Ha úgy találja, hogy irritálja magát, miért rontaná el vele a webhelyét? Egy másik tényező, amely elűzi az embereket az űrlap kitöltésétől, trükkös vagy technikai szavak alkalmazása a kérdésekben. Az emberek nem tesznek félre sok időt az űrlap kitöltésére, így ha több időt és erőfeszítést kell fordítaniuk annak megértésére, akkor biztosan visszavonják. Kerülje el ezt a hibát minden áron.

egy másik gyakori hiba a kapcsolatfelvételi űrlapok tervezésénél a túl sok sötét szín és díszes betűtípus használata. Azt gondolhatja, hogy díszíti az űrlapot, hogy jövedelmezőbb legyen, amikor a valóságban a felhasználók ezeket a dolgokat zavarónak találják az online űrlapok kitöltésekor.

Automatikus kitöltés engedélyezése

gyönyörű CSS űrlapok
Automatikus kitöltés engedélyezése

a Google az automatikus kitöltés funkciót kínálja, hogy megkönnyítse az életét. Minimalizálja a fontos területeken előforduló hibák kockázatát. Így, miközben létrehoz egy reszponzív űrlapot CSS, vagy használhatja a make your simple-t, hogy a Google könnyen megértse az űrlapmezőket, vagy bármilyen kiterjesztést használhat az automatikus kitöltés céljára. Ha ilyen típusú rugalmasságot kínál a felhasználóknak, időt takarít meg, és gyorsan kitölthetik a lekérdezéseket.

használjon vonzó cselekvésre ösztönző gombot

kapcsolatfelvételi űrlapok formázása, gyönyörű CSS űrlapok
készítsen vonzó CTA-t

ha formaelemeket formáz, akkor a cselekvésre ösztönző gomb a legszükségesebb része. Ez a központi rész, ahol a felhasználók rákattintanak valamilyen műveletre. Ha zavaró szavakat használ a CTA gombján, az emberek nem fogják megérteni az űrlap célját. Tehát, ha korábban nem figyeltél erre a részre, akkor vissza kell menned és javítanod kell a gombjaidat.

például kapcsolatfelvételi űrlap esetén az olyan egyszerű szavak használata helyett, mint az “ok” vagy a “Küldés”, használja a “lépjen kapcsolatba velünk.”Használja a” Vegye fel a kapcsolatot”, hogy a CTA gombot egy érdeklődés formájában. Ily módon a felhasználók könnyen megértik, mit kapnak az űrlap elküldése után.

progress bar alkalmazása

responsive forms CSS
progress bar használata

próbálja meg hozzáadni a folyamatjelző sávot a kapcsolatfelvételi űrlaphoz, amikor egy hosszú kérdéslistát tartalmazó űrlapot hoz létre. Bár nincs közvetlen hatása az űrlap konverziós arányának növelésére, növeli a felhasználói élményt. A felhasználók láthatják az űrlap kitöltésének folyamatát. Ily módon csökken az űrlap elhagyásának esélye.

nos, manapság olyan sok űrlapkészítő plugin található a WordPress-ben, amelyek segítenek a gyönyörű CSS-űrlapok stílusában a webhelyén. Ma látni fogjuk, hogyan lehet létrehozni reagáló formában CSS segítségével WP Fluent Forms. Tehát merüljünk bele a témába.

stílus gyönyörű CSS formák használata WP Fluent Forms’ global styler

WP Fluent Forms célja oly módon, hogy képes létrehozni a különböző jó megjelenésű formák a honlapon. Ennek ellenére, ha olyan űrlapot szeretne készíteni, amely megfelel a webhely stílusának, használhatja a wp Fluent Forms globális styler funkcióját.

a globális styler lehetővé teszi, hogy egyszerűen stílus bármilyen design a forma nélkül egyetlen kódolási rendszer. Ez a cikk segít abban, hogy néhány kattintással gyönyörű CSS űrlapokat készítsen a Fluent Forms elemek és elrendezések használatával a Global Styler segítségével.

az űrlap létrehozása után kattintson az előnézet és a tervezés elemre a szerkesztő jobb felső sarkában. Megnyílik egy előnézeti ablak, és most már tetszés szerint formázhatja az űrlapelemeket.

gyönyörű CSS formák

a tervezési rész két tartóval rendelkezik, az Általános Tab és a Misc Tab néven. Az Általános fül az egyes űrlapok sablonjának formázására szolgál. Bármelyik modell közül választhat, mint például az alapértelmezett, a Modern, a klasszikus, a Bootstrap stílus és az egyéni (speciális Testreszabás).

reszponzív forma CSS, styling kapcsolatfelvételi űrlapok

válasszon a sablonok közül

választhat az előre meghatározott sablonok közül. Ha kiválaszt egy modellt az előre meghatározott listából, továbbra is testreszabhatja az űrlap globális stílusait. Például a Bootstrap stílust választottam sablonként. Az űrlap testreszabásához lépjen a Misc fülre, amely az Általános fül közelében található. A fül olyan lesz, mint az alábbi kép.

kapcsolatfelvételi űrlapok formázása, űrlapkészítő

itt láthatók a megnevezett stylerek, Konténerstílusok, Csillagstílusok, Inline Hibaüzenet-stílusok, a sikeres Üzenetstílusok elküldése után, valamint a hibaüzenet-stílusok elküldése után.

Konténerstílusok

ha rákattint a Konténerstílusokra, megnyílik egy legördülő menü, amely számos testreszabható mezőt tartalmaz. Itt látni fogja a következő mezőket:, háttérszín, Szín, űrlap Margó, űrlap kitöltés, szegély típusa, szegély színe, Szegélyszélesség és szegély-sugár. Megadhatja az űrlap színét, az űrlap szélességét, a szegély szélességét és a kívánt módon színezheti ezeket a mezőket. A jobb megértés érdekében nézze meg az alábbi képernyőképet.

plugin, WP Fluent Forms

Asterisk styles

Asterisk styles segít a csillagok színének kiválasztásában az űrlapon.

WP Fluent Forms, form builder

Inline hibaüzenet stílusok

válassza ki a hibaüzenetek színét az Inline Hibaüzenet stílusokkal. Ezenkívül állítsa be a betűméretet, a Betűsúlyokat, a Szövegdekorációt, a Vonalmagasságot és a betűközt. Nézze meg az alábbi képernyőképet.

reszponzív űrlap CSS

sikeres üzenetstílusok elküldése után

ebben a beállításban személyre szabhatja az űrlapot a szövegek elküldése után. Tesztelési célokra, töltse ki az űrlapot, majd kattintson a Küldés gombra a Beküldés utáni szöveg megtekintéséhez. Most kattintson a ” sikeres üzenetstílusok elküldése után.”Itt kiválaszthatja a szöveg színét, a szöveg hátterét, a tipográfiát és a Box-árnyékot. A tipográfia mezőben átméretezheti a betűtípusokat, kiválaszthatja a betűtípus-Súly, átalakítás, betűstílus, Szövegdekoráció, Vonalmagasság és betűköz lehetőséget.

stílusformák CSS

a box-shadow mező lehetővé teszi az árnyék testreszabását a “szövegdoboz benyújtása után” terület mögött, ha akarja. Vessen egy pillantást az alábbi képernyőképre.

Stílus kapcsolatfelvételi űrlapok

elküldés után hibaüzenet stílusok

testreszabhatja az elküldés után hibaüzenet stílusokat is. Ez a stílusbeállítás hasonló a sikeres üzenet elküldése utáni stílusokhoz. Állítsa be a betűtípus színét, a háttér színét. A tipográfia tartalmazza a betűméretet, a Betűsúlyokat, a Szövegdekorációt, a Vonalmagasságot és a betűközt. A tipográfia mező után továbbléphet a dobozba árnyékok a siker utáni üzenet stílusához.

gyönyörű CSS űrlapok

egyéni (speciális Testreszabás)

az Általános lapon, ha az egyéni (speciális Testreszabás) sablont választja, megtervezheti a beviteli mezőket, amire szüksége van. Az új ablak úgy néz ki, mint az alábbi képernyőkép.

styling forms CSS

Label Styles

amikor rákattint a Label Styles elemre, egy új legördülő menü nyílik meg a színnel és a tipográfiával. Megváltoztathatja a betű színét, betűméretét, Betűsúlyát, betűstílusát, Szövegdíszítését stb.

plugin, kapcsolatfelvételi űrlap

Input & Textarea

változtassa meg az űrlap háttérszínét és betűszínét a bemenettel és a Textarea-val. Ezenkívül beállíthatja a betűméretet, a betűtípust, a betűközt, a betű súlyát stb. a tipográfiával. A Box-Shadow, akkor is testre az árnyék mögött a doboz területek látható az alábbi képen.

form builder

ha azt szeretnénk, hogy díszíteni a határon, kattintson a “használata egyéni Border Stílus.”Ez segít személyre szabni az űrlapmezők szegélyszínét, Szegélyszélességét, Szegélysugarát.

űrlapkészítő eszköz

egy adott mezőt is megtervezhet, amikor az fókuszált.

form builder plugin

helyőrző stílusok

válassza ki a beviteli mezők helyőrzőjének színét, hogy aláírási megjelenést kapjon. Helyezze el a tipográfiát a betűmérettel, a Betűsúlyokkal, a Szövegdekorációval, a Vonalmagassággal és a Betűközökkel együtt. Vessen egy pillantást az alábbi képernyőképre.

kapcsolatfelvételi űrlapok formázása

Szakasztörési stílus

ha Szakasztörési mezőt szeretne hozzáadni az űrlaphoz, lépjen a felső sáv mezők szerkesztése lehetőségeihez. Kattintson az opcióra, és megkapja a szakasztörést az űrlap beviteli mezők speciális mezőin.

styling forms CSS, gyönyörű CSS forms

most ismét LÉPJEN az előnézet és a tervezés lehetőségre. Itt egy új elemet fog látni az űrlapelemek listájához, amelyet Szakasztörési stílusnak neveznek. Ez a mező két részből áll: Label Styling és Description Styling.

a címke stílusa részben szerkesztheti a mező címkéjét betűmérettel, betűszínnel, Szövegdekorációval, Betűközökkel stb. Támogatja a kitöltési és Margó szakaszokat a szöveges címke elhelyezéséhez.

plugin, kapcsolatfelvételi űrlap

másrészt a Description Styling rész segít a Szakasztörés mező leírási területének szövegeinek testreszabásában a címke stílusának azonos szerkesztési lehetőségeivel. Itt található a Beállítás előnézete.

WP Fluent Forms, plugin

Grid table style

most, ha rácstáblát is hozzáad az űrlap beviteli mezőiből, akkor egy újabb új szakasz nyílik meg a wp Fluent Forms egyéni CSS elemében. A Rácsasztal stílusának nevezik. A styler két füllel, asztali fejjel és asztali testtel rendelkezik.

asztali fej segít megtervezni a táblázat fejlécének háttérszínét. Itt egy tipográfiai lehetőséget is lát.

styling kapcsolatfelvételi űrlapok

a táblázat törzse a táblázat testének testreszabásáról szól, például betűszín, betűméret, betűtípus, típus, háttérszín stb.

stílusformák CSS

rádió és checkbox stílus

engedélyezze az intelligens felhasználói felületet a rádió és a Checkbox Stílus szerkesztési lehetőségeinek megkereséséhez. Itt két lehetőséget talál a rádió és a jelölőnégyzet testreszabására. Adja meg a jelölőnégyzetek szegélyszínét vagy háttérszínét.

kapcsolatfelvételi űrlap
kapcsolat

Küldés gomb stílus

a wp Fluent Forms lehetővé teszi az űrlap Küldés gombjának stílusát is. Kattintson a Küldés gombra stílus, és egy új legördülő menü jön két lehetőség. Az egyik normális, a másik pedig lebeg.

a normál szakaszban beállíthatja a gomb hátterét és betűszínét a gomb helyzetének beállításához. Tipográfia is van a betűméret, a betűtípus betűközének stb. Ezenkívül beállíthatja a doboz árnyékait kifejezetten ehhez a gombhoz. Ha engedélyezi az egyéni szegélystílus használatát, kiválaszthatja a szegély típusát, a szegély színét, a szegély szélességét, a szegély sugarát stb. a Küldés gombra.

CSS formák

most nézzük meg a Hover részt. Amikor lebeg a Küldés gomb felett, észrevesz néhány változást a gombon. A hover szakasz arról szól, hogy testreszabhatja az opciót tetszése szerint. Ugyanazokkal a stílusokkal érkezik, mint a többi mező, például a háttérszín, a betűszín, a tipográfia, a doboz árnyékai.

plugin, eszköz, form builder

tehát, ezek néhány utasítást, hogyan lehet stílus szép CSS formák WP Fluent Forms’ Global Styler. Több van, személyre szabhatja a kapcsolatfelvételi űrlapot ezzel a stylerrel.

csomagolás

1 új NT BG

9 új FF logó
5 új ninja logó kezelése

WP Fluent Forms Pro

próbálja ki a wp Fluent Forms-t még ma, és nézze meg saját maga!

ebben a cikkben megpróbáltam részletes képet adni a gyönyörű CSS-űrlapok stílusáról a WP Fluent Forms segítségével. Ez az űrlapkészítő plugin két-három havonta új frissítésekkel áll elő. Van néhány oktatóvideó a wp Fluent Forms globális Styler használatáról. Ez a kapcsolatfelvételi űrlap-készítő plugin nagyon felhasználóbarát és költséghatékony.

remélem, hasznosnak találja ezt a cikket, és élvezni fogja a wp Fluent Forms globális Styler kiegészítőit és elemeit.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.

Back to Top