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?
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
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
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
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
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
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.
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).
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.
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.
Asterisk styles
Asterisk styles segít a csillagok színének kiválasztásában az űrlapon.
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.
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.
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.
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.
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.
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.
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.
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.
egy adott mezőt is megtervezhet, amikor az fókuszált.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.