V zaznamke
StikiO spletnem mestu

Najboljši vtičniki WordPress za ustvarjanje kontaktnih obrazcev. WordPress Form Maker - brezplačen vtičnik za gradnjo odzivnih oblik katere koli zahtevnosti. Kontaktni obrazec za wordpress v ruščini

Kontaktni obrazec na spletnem mestu uporabnikom pomaga enostavno komunicirati s spletnimi skrbniki, ne da bi uporabljali njihovo mapo »Prejeto«. Sodobna stran kontaktnega obrazca dejansko deluje kot most med lastnikom spletnega mesta in uporabniki spletnega mesta, kar zagotavlja boljšo uporabniško izkušnjo.

Stran za stik je uporabila samo naslov E-naslov, naslov, telefonsko številko ipd., ki so jih morali uporabniki kopirati ali shraniti, da so stopili v stik z lastnikom spletne strani. Ta tradicionalen način se zdi res neprijeten za uporabnike, vendar priložnost za pošiljatelje neželene pošte, ki lahko škodijo vašim dragocenim podatkim spletnega mesta. Tega ne moremo tvegati!

Najboljši graditelji obrazcev WordPress 2018

Vtičniki, ki so na tem seznamu, se pogosto uporabljajo, redno prejemajo posodobitve in so prejeli odlične povratne informacije od skupnosti WordPress. Prav tako niso navedeni v določenem vrstnem redu, saj vsi ponujajo številne ugodnosti, ki lahko ustrezajo vašim posebnim potrebam ali pa ne. Začnimo!

Cena: Brezplačno


Kontaktni obrazec 7 je priljubljen, preprost in prilagodljiv. Imate možnost ustvarjanja več obrazcev, ki jih lahko prilagodite tudi s preprostimi oznakami. Možnosti za konfiguriranje poštnih nastavitev in spreminjanje privzetega sporočila lahko najdete v podoknu plošč po meri.

Čeprav so se nekateri pritoževali nad posodobitvami, ki povzročajo napake, je splošno soglasje, da je to preprost vtičnik za ustvarjanje vseh preprostih obrazcev.

Ključne funkcije:

  • Enostavno prilagajanje.
  • Privzeta sporočila, ki jih je mogoče prilagoditi.
  • Preprosto definirane nastavitve pošte.

WPForms

Cena: Brezplačno


WPForms vam omogoča ustvarjanje čistih, modernih obrazcev v intuitivnem vmesniku povleci in spusti. Izbirate lahko tudi med številnimi vnaprej izdelanimi predlogami, vključno z večstranskimi obrazci za registracijo in obrazci po meri.

Sistem za upravljanje vložkov vam omogoča ogled vseh vaših rezultatov na enem mestu v poenostavljenem delovnem toku. Poleg tega lahko z uporabo pametne pogojne logike WPForms ustvarite visoko zmogljive obrazce in vključite nalaganje datotek.

Dodatki, kot so integracije MailChimp, AWeber in PayPal, so na voljo v višjih načrtih WPForms.

Ključne funkcije:

  • Takojšnja obvestila.
  • Optimiziran vhodni nadzorni sistem.
  • Pametna pogojna logika.

Ninja oblike

Cena: Brezplačno


Ninja Forms je odličen vtičnik za začetnike in razvijalce. Za začetnike vmesnik povleci in spusti omogoča hitro in enostavno ustvarjanje poljubne oblike. Za razvijalce ima Ninja Forms številne filtre in predloge polj po meri za prilagoditev na visoki ravni.

Osnovna oblika ne vključuje pogojne logike, ki je za mnoge uporabnike zelo zaželena lastnost. kljub temu to je na voljo kot dodatek.

Ključne funkcije:

  • Intuitiven uporabniški vmesnik.
  • Skoraj neomejeno število obrazcev, polj in pogledov.
  • Možnosti vsiljevanja zahtevanih polj in popravljanja oblikovanja podatkov.

Izdelovalec obrazcev

Cena: Brezplačno


Izdelovalec obrazcev ponuja vmesnik povleci in spusti, ki je enostaven za uporabo, ki omogoča ustvarjanje preprostih kontaktnih obrazcev. Osnovni brezplačni vtičnik ponuja funkcije, kot so večstranski obrazci, pogojna logika in prilagodljiva e-poštna sporočila.

Poleg tega obstajajo številne vrhunske funkcije (kot je integracija PayPal) in veliko plačljivih dodatkov, ki vam omogočajo, da ta vtičnik prilagodite svojim potrebam, kot so integracije MailChimp in Dropbox ter pogojno pošiljanje pošte.

Ključne funkcije:

  • 41 prilagodljivih tem.
  • Nadzor oddaje obrazca.
  • Večstranski obrazci.

Hiter varen kontaktni obrazec

Za brezplačen vtičnik za kontaktni obrazec je Fast Secure Contact Form precej zanesljiv. V vmesniku povleci in spusti lahko preprosto ustvarjate in urejate obrazce ter dodate ali odstranite poljubno število polj.

Ta vtičnik je odlična možnost, če želite uporabiti svoj obrazec za načrtovanje sestankov. Vključene so možnosti za dodajanje spletnega urnika, naročila za rezervacije in zaračunavanje prek platforme vCita.

Ključne funkcije:

  • Enostavno prilagodljivo urejanje obrazcev.
  • Možnost pošiljanja potrditvenih e-poštnih sporočil.
  • Obiskovalce lahko preusmerite na skoraj kateri koli URL.

Cena: Brezplačno


Z več možnostmi postavitve in 18 vrstami polj vam Visual Form Builder omogoča hitro in enostavno ustvarjanje obrazcev profesionalnega videza. Ta vtičnik je mogoče konfigurirati za pošiljanje zahtev za obrazce več e-poštnih sporočil kot tudi možnost pošiljanja posameznih poštnih potrdil vsakemu uporabniku.

Poleg tega lahko na isto stran ali stran postavite več obrazcev in z enim klikom podvojite obrazce. Visual Form Builder samodejno shrani vnose obrazcev v zbirko podatkov WordPress in vam omogoča upravljanje podatkov neposredno z nadzorne plošče WordPress.

Ključne funkcije:

  • Vmesnik povleci in spusti.
  • Možnost izvoza zapisov v datoteko CSV.
  • Več možnosti za postavitev polj.

Izdelovalec obrazcev

Form Builder vam omogoča ustvarjanje preprostih obrazcev na podlagi ene od 10 privzetih predlog. Če iščete hiter in uporabniku prijazen obrazec, bo glavni vtičnik opravil svoje delo. kljub temu to je slogovno premalo, zato, če vam je estetika pomembna, bi vam morda bolje ustrezala plačana nadgradnja Form Builder.

S premium različico dobite 37 tem, ki temeljijo na različnih barvnih shemah, možnost dodajanja razdelka z vsebino in možnost izvoza poslanih podatkov v format CSV ali XML.

Ključne funkcije:

  • Nastavitve e-pošte za skrbnike in uporabnike.
  • Integracija z Google Zemljevidi.
  • Različne možnosti preusmeritve.

Grozno

Cena: Brezplačno


Izjemne so odlične za hitro in preprosto ustvarjanje obrazci. Možnosti prilagajanja so nekoliko omejene brezplačna različica ponuja pa dovolj za vse vrste enostavna uporaba... Obrazce lahko ustvarite z vgrajenimi predlogami ali začnete iz nič z ustvarjalnikom povleci in spusti in shraniš svoje predloge za nadaljnjo uporabo.

Medtem ko ste v brezplačni različici omejeni na samo sedem vrst polj, premium različica vključuje 15 dodatnih vrst polj. Ponuja tudi več prilagodljivih skrbniških možnosti za ogled, urejanje in brisanje zapisov ter ustvarjanje grafov in statistik na podlagi vaših zbranih podatkov.

Obstajajo tudi številni plačljivi dodatki, kot sta integraciji MailChimp in AWeber.

Ključne funkcije:

  • Vmesnik povleci in spusti.
  • Skoraj neomejena e-poštna obvestila.
  • Uvoz in izvoz obrazca v obliki XML.

Piratske oblike

Cena: Brezplačno


Pirate Forms je še ena brezplačna možnost za ustvarjanje preprostih kontaktnih obrazcev, čeprav ima prednost pred številnimi konkurenti, ko gre za videz in občutek vaših obrazcev. Vendar ni možnosti prilagajanja, vendar je to del predpogoja za vtičnik.

Obrazec je za malo prilagajanja, tako da lahko preprosto odstranite izpolnjen obrazec na svoje spletno mesto s pomočjo kratke kode ali pripomočka. Poleg tega Pirate Forms shranjuje vaše zbrane Kontaktni podatki v zbirki podatkov za enostaven dostop z nadzorne plošče.

Ključne funkcije:

  • E-poštna obvestila.
  • Sposobnost prilagajanja polj, oznak in sporočil.
  • Stiki so shranjeni v bazi podatkov.

Ultimate Form Builder

Cena: Brezplačno


Ultimate Form Builder je Vtičnik WordPress Oblika Premium ustvariti neomejeno prilagodljive kontaktne obrazce. Ta vtičnik ima 10 lepo oblikovanih predlog obrazcev. To je vtičnik, ki je enostaven za uporabo, ki vam omogoča ustvarjanje preprostih in zapletenih kontaktnih obrazcev, ne da bi se dotaknili ene kode.

Ultimate Form Builder podpira podporo v enem in več korakih glede na vaše potrebe. S tem vtičnikom lahko preprosto ustvarite različne vrste kontaktnih obrazcev, kot so Kontaktirajte nas, Izbira, Poziv k dejanju, Anketa, Ponudba, Zahteva itd. Ima podporo za pogojno logiko, ki vključuje logiko prikaza prikaza, logiko e-pošte in preusmeritvena logika. Brezplačna različica vtičnika je na voljo v imeniku vtičnikov WordPress.

Oblike Everesta

Cena: Brezplačno


Everest Forms je lahko in razširljivo orodje za oblikovanje in oblikovanje, ki hitro in enostavno ustvari kakršno koli obliko. Ta vtičnik ponuja podporo za več stolpcev, Googlovo ponovno prepisovanje za preprečevanje neželene pošte, podporo za več prejemnikov e-pošte, nabor polj obrazca, uspešne oddaje e-pošte in še več. Ne samo to, z Everest Form lahko izbirate med več predlogami oblikovanja obrazcev in si ogledate vnose obrazcev neposredno na nadzorni plošči. Vtičnik ima tudi veliko več funkcij z veliko uporabnostjo, toda funkcija, ki izstopa nad vsem drugim, je preprost vmesnik povleci in spusti, zaradi katerega je postopek ustvarjanja oblik kos pogače.

weForms

Cena: Brezplačno


Če želite pri ustvarjanju obrazca prihraniti veliko časa, potem weForms- eden od boljše rešitve Zate. To je vtičnik za ustvarjanje obrazcev WordPress, s katerim lahko v nekaj minutah enostavno izdelate popolnoma funkcionalen obrazec. Prav tako vam ni treba skrbeti za poslabšanje zmogljivosti pri ustvarjanju obrazca s tem vtičnikom. to zelo hitro torej kako vse deluje na eni strani. Da bo vaše delo še hitreje, je tudi ona predloge obrazcev, s katerim lahko takoj ustvarite obrazec.

S tem vtičnikom za urejanje obrazcev WordPress lahko imate veliko komponent in elementov, ki bodo zelo uporabni za vaš obrazec. Ima vmesnik povleci in spusti. Na ta način lahko preprosto dodate polja obrazcev, ki jih potrebujete na svojem spletnem mestu. S tem ustvarjalnikom obrazcev lahko ustvarite tudi različne vrste obrazcev. Ti lahko vključujejo kontaktne obrazce, povej prijatelju, registracije uporabnikov, vloge za posojilo in prostovoljce in še več.

Ključne funkcije:

  • 18+, za povečanje funkcionalnosti.
  • Kratke kode, obliko postavite kjer koli.
  • Odzivno oblikovanje, se lahko uporablja na kateri koli prenosni napravi.
  • Povleci in spusti, ga uporabite s predogledom v živo.
  • Enostaven vmesnik, zmogljiv in preprost uporabniški vmesnik.

    • Enostaven kontaktni obrazec

    Vtičnik GrandWP Forms ima široko paleto prilagodljivosti. Obrazce lahko naredite točno tako, kot želite, da se prikažejo na Front-Endu, ne da bi najeli razvijalca. Je 100% odziven in zmogljiv vtičnik. Uporabite vtičnik za ustvarjanje obrazcev za ustvarjanje različnih obrazcev, ki jih želite poslati uporabnikom, ali preprosto zagotoviti podrobne dodatne informacije o izdelku / storitvi ali spletnem mestu na splošno.

    Graditelj obrazcev GrandWP je izjemno enostaven za uporabo. Vtičnik Forms ima intuitiven in preprost vmesnik, ki vam omogoča ustvarjanje neverjetnih obrazcev v nekaj klikih. Ima sodoben in prilagodljiv dizajn, s katerim bo vaše spletno mesto izgledalo profesionalno. Vtičnik Forms vam omogoča, da prilagodite vse ravni vsakega posameznega polja, ki ga ustvarite, da izgleda točno tako, kot želite. Ko ustvarite svoj projekt obrazcev GrandWP, ga lahko spremenite / prilagodite, kadar koli želite in še vedno želite. Vtičnik Blog Forms ima tudi možnost povleci in spusti, ki vam omogoča, da z enim klikom spremenite vrstni red polj.

WordPress sprva nima obrazca za povratne informacije, je pa potrebno orodje za komunikacijo z obiskovalci. V tem članku vam bom pokazal, kako ustvariti lepo WordPress kontaktni obrazec z uporabo vtičnikov, pa tudi brez njih s pošiljanjem po pošti.

Ampak dotaknimo se malo teorije, če nekoga ne zanima, potem lahko takoj nadaljujete z namestitvijo obrazca na WordPress:

Teorija: Zakaj potrebujem obrazec za povratne informacije?

Mislim, da marsikdo to ve Iskalniki Zelo cenim kontaktno stran. In če ga imate, to pomeni, da nimate česa skriti pred bralci in ste odprti za komunikacijo.

Toda zakaj bi moral nastaviti nek obrazec, ko lahko samo napišem svoj e -poštni naslov? - To vprašanje se poraja med začetniki, ki še niso uspeli pridobiti priljubljenosti.

Slabosti e-poštnih naslovov v stikih:

  1. Veliko neželene pošte prihaja iz robotov;
  2. Obiskovalci redko pišejo;
  3. Od strani ni nobene koristi.

Vem, da se niso vsi soočali s takšnimi težavami, ampak verjemite mi, da bo čez 1 leto vaša pošta vključena na vse poštne sezname in vas bodo zasipali z nepotrebnimi sporočili.

Pravzaprav bodo ljudje le redko pisali, ker nočejo iti na pošto in vnesti vašega naslova, če pa to storijo, obstaja velika verjetnost, da bo pismo končalo v kategoriji »Neželena pošta« in sploh ne boste vedeli za to.

Zato vzpostavitev obrazca za povratne informacije v idealnem primeru reši te težave. Navsezadnje nihče ne bo prepoznal vaše prave pošte, pa tudi vsa pisma bodo hitro prispela in ne bodo končala v vsiljeni pošti.

WordPress kontaktni obrazec z uporabo vtičnika

Namestitev vtičnika je najpreprostejša možnost za ustvarjanje čudovitega kontaktnega obrazca WordPress. Vendar sem tukaj naletel na tako težavo, da je večina vtičnikov težkih, ne lepih in imajo tudi malo nastavitev.

Zato sem nekaj dni iskal najboljše vtičnike, ki bodo primerni tako za skrbnika spletnega mesta kot za obiskovalce.

1.

Ogromen se oblikuje- eden najpreprostejših in najbolj priročnih vtičnikov. Ki vam omogoča ne samo prejemanje sporočil, ampak tudi ustvarjanje čudovitih obrazcev, ne dovoljuje neželene pošte in lahko pošilja množično pošiljanje.

Vtičnik je odlično prikazan v katerem koli delu spletnega mesta in ga je mogoče prikazati tudi v stranski vrstici. In glavni plus je, da ne naloži vašega spletnega mesta tako kot priljubljene razširitve.

2. - pojavni obrazec za povratne informacije

Uporabniški hrup Je brezplačen in edinstven vtičnik te vrste, ki vsebuje pojavni obrazec za povratne informacije. Poleg tega ga je enostavno urejati, izhod pa je mogoče konfigurirati kjer koli, lahko celo sklepate z gumbom.

3. Kontaktni obrazec 7 je najslabši od najboljših

Kontaktni obrazec 7 Je najbolj priljubljen vtičnik, ki ga uporabljajo milijoni ljudi. Malokdo pa ve, da porabi veliko virov in da se WordPress strašno upočasni.

Dejstvo je, da ustvarja nepotrebne poizvedbe v bazo podatkov, pa tudi povezuje skripte z obsegom blokiranje prenosa z glavno datoteko. Tako se obremenitev strani poveča za 2 sekundi in ni nujno, da je na strani obrazec za povratne informacije.

Mimogrede, pospešitev spletnega mesta je eden od razlogov za prenehanje uporabe nepotrebnih vtičnikov. In svojemu spletnemu mestu preprosto dodajte funkcionalnost in sloge.

Spletni generator obrazcev za povratne informacije

Malo jih je slišalo, vendar obstajajo spletna mesta, ki lahko ustvarijo čudovite oblike komunikacije in jih je enostavno prilagoditi, nato pa se pridobi posebna koda za vdelavo na spletno mesto.

Tako uporabljamo vire drugega spletnega mesta, ki bo obdelalo naša pisma. Ta možnost je primerna za ljudi na brezplačnem gostovanju, kjer ni obdelave pošte.

Oblikovalec obrazcev- brezplačen generator različnih oblik v ruščini. Eden redkih, ki se popolnoma prilega spletnemu mestu. Res je, da ima omejitve, na primer zmožnost pošiljanja le 100 pisem na mesec.

Toda že za 5 USD lahko prejmete 1000 pisem, vgrajen je sistem za preprečevanje neželene pošte, doda se prostor na disku, ustvarijo se poročila in preprosto povežete poštno storitev.

Če se želite znebiti kakršnih koli omejitev, lahko povežete obrazec iz Googla. Ima veliko funkcij in ga je enostavno ustvariti, čeprav ga je težko vstaviti na spletno mesto.

Nisem našel nobenih video vadnic, vendar obstaja dober vodnik za namestitev!

Php kontaktni obrazec brez vtičnikov

Kaj potrebujete za ustvarjanje lastnega kontaktnega obrazca? Samo sledite 4 preprostim korakom:

  1. Ustvarite datoteko php;
  2. Na kontaktno stran (v html formatu) napišite nekaj vrstic;
  3. Povežite Googlovo knjižnico (če obrazec ne deluje);
  4. Če ni lepo, dodajte sloge.

Nisem hotel podrobno opisovati vsega na spletnem mestu, zato sem posnel video in naredil arhiv z potrebne datoteke na disku Yandex. Arhivske datoteke lahko prenesete -.

Video navodila za ustvarjanje obrazca za povratne informacije brez vtičnikov

Nekomu obrazec ne deluje? Nato morate v datoteko header.php vstaviti:(povezava Googlove knjižnice). Upam, da so navodila zelo jasna in enostavna za vse. Tudi v arhivu boste našli datoteko s slogi. Preprosto kopirajte vse vrstice in jih na koncu prilepite v datoteko style.css.

Pozor: brezplačno gostovanje ne podpira funkcije pošiljanja pisem. In tudi uporaba testnega načina.

Namesto sklepov

V tem članku sem obravnaval vse načine za ustvarjanje čudovitega kontaktnega obrazca WordPress. Kot lahko vidite, obstaja veliko pristopov in vsak je dober na svoj način.

Osebno sem se odločil za ustvarjanje lastnega obrazca in samo zato, ker ga lahko prilagodite sami. Če dobro kopljete, potem lahko sloge prvega vtičnika ponovno konfigurirate na svoj način, vendar je to že tema za drug članek.

Dober dan prijatelji! V tej vadnici vas bom naučil, kako ustvariti kontaktni obrazec WordPress s pomočjo vtičnikov. Obrazec za povratne informacije WordPress služi idealna rešitev za tiste, ki želijo ostati v stiku s svojim občinstvom ali prejemati zahteve na njihov e-poštni naslov za naročanje storitev. Z vami se bomo naučili, kako narediti pojavni obrazec v modalnem oknu. Ko boste prebrali ta članek, boste lahko sami vdelali obrazec na svoja spletna mesta. Torej gremo.

Zakaj potrebujete obrazec za stik WordPress?

Morda vas bo presenetilo vprašanje, zakaj potrebujem obrazec za povratne informacije na spletnem mestu WordPress? Zakaj ne bi spletnemu mestu preprosto dodali e-poštnega naslova, da bi mi ljudje kar pisali?

To je najpogostejše vprašanje novincev, ki se bojijo dodati kodo obrazca na spletno mesto brez znanja programiranja. Resnici na ljubo, pri ustvarjanju kontaktnega obrazca WordPress sploh ne potrebujete nobene kode. V tej vadnici bomo korak za korakom ustvarili obrazec za stik in to lahko stori tudi najbolj popoln začetnik.

Spodaj so navedeni trije najboljši razlogi, zakaj je uporaba obrazca boljša kot samo dodajanje e-poštnega naslova na vaše spletno mesto.

  • - spambots z zavidljivo pravilnostjo prebirajo po njihovih razčlenjevalnikih poštne naslove, kjer je omenjena poštna domena, in jo vnesejo v svojo bazo, da vam kasneje pošljejo neželeno dopisovanje. Po drugi strani pa se z uporabo obrazca za povratne informacije WordPress znebite problema prevlade neželene e-pošte v vašem nabiralniku.
  • Popolnost informacij – Ko pošiljajo pošto, ljudje ne pošljejo vedno vseh informacij, ki jih potrebujete. S pomočjo obrazca za stik sami določite, katera polja potrebujete, da vam uporabniki olajšajo pošiljanje e -pošte (ime, e -poštni naslov, telefonska številka, komentar in drugo).
  • Prihranite čas - obrazec za stik WordPress vam lahko prihrani čas. Poleg popolnosti podatkov, ki ste jih zahtevali od uporabnika in vam jih bo poslal, lahko navedete tudi, kaj vas čaka v naslednjem koraku, na primer "Vaša prijava bo pregledana v 24 urah" ali Oglejte si video in številne druge uporabne stvari.

Spodaj je primer kontaktnega obrazca, ki ga bomo ustvarili v tej vadnici.

Začnimo, gospodje.

1. korak: Izbira najboljšega vtičnika za kontaktni obrazec za WordPress

Na tem koraku se moramo odločiti za izbiro ustreznega vtičnika obrazca. Obstaja jih veliko, tako brezplačnih kot plačljivih. V tej vadnici vam bom povedal o različnih vtičnikih, tako da boste imeli široko izbiro. V prvem primeru bo vključen vtičnik WPForms.

Spodaj so razlogi, zakaj je WPForms najboljši vtičnik za povratne informacije:

  1. Prvič, to je najbolj začetnikom prijazen vtičnik. Če preprosto povlečete in spustite bloke, ki jih potrebujete, lahko z nekaj kliki ustvarite obrazec za stik.
  2. WPForms Lite je popolnoma brezplačen.
  3. Ko ste pripravljeni na zmogljivejšo funkcionalnost in če vam je to res pomembno, lahko nadgradite na različico Pro.

Super, če so ti razlogi zadostovali in sem te prepričal, potem gremo naprej.

2. korak: Namestitev vtičnika za kontaktni obrazec WordPress

Za to vadnico uporabljamo različico Lite, ker je brezplačna in enostavna za uporabo. Namestite ga lahko tako, da se prijavite v svoj blog in odprete Vtičniki - Dodaj novo.

V iskalno vrstico vnesite ime našega vtičnika in kliknite Namesti zdaj.

Po namestitvi vtičnika se prepričajte, da ste ga aktivirali. To je prikazano tukaj:

3. korak: Ustvarite obrazec za stik v WordPressu

Torej, potem ko smo uspešno zaključili aktivacijo vtičnika, je čas, da ustvarimo obrazec za povratne informacije. Če želite to narediti, v skrbniški plošči bloga kliknite zavihek WPForms Menu in pojdite na Dodaj novo.

S tem se vam odpre graditelj Wpforms, kjer lahko ustvarite obrazec za povratne informacije o stikih WordPress, tako da preprosto povlečete in spustite želene bloke. V brezplačni različici Lite sta na voljo dve vnaprej izdelani predlogi (prazna in preprosta oblika). Lahko jih uporabite skupaj, da ustvarite tisto, ki je prava za vas. V tem primeru smo za vas izbrali drugo možnost, to je preprost obrazec za stik. Dodajte mu ime, e-pošto in besedilno polje.

Lahko kliknete na vsako polje, da ga uredite. Z miško lahko tudi povlečete in spremenite vrstni red polj obrazca.

Če želite dodati novo polje, na seznamu na levi izberite tisto, ki ga potrebujete, in ga povlecite na delovno območje.

Ko končate, samo kliknite gumb Shrani.

4. korak: Konfiguriranje obvestil in potrditev

Ko uspešno ustvarite svoj kontaktni obrazec WordPress, je zelo pomembno, da pravilno nastavite obrazce za obvestila in potrditev.

Obrazec za potrditev je tisto, kar vidijo vaši uporabniki, ko vam pošljejo vlogo z obrazca. To je lahko zahvalno sporočilo ali pa ga preusmerite na drugo namensko stran.

Obrazec za obvestila so sporočila, ki jih prejmete, ko prejmete novo aplikacijo ali e -pošto s svojega spletnega mesta WordPress.

Obe polji lahko konfigurirate tako, da odprete nastavitev znotraj vtičnika WPForms Form Designer.

Privzeto nismo nastavili dotika in smo pustili polje Obrazec za potrditev s sporočilom »Hvala za vaš kontakt«, kot je. Vendar pa imate pravico, da ga spremenite v drugo besedilo ali preusmerite uporabnika na ločeno stran.

Najboljša stvar tega vtičnika je, da so privzete nastavitve kot nalašč za začetnike. Ni jim treba ugotoviti, kaj storiti ali kaj spremeniti. Vse je zelo intuitivno in preprosto. Ko greste v nastavitve obvestil, bodo vsa polja dinamično vnaprej izpolnjena.

Obvestila so privzeto poslana na pošto, ki ste jo določili v nastavitvah. Če želite spremeniti cilj pošiljanja obvestil, ga lahko tudi preprosto spremenite. Če želite določiti več poštnih naslovov (ločenih z vejicami), prosimo, izročite kartice, kot pravijo 🙂

Polje Zadeva e -pošte bo samodejno izpolnjeno z imenom vašega obrazca. Polje za ime bo vzeto iz uporabniškega imena (vašega imena). Ko odgovorite na pismo, bo šlo na pošto z imenom uporabnika, ki je izpolnil kontaktni obrazec.

5. korak: Dodajanje kontaktnega obrazca WordPress na stran

Na tem koraku, ko sestavite in konfigurirate obrazec za povratne informacije, morate zanj ustvariti ločeno stran »Stiki«, kamor jo lahko postavite. Ustvarite novo ali uredite obstoječo stran, kamor jo lahko dodate.

Za vstavljanje obrazca na stran bomo uporabili preprosto kratko kodo. Samo kliknite gumb »Dodaj obrazec« in izberite ime svojega obrazca, da ga vstavite na stran.

V redu. Zdaj shranite stran in odprite predogled, da si ogledate spremembe.

Takole bo približno izgledal obrazec na preprosti strani WordPress:

Če želite samo dodati obrazec na stran, potem čestitam. Vsi koraki so uspešno zaključeni. Če ga želite dodati kot pripomoček v stransko vrstico, nadaljujte spodaj.

6. korak: Dodajanje kontaktnega obrazca WordPress v stransko vrstico

Vtičnik WPForms ima vgrajen pripomoček za obrazec za stik, ki ga lahko dodate na stransko vrstico ali katero koli drugo področje na spletnem mestu (na primer nogo).

Če želite to narediti, moramo iti v razdelek »Videz« -> Pripomočki. Tam boste na levi strani videli vnaprej nameščen pripomoček vtičnika obrazca. Preprosto ga vzemite in uporabite običajno povleci in spusti, da nastavite vrstni red prikaza na želenem območju v stranski vrstici.

Naslednji korak je, da določite ime pripomočka in ga shranite. Pojdite na spletno mesto in si oglejte rezultat.

S tem zaključujemo naš pregled našega vtičnika za kontaktni obrazec WPForms. A posebej za vas sem pripravil še en pregled enega brezplačnega vtičnika, s katerim lahko naredimo pojavni obrazec za povratne informacije in vse enake funkcije kot v prejšnjem. Imenuje se Kontaktni obrazec 7. Res je zelo zmogljiv in njegov adut je, da je popolnoma BREZPLAČEN!

Lahko je tudi odziven, to pomeni, da se bo obrazec za povratne informacije prilagodil velikosti zaslona vaše naprave.

Torej, za vsak slučaj, da veste, da sta J

Kako narediti obrazec za povratne informacije o stiku s pomočjo obrazca za stik 7

Še naprej razumemo vprašanje ustvarjanja obrazcev za sprejemanje vlog z vašega spletnega mesta. Pred nami je še en vtičnik za kontaktni obrazec WordPress, imenovan Kontaktni obrazec 7. Namestimo ga na svoj spletni dnevnik in ga aktivirajmo, kot lahko.

Je že nameščen na mojem spletnem mestu, ne na tem blogu. Postopek je standarden. Zdaj moramo iti na skrbniško ploščo bloga in ustvariti nov obrazec, ki nam bo zbiral aplikacije in drugo koristne informacije... Pojdite na razdelek "Kontaktni obrazec 7" -> Dodaj novo.

V redu! Zdaj mu dajmo ustrezno ime, v mojem primeru je teh kontaktnih obrazcev veliko. Izberimo enega, na primer "Obrazec za naročilo promocije spletnega mesta"

Na kratko vam bom povedal, kaj potrebujemo tukaj. Najprej se moramo odločiti, koliko polj obrazca želimo narediti. Takoj moram reči, da ni treba narediti 100.500 polj in je nesmiselno iz preprostega razloga, ker bodo ljudje zaprli vaše spletno mesto in ne bodo pustili zahteve. Ta korak morajo olajšati. Se pravi, če pomislite, potrebujemo od osebe, ki:

  1. Njegovo ime, na katerega se nanaša (osebna pritožba)
  2. poštni naslov (povratne informacije, kam mu poslati ponudbo)
  3. Telefonska številka, ki jo lahko takoj pokličete (če se to zgodi hitro, bo vseeno postala vaša stranka)
  4. Sam gumb "Pošlji".

To so osnovni podatki, druge lahko izveste že med dopisovanjem ali telefonskim pogovorom. Je logično? Mislim, da ja. Iti naprej.

Ustvarjanje polj kontaktnega obrazca v vtičniku Kontaktni obrazec 7

Odločili smo se za število polj, zdaj jih moramo ustvariti. Na voljo so nam naslednji zavihki:

  • Besedilo (kakršno koli besedilno polje, na primer "Ime", "Zastavi vprašanje" ali katero koli drugo ime, ki ga boste zbrali prek tega polja)
  • E-pošta (uporabnik mora vnesti samo en namen)
  • URL (naslov spletnega mesta bo vnesen v to polje, druge vrednosti niso sprejemljive, nastala bo napaka)
  • Tel (polje z telefonska številka za naš kontaktni obrazec WordPress so dovoljene številčne vrednosti, besedilo bo dalo napako)
  • Številka (številski razpon vrednosti, ki ga lahko na primer uporabite za ceno: "koliko ste pripravljeni plačati za spletno mesto? Od 23.000 do 120.000 rubljev")
  • Datum (Navedemo datum, od katerega do katerega datuma. Primer: "Rezervacija avtomobila od 13. 4. 2016 do 25. 4. 2016")
  • Območje besedila (območje besedila, tukaj lahko vnesete besedilo kot komentar)
  • Spustni meni. Implementirano na mojem blogu, si lahko ogledate. Na koncu vsakega članka predlagam uporabnikom, da ustvarijo bodisi preprosto spletno stran ali spletno trgovino. To je funkcija, ki jo ponuja ta možnost.
  • Potrditvena polja (več možnosti, na primer: spletno mesto + oblikovanje logotipa + promocija + kontekstualno oglaševanje)
  • Izbirni gumbi (izberite kateri koli element, na primer: "Naročite kontekstualno oglaševanje ali ciljano")
  • Sprejem (Sprejmite pogoje pogodbe, to je podatke o uporabniku, kot je javna ponudba)
  • Kviz (Kviz je niz kratkih vprašanj, ki jih lahko vstavite tudi v kontaktni obrazec).
  • reCaptcha (Potrditev, da niste robot in ne boste pošiljali vsiljene pošte.) Dobra zaščita od SPAM. Opomba: ta možnost deluje, če ste priključili vtičnik Really Simple Captcha.
  • Datoteka (Če želite uporabnikom omogočiti, da vam naložijo datoteko, na primer: »Priloži tehnično nalogo za razvoj strani«).
  • Pošlji

Torej, za polja smo se odločili, za vsakega poznate tudi pomen. Pojdimo k izdelavi našega kontaktnega obrazca WordPress.

V spodnjem primeru sem uporabil 2 polji: Ime, E-pošta. V skladu s tem potrebujete te zavihke:

S klikom na zavihek besedilo (Besedilo) pridemo v pogovorno okno:

Tukaj moramo klikniti potrditveno polje Vrsta polja - obvezno. Narejeno tako, da če uporabnik vanj ne vpiše imena, vam ne bo mogel poslati prijave, prišlo bo do napake pri pošiljanju, da vsa polja niso pravilno izpolnjena.

Nato boste videli kratko kodo za vstavljanje tega polja in poleg nje modri gumb Vstavi oznako. To bo dodalo eno novo polje kontaktnega obrazca.

Da se ne boste zmedli, sem to poudarila s stilom. Koda spodaj:

< div class = "col-md-4" > < label class = "sr-only" >Polno ime< / label >[besedilo * besedilo - 658 razred: obrazec - kontrolna oznaka mesta "(! LANG: Vaše ime" ] !}< / div >

In tukaj je zaslon:

Podobno operacijo naredimo za polje "E-pošta". Kliknemo na ustrezen zavihek in se najdemo v takem pogovornem oknu.

Popolnoma se ne razlikuje od prejšnjega, samo ponovimo svoja dejanja z vami. Moje e-poštno polje ima tudi slog. Spodaj je koda:

< div class = "col-md-4" > < label class = "sr-only" >Celotno e-pošto< / label >[e-pošta * e-pošta - 447 razred: obrazec - nadzorna oznaka mesta "(! LANG: Vaš e-poštni naslov" ] !}< / div >

In tukaj je zaslon:

In končno, gumb "Pošlji". Vse govori o stilih.

< div class = "col-md-4" >[oddaj razred: btn - pavšalni razred: stolpec - xs - 12 "Naročilo"]< / div >

< / div >

Pomembna opomba: Dragi prijatelji, v tem primeru uporabljam odzivne sloge za ustvarjanje kontaktnega obrazca v WordPressu, kar pomeni, da lahko sprejme obrazce katere koli velikosti zaslona.

V zgornjem desnem kotu boste videli gumb. Zagotovo ne boste zgrešili. 🙂

Nekaj ​​dela smo opravili, zdaj pa gremo na naslednjo stopnjo.

Nastavitev poštnega naslova za sprejemanje prijav

V tem koraku moramo narediti nekaj nastavitev, da bodo črke šle do nas na našem poštni predal... Spodaj bom razložil, kako to doseči.

Moramo klikniti na velik zavihek"Pismo". To bo drugo za predlogo obrazca.

Prva stvar, ki jo boste videli, so vaše oznake, ki ste jih dodali, vstaviti jih moramo v telo pisma, oni bodo nadomestili podatke, ki jih uporabnik vnese iz obrazca. Mislim, da sem jasno razložil.

Zdaj po poljih:

Zdaj moramo nastaviti obvestila o uspešnem ali neuspešnem pošiljanju elektronske pošte iz kontaktnega obrazca WordPress.

To bodo sporočila, ki bodo prikazana uporabniku kot odgovor na njegova dejanja z obrazcem. Privzeto gredo na angleški jezik... Naredil sem za vas najbolj potreben prevod v ruski jezik. Teh bo več kot dovolj, in če ne, vam bo pomagal Googlov prevajalec. Pa začnimo.

Zelo dobro. Končali smo z nastavitvijo obrazca, zdaj ga moramo vstaviti na spletno mesto. Če želite to narediti, z uporabo že znane tehnologije pojdite na obstoječo stran ali ustvarite novo. V mojem primeru vam bom pokazal primer obstoječega obrazca na strani spletnega mesta WordPress.

Ker naš obrazec zbira prijave za promocijo spletne strani, bomo šli na podobno stran.

Če želimo vstaviti naš obrazec za stik, moramo kopirati kratko kodo, ki mu jo dodeli vtičnik. Na voljo je pod imenom vašega obrazca.

Ko obiščemo, kopiramo in prilepimo na našo stran urejevalnik besedil(ne vizualno). Predstavljeno na spodnjem posnetku zaslona:

Shranimo svojo stran in poglejmo, kaj se je na koncu zgodilo v brskalniku:

Super! Zdaj pa poskusimo vanj poslati obrazec, ne da bi karkoli izpolnili. In to je tisto, kar bomo videli.

Prišlo je do napake pri oddaji obrazca, ker uporabnik v polja ni vnesel zahtevanih podatkov. Zdaj pa vnesemo pravilne podatke in poglejmo, kaj dobimo v tem primeru.

Kliknite pošlji in to je tisto, kar piše v našem obrazcu:

Zdaj pa poglejmo, kako izgleda naša aplikacija. Pridejo na mojo pošto. Preverite dostavo:

Pojdimo noter, da se prepričamo, ali so kodiranje in vsi podatki pravilni.

Vse je vredu. Obrazec deluje pravilno in pošilja podatke. Zdaj lahko zbiramo aplikacije, ki vam bodo prišle, ko začnete, če govorimo o regionalni promociji.

Torej smo obravnavali, kako ustvariti kontaktni obrazec WordPress na strani spletnega mesta. Zdaj vam bom povedal, kako to storiti pojavni odzivni obrazec za povratne informacije z uporabo vtičnika Kontaktni obrazec 7.

Izdelava pojavnega odzivnega obrazca za povratne informacije o stiku v WordPressu

Da bi naš obrazec postal odziven, torej "gumijast", moramo na Contact Form 7 povezati še en vtičnik oziroma njegov dodatek - imenuje se Bootstrap Contact Form 7. Namestite in samo aktivirajte in to je to - deluje. Z njim vam ni treba izvajati nobenih nastavitev. Nameščen in pozabljen.

V naslednjem koraku vam bom povedal, katere spremembe je treba narediti, da bo naš obrazec prikazan in odziven. Podobno izvedbo sem naredil na domača stran vaše spletno mesto studia. Če želite to narediti, pojdite na predlogo index.php, ki se nahaja v razdelku »Videz - urejevalnik«. S kodo bomo delali samo ročno.

Naš pojavni obrazec se bo prikazal v modalnem pogovornem oknu, kot je ta:

Če želite doseči ta rezultat, potrebujete naslednjo kodo, v celoti jo bom prikazal v odrezku:

Naročiti

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >Naročiti< / a >

< ! -- Modal -- >

< div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" >

< div class = "modal-dialog" >

< div class = "modal-content" >

< div class = "modal-header" >

< button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >& časi;< / span > < span class = "sr-only" >Zapri< / span > < / button >

< h4 class = "modal-title black" id = "myModalLabel" >Pošljite svojo prijavo< / h4 >

< / div >

Ko lansirate izdelek ali novo spletno mesto, vam je lahko pridobivanje povratnih informacij neposredno od uporabnikov neprecenljivo:

Odličen način za to je, da dodate obrazec, prek katerega vas lahko obiskovalci obvestijo o težavah, s katerimi se srečujejo, ali nekaterih dodatnih funkcijah, ki jih potrebujejo. Ključ do dobrega obrazca za povratno informacijo je, da je čim bolj preprost.

Uporabniki ne želijo porabiti veliko časa za izpolnjevanje obrazca, zato morate zagotoviti, da to storijo. Nekaj ​​jih je različne poti dodajte obrazec za povratne informacije v WordPress in bo zelo hitro opravljeno.

Za kaj je obrazec za povratne informacije?

Vsako spletno mesto ne potrebuje možnosti, da od uporabnikov zahteva povratne informacije. Nekatera spletna mesta so že dovolj zrela, druga lahko ponujajo različne alternativne možnosti komunikacije.

Spet drugi so lahko preveliki ali preobsežni, da bi jim informacije o uporabnikih dale kaj koristnega.

Obstajajo pa številna spletna mesta, ki imajo koristi od preprostega kontaktnega obrazca:

Seveda to ni popoln seznam, vendar prikazuje številne scenarije, v katerih je lahko obrazec za povratno informacijo uporaben. Poleg dejstva, da je praktično pridobiti sveže ideje od uporabnikov, pomaga tudi zagotoviti, da je uporabniku udobno vaše spletno mesto.

Vsak obiskovalec ve, da se lahko kam obrne, če ima težave. Če ste na razpotju in niste prepričani, ali vam bo obrazec za povratne informacije kaj dal, je najboljše, kar lahko storite, je, da ga dodate in vidite, kaj se zgodi:

ManageWP Feedback Panel

Če se odločite dodati kontaktni obrazec, morate upoštevati nekaj stvari. Prvič, mora biti čim bolj preprosto. Od uporabnikov ne zahtevajte nič drugega kot e -poštni naslov, ime, kratko sporočilo in morda zadevo.

V nekaterih primerih lahko celo brez imena, čeprav vam bo to pomagalo pri spremljanju informacij. Ne obremenjujte obrazca za povratne informacije z nepotrebnimi spustnimi meniji ali dodatnimi informacijami.

Obrazec za stik v WordPress lahko dodate na več načinov. To je mogoče narediti ročno z neko kodo, vendar vam bo v tem primeru precej težko upravljati, preverjati veljavnost podatkov in dejanja z e-pošto. Bolje je, da uporabite eno od preizkušenih orodij, ki bo opravilo večino dela namesto vas, če nimate te izkušnje.

Dodajanje strani s povratnimi informacijami z orodjem za ustvarjanje strani

Če uporabljate temo iz Elegantnih tem, bi vam moralo biti ustvarjanje strani za povratne informacije precej preprosto. Uporabili bomo ustvarjalnik strani iz Elegantnih tem, ki bo v samo nekaj korakih dodal obrazec.

Če želite začeti, pojdite na Strani -> Dodaj stran v skrbniški plošči WordPress. Posledično bo ustvarjen nova stran... Poimenujte to stran " Povratne informacije". Takoj pod naslovom boste videli gumb " Uporabite Graditelj strani«.

Kliknite ta gumb, da začnete dodajati vsebino strani. V urejevalniku objav boste videli novo strukturo, ki vizualno prikazuje vsebino strani, tako da lahko stran ustvarite z bloki, znanimi kot moduli:

Struktura graditelja strani

Prva stvar, ki jo želimo dodati, je besedilo, ki opisuje stran. Kliknite na " Vstavi stolpec", Nato izberite prvo možnost za blok polne širine. Nato znotraj ustvarjenega stolpca kliknite Vstavi modul in izberite Besedilo.

Odpre se preprost urejevalnik besedil, kamor lahko dodate kratek opis strani. Dodal bom nekaj zelo osnovnega, lahko pa ustvarite opis, ki se ujema z vašim spletnim mestom.

« Prosimo, uporabite spodnji obrazec, da podate predloge za izboljšave našega spletnega mesta ali nas opozorite na težave!»

Spodaj ponovno kliknite gumb "Vstavi modul". Tokrat pojdite na dno seznama in izberite " Kontaktni obrazec". Ponovno boste pozvani nova plošča z več možnostmi za prilagajanje obrazca. Najprej »Pokaži Captcha«, ki na koncu kontaktnega obrazca doda preprosto vprašanje za blokiranje neželene pošte.

To možnost bi rad zaenkrat pustil onemogočeno, saj še ne prejemam preveč neželene pošte. V besedilno polje »E-pošta« vnesite e-poštni naslov, na katerega želite prejemati povratna sporočila. Ostale nastavitve so neobvezne. Za polja lahko dodate glavo, razred CSS ali ID:

Nastavitev kontaktnega obrazca

Ko končate, kliknite gumb Shrani, da dodate obrazec, in nato Objavi, da se obrazec prikaže na strani. Na srečo je privzeti kontaktni obrazec Elegant Themes zelo preprost in zahteva samo e-poštni naslov, ime in sporočilo. To je kot nalašč za kontaktni obrazec.

Če želite zagotoviti, da bodo uporabniki dejansko našli vaš obrazec, lahko dodate povezavo do strani, ki ste jo ustvarili v glavnem meniju vašega spletnega mesta. To se lahko izvede samodejno. Če želite to narediti, pojdite na skrbniško ploščo WordPress v razdelku »Meni«.

Tu boste videli seznam strani, ki jih lahko vključite ali izključite iz navigacijskega menija. Prepričajte se, da je poleg strani s povratnimi informacijami zelena kljukica. Če vidite rdeči križ, samo kliknite nanj, da odprete stran z obrazcem v meniju in shranite spremembe.

Tako bodo uporabniki lahko enostavno dostopali do obrazca iz glavnega menija in ga v primeru težav izpolnili.

Vtičniki za kontaktni obrazec

Seveda dodajanje ločene strani ni edini način, da na spletno mesto dodate obrazec za povratne informacije. Če ne uporabljate teme Elegantne teme ali če potrebujete nekaj bolj izpopolnjenega, lahko za to uporabite več vtičnikov.

Uporabniški hrup

Usernoise je eden najpreprostejših vtičnikov za kontaktne obrazce. Vtičnik deluje tako, da v stransko vrstico ali na dnu vašega spletnega mesta dodate gumb »Povratne informacije«.

Ko uporabniki kliknejo nanj, se odpre majhno pojavno okno s kratkim obrazcem, kjer lahko uporabniki označijo težave in napišejo kratko sporočilo.

Ta obrazec nato na določen e -poštni naslov skrbnika spletnega mesta pošlje obvestilo, da je od uporabnika prejel sporočilo:

Vsak del obrazca je prilagodljiv z nastavitvami vtičnika. Lahko dodate ali odstranite kategorije, izberete, katera polja bo obrazec vključeval, kakšno besedilo bo prikazano, ter uredite barve in sloge obrazca in gumba, ki bodo prikazani na vsaki strani.

Obrazec lahko omogočite in onemogočite tudi prek preprostega potrditvenega polja. Uporabniški šum uporablja pristop "samo deluje". Ko ga povežete s potrditvenim poljem, začne obrazec delovati na vašem spletnem mestu.

Lahko ga nekoliko prilagodite, da ustreza slogu vaše teme, vendar ne vsebuje preveč zapletenih funkcij. Namesto tega je vse narejeno čim bolj preprosto in uporabniku prijazno. Vtičnik uporablja tudi odzivno pojavno okno in podeduje večino slogov neposredno iz vaše teme.

Če iščete res preprost način za dodajanje gumba kontaktnega obrazca na vse strani na vašem spletnem mestu, je Usernoise prava pot.

Ninja kick kontaktni obrazec

Ninja Kick Contact Form je vrhunski vtičnik, ki je zelo podoben Usernoiseu, vendar dodaja nekaj dodatnih funkcij in slogov.

Vtičnik v stransko vrstico strani doda gumb, ki odpre dokaj preprost obrazec za povratne informacije. Uporablja osnovno animacijo za upodabljanje obrazca na strani, ne da bi morali zapustiti samo stran:

Izhodni obrazec

Vtičnik vam omogoča tudi prilagajanje obrazca glede na vašo blagovno znamko tako, da prilagodite njegovo barvo in dodate svoj logotip na vrh. Spodaj lahko dodate nekaj povezav do družabnih medijev, če želite, da vas uporabniki lahko dosežejo prek alternativnih kanalov. Nato lahko dodate kratko sporočilo.

Sam obrazec je zelo preprost in od uporabnikov zahteva, da vnesejo ime, e-poštni naslov in sporočilo. Sporočilo je poslano na kateri koli e -poštni naslov, tako da lahko preprosto uredite sledenje povratnim informacijam.

Ninja Kick Contact Form je plačljiv vtičnik predvsem zaradi stopnje prilagajanja, ki ga omogoča. Izbirate lahko med tremi različnimi temami ter spremenite barve in slog vsakega vidika predstavitve.

Ima tudi vgrajeno zaščito pred neželeno pošto ter je popolnoma odziven in prijazen do mobilnih naprav. Obrazec za stik Ninja Kick je stabilen, dokaj preprost in uporablja visokokakovostno animacijo.

Usersnap

Usersnap ima nekoliko drugačen pristop k obrazcu za povratne informacije. To je v bistvu storitev tretjih oseb, ki uporabnikom omogoča, da posnamejo posnetek zaslona strani, na kateri so trenutno, nato pa jo komentirajo in vam skupaj s komentarji pošljejo posnetek zaslona.

Za uporabo storitve se zaračuna določena pristojbina, odvisno od tega, koliko vaših spletnih mest jo ima implementirano.

WP privzeto nima takšne funkcionalnosti, vendar na pomoč priskočijo vtičniki in posebej zasnovane konfiguracije za motor.

Obrazec za stik Vtičnik WordPress Kontaktni obrazec 7

Analiziral bom brezplačen kontaktni obrazec 7, ki je preveden v ruščino. V standardni različici vključuje:

Dodajte reCaptcha captcha

Standardno namestite vtičnik prek skrbniške plošče WordPress, kot je videti na plošči.

CF7 v iskanju

Nastavimo reCaptcha iz Googla, pojdimo v razdelek za integracijo in kliknite povezavo google.com/recaptcha. Imeti mora Google račun.

Povezava do recaptcha

Prenesla se bo v storitev, nastavila elemente kot na posnetku zaslona, ​​pravilno vnesla domeno, spodaj kliknite pošlji.

Povezovanje captcha s spletnim mestom

Kopiramo podatke za captcha, oba ključa.

Ključi za dostop

Vrnite se na vtičnik WordPress in kliknite gumb Nastavitve integracije.

Integracija

Vnesemo ključe, kopirane na storitvi reCaptcha, jih zapišemo v ustrezne razdelke in shranimo.

Shranjevanje nastavitev

Ustvarjanje obrazca

Pojdite na nastavitve in ustvarite nov obrazec. Brisanje standardne oznake.

Brisanje standardnih nalepk

Vnesite ime novega projekta in kliknite na gumb Besedilo, ker bo ime vpisano brez pravil.

Besedilo polja

Prikaže se pojavno okno, ki ga prilagodite svojim potrebam.


Generator oznak
  1. Tip določa, ali mora obiskovalec izpolniti polje, vstavim da
  2. Ime se ne spremeni, je edinstven identifikator
  3. Privzeta vrednost, vnesena fraza, ki jo vidim v notranjosti
  4. Uporabite namesto oznake mesta, torej dokler ni nič vneseno, bo prikazan napis
  5. Ne priporočam uporabe polja Akismet
  6. Če želite dodati sloge, vnesite razred ali id, narejen pole-imya
  7. Oznako vstavite v splošno polje

Podobno pritisnemo gumb za e-pošto, vidimo isti vmesnik.

Generator pošte

E-pošto lahko vnesete prek besedila, vendar boste izgubili funkcijo preverjanja. Vtičnik bo preveril, ali je znak @.

Dodajte del besedilnega območja in telefon (neobvezno), načelo je enako.

Gumbi za območje telefona in besedila

Prej smo konfigurirali integracijo captcha v WordPress, v osnovna različica CF7 ni gumba za vstavljanje captcha, za to smo ustvarili kratko kodo in jo postavili pod ostale elemente.

Ostaja še dodati gumb za oddajo, izbrati s seznama in prilagoditi njegov izhod.

Gumb za pošiljanje

Rezultat je naslednja koda.

Končna koda CF7

Konfiguriranje pošiljanja e -pošte

Spreminjanje parametrov e-pošte

  1. Oznake polj, ustvarjene prej
  2. E-poštni naslov, kamor bodo poslana pisma
  3. Od koga in predmet, izpolnite po želji
  4. Dodatne glave, popolnoma jasne
  5. V telo pisma napišemo, kaj želimo po pošiljanju prejeti po pošti. Na primer, vtipkal sem Mail in pred to besedo vstavil ustrezno oznako.
  6. Na dnu kliknite Shrani

Ohranjanje

Preizkusite preostale zavihke z obvestili in nastavitvami, spremenite lahko besedilo, prikazano v različnih situacijah.

Vstavljanje obrazca na spletno mesto

Na vrhu strani je nastala kratka koda, kopirajte jo.

Kratka koda

Pojdite na kateri koli zapis in prilepite.

Postavitev kratke kode na stran

Po kliku na gumb Pogled se prenese na spletno mesto s prikazom opravljenega dela.

Končna možnost

Dobra lastnost razvijalcev tem WordPress je, da vnaprej izdelajo izdelek, ki podpira CF7, kar olajša življenje in ga ni treba pisati CSS slogi v kodo spletnega mesta. Moja tema precej podpira vtičnik in izhode lepa slika... Če niste zadovoljni, je bil za vsako polje predpisan razred, z njim spremenite zasnovo. Preveril sem delo teme, pisma pridejo hitro. Za druge metode preberite povezavo.

Vsem gradivom bom priložil video navodilo, ki prikazuje ne le postopek ustvarjanja, ampak tudi, kako naredite čudovito obliko, ker celotnega procesa ni mogoče opisati v besedilu.

Robove naredite vodoravno v vrstici

Pogledala sem po internetu in se zgrozila, koliko manipulacij delajo. Ne bom vam pokazal, kako v celoti prilagoditi dizajn, to ni tema niti enega velikega priročnika. Gremo v urejanje obrazca in polja, ki jih želimo vodoravno poravnati, zavijemo v div z razredom, poglejmo kodo.

Želim poravnati polje Ime, pošta in telefon. Ne pozabite shraniti sprememb.

Zavijanje v div

Pojdite na skrbniško območje WordPress Videz> Urejevalnik tem> style.css dodajte sloge za povratne informacije WordPress na koncu datoteke.

Flex-form (zaslon: flex;) samo zaslon @media in (max-width: 655px) (. Flex-form (display: block;))

Slogi pisanja

Iz slogov lahko vidite, da je div z razredom flex-form dodeljen prikaz: lastnost flex, nastavi položaj elementov v vrstici, brez dodatni parametri prostor je enakomerno razdeljen.

Drugi vnos prikazuje, ko ločljivost zaslona doseže 655 slikovnih pik, obrazec spremeni svojo lastnost iz flex v blok in obrazec se začne prikazovati kot prej s polji drug pod drugim. Ta omejitev 655 se razlikuje posamezno, slog je narejen tako mobilne naprave povratne informacije so bile videti ok.

Pojavni obrazec za povratne informacije

Pozitivno ob sprejemu vlog veljajo od CF7. Vtičnik za pojavno okno bo Popup Maker. Ne bom opisoval, povezava do gradiva se nahaja v tem odstavku. Poleg tega članka.

Kako dodati elementorju

Če želite vstaviti obrazec v elementor ali element, morate uporabiti razdelek s kratko kodo. Obrazec je bil ustvarjen v skladu z zgornjimi navodili, kar pomeni, da obstaja kratka koda iz CF7. Pojdite na ustvarjanje strani v elementu in v iskanju elementov poiščite kratko kodo.

Iskanje elementa v elementorju

Elementor je zahtevo obdelal

Uporaba nastavitve teme

Večina predlog WordPress nima avtomatiziranih orodij za povratne informacije. Toda naše predloge iz WPShop imajo vgrajeno funkcijo, ki je prikazana s kratko kodo. Poglejmo si kot primer Root. Nadaljujem z ustvarjanjem strani in nato pogledam posnetek.

Dodatek v ROOT

Odprla se bo stran z že prilagojenim, označenim in natipkanim obrazcem, po katerem lahko obiskovalec od administratorja prejme povratne informacije.

ROOT delo vgrajene funkcije

Povratne informacije prek pripomočkov

Vstavljanje povratnih informacij v pripomočke je enostavno. Besedilni pripomoček vam bo pomagal, ga prenesli v aktivno območje in vanj vpisali kratko kodo.

Uporaba pripomočka za besedilo

Nastavimo naslov, vnesemo konfiguracijo v besedilno območje, gremo na blog in si ogledamo, kako se obdelujejo povratne informacije.

Obrazec v pripomočku

Povratne informacije brez vtičnika

Če imate raje metode brez vtičnika, torej odlično navodilo, sem ga našel na internetu, če se pojavi lastnik kode, bom z veseljem dal povezavo.

Odprite datoteko function.php za urejanje, napišite kodo čisto na dnu, kako jo uporabljati.

/ * koda povratne informacije * / add_shortcode ("art_feedback", "art_feedback"); funkcija art_feedback () (ob_start ();?>

Ustvarili smo obrazec v oznaki HTML WordPress in ga povezali s kratko kodo. Mislim, da bo ta pristop primeren, saj je blok mogoče prikazati kjer koli.

Gremo v ustvarjanje strani v plošči WordPress, pišemo, kliknemo na pogled.

V Gutenbergu vstavite vrstico v kateri koli besedilni blok.

Vnos izhoda v zapis

Ko gremo na spletno mesto, bomo videli neformiran obrazec, polja delujejo, vendar pismo ne bo poslano, ker upravljalnik PHP ni priložen.

Slab videz

Zdaj prilagodimo videz, prilepimo to kodo v datoteko style.css aktivne teme.

#add_feedback (rob: 20px 0 0; position: relative;) #art_name, #art_email, #art_subject, #art_comments (padding: 10px 5px; display: inline-block; width: 49.548%; border-radius: 3px; border: 1px solid #ddd; font-size: 0.9em;) #art_subject (width: 100%; margin: 5px 0;) #art_comments (width: 100%;) #add_feedback .button (border: none; padding: 10px 20px; barva: #fff; velikost pisave: 1em; zaslon: podedovati; rob: 10px 0 0 0; radij obrobe: 3px; barva ozadja: # 2f94ce;) #add_feedback input: fokus, #add_feedback input: fokus, #add_feedback vhod: fokus, #add_feedback textarea: fokus (barva: # 444; senca polja: 0 0 3px rgba (68, 68, 68, 0.2);) .error-text (ozadje: # F59E9E; padding: 15px 0px; besedilo -align: center; barva: #fff;) .error-name, .error-email, .error-comments (prikaz: inline-block; font-size: 11px; položaj: absolutno; vrh: -30px; barva: bela ; obroba: 1px polno rdeča; odmik: 5px 10px; višina vrstice: 1,1; ozadje: rdeče; senca polja: 0 0 3 px 0px rgba (0, 0, 0, 0,3); ) .error-name: after, .error-email: after, .error-comments: after (vsebina: ""; položaj: absolutna; levo: 20px; spodaj: -10px; obroba: 5px trdna prozorna; obroba zgoraj: 5px neprekinjeno rdeče;). Komentarji o napakah (zgoraj: 16%; levo: 0;). Ime napake (levo: 0;). E-poštno sporočilo o napaki (desno: 4%;). Sporočilo-uspeh (ozadje: rgba ( 0, 128, 0, 0,5); barva: #fff; oblazinjenje: 20px; poravnava besedila: središče; rob: samodejno 20px; polmer obrobe: 3px;) #add_feedback .error (obroba: 1 slikovna pika, polno rdeča;) #add_feedback .zahtevno: after (vsebina: "*"; položaj: absolutno; levo: 20px; spodaj: -10px;) #ime_umetnine: fokus :: -moz -namestnik, #ime_umetnine: fokus: -moz -nadomestno mesto, #ime_vrste: fokus : -ms-input-placeholder, #art_email: focus :: - webkit-input-placeholder, #art_email: focus :: - moz-placeholder, #art_email: focus: -moz-placeholder, #art_email: focus: -ms- input-placeholder, #art_comments: focus ::-webkit-input-placeholder, #art_comments: focus ::-moz-placeholder, #art_comments: focus: -moz-placeholder, #art_comments: focus: -ms-inpu t-placeholder, #art_subject: focus :: - webkit-input-placeholder, #art_subject: focus :: - moz-placeholder, #art_subject: focus: -moz-placeholder, #art_subject: focus: -ms-input-placeholder ( barva: prozorna)

Style.css posodobimo na strežniku in vidimo, kako so se spremenile povratne informacije na strani.

Postavitveni blok

Ustvarite datoteko feedback.js in vanjo vstavite kodo. Naložite na gostovanje v mapi js aktivne teme.

JQuery (document) .ready (function ($) (var add_form = $ ("# add_feedback"); // Ponastavi vrednosti polja $ ("# add_feedback input, #add_feedback textarea"). On ("blur", funkcija () ($ ("# add_feedback input, #add_feedback textarea"). removeClass ("napaka"); $ (".ime-napake, .error-email, .error-comments, .message-success"). odstrani ( ); $ ("# submit-feedback"). val ("Send message");)); : feedback_object.nonce), tip: "POST", dataType: "json", beforeSubmit: function (xhr) (// Pri pošiljanju spremenite oznako na gumbu $ ("# submit-feedback"). val ("Predložitev ...");) , uspeh: funkcija (zahteva, xhr, status, napaka) (če (request.success === true) (// Če so vsa polja izpolnjena, pošljite podatke in spremenite oznako na gumb add_form.after ("

"+ request.data +"
") .slideDown (); $ (" # submit-feedback "). val (" Pošlji sporočilo ");) else (// Če so polja prazna, prikaži sporočila in spremeni oznako gumba $ .each (request.data , function (key, val) ($ (". art_" + key) .addClass ("error"); $ (". art_" + key) .before (" "+ val +"");)); $ (" # submit-feedback "). val (" Nekaj ​​je šlo narobe ... ");) // Po uspešni oddaji ponastavite vrednosti polja $ (" # add_feedback "). reset ( );), napaka: funkcija (zahteva, stanje, napaka) ($ ("# predloži povratne informacije"). val ("Nekaj ​​je šlo narobe ...");)); // Pošlji add_form.ajaxForm ( možnosti) ;));

Js mapa na strežniku

Zdaj naložimo drugi del kode v function.php.

/ * drugi del * / add_action ("wp_enqueue_scripts", "art_feedback_scripts"); funkcija art_feedback_scripts () (// Obdelava polj wp_enqueue_script ("jquery-form"); // Vključi skriptno datoteko wp_enqueue_script ("feedback", get_stylesheet_directory_uri (). "/js/feedback.js", array ("jquery"), 1.0 , true); // Nastavite podatke objekta ajax wp_localize_script ("feedback", "feedback_object", array ("url" => admin_url ("admin-ajax.php"), "nonce" => wp_create_nonce ("feedback- nonce" ),));) add_action ("wp_ajax_feedback_action", "ajax_action_callback"); add_action ("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); funkcija ajax_action_callback () (// Niz napak $ err_message = array (); // Preverite nonce. Če preverjanje ne uspe, blokirajte pošiljanje if (! wp_verify_nonce ($ _ POST ["nonce"], "feedback-nonce" )) ( wp_die ("Podatki poslani z napačnega naslova");) // Preverite za vsiljeno pošto. Če je skrito polje izpolnjeno ali je potrdilo odstranjeno, blokirajte pošiljanje if (false === $ _POST ["art_anticheck "] ||! prazno ($ _ POST [ "art_submitted"])) (wp_die ("To je neželena pošta");) // Preverite polja za imena, če so prazna, nato napišite sporočilo v niz napak, če (prazno ( $ _ POST ["art_name"]) ||! isset ($ _ POST ["art_name"])) ($ err_message ["name"] = "Prosim, vnesite svoje ime.";) drugače ($ art_name = sanitize_text_field ($ _ POST ["art_name"]);) // Preverite poštna polja, če so prazna, nato napišite sporočilo v niz napak if (prazno ($ _ POST ["art_email"]) ||! isset ($ _ POST ["art_email"] "])) ($ err_message ["email"] = "Prosim, vnesite svoj e-poštni naslov mail. ";) elseif (! preg_match (" / ^ [[: alnum:]] * @ + \. (2,4) $ / i ", $ _POST [" ar t_email "])) ($ err_message [" email "] =" E-poštni naslov ni veljaven. "; ) else ($ art_email = sanitize_email ($ _ POST ["art_email"]);) // Preverite polja za zadevo e-pošte, če so prazna, nato napišite privzeto sporočilo if (prazno ($ _ POST ["art_subject"]) || ! isset ($ _POST ["art_subject"]))) ($ art_subject = "Sporočilo s spletnega mesta";) else ($ art_subject = sanitize_text_field ($ _ POST ["art_subject"]);) // Preverite polja za sporočila, če prazno, nato napišite sporočilo v niz napak, če (prazno ($ _ POST ["art_comments"]) ||! isset ($ _ POST ["art_comments"])) ($ err_message ["comments"] = "Vnesite vaše sporočilo.";) else ($ art_comments = sanitize_textarea_field ($ _ POST ["art_comments"]);) // Preverite niz napak, če ni prazen, nato pošljite sporočilo. V nasprotnem primeru pošljite e-pošto if ($ err_message) (wp_send_json_error ($ err_message);) else (// Določite prejemnika $ email_to = ""; // Če prejemnik ni naveden, vzamemo podatke iz nastavitev spletnega mesta, če ( ! $ email_to) ($ email_to = get_option ("admin_email");) $ body = "Ime: $ art_name \ nE-pošta: $ art_email \ n \ nSporočilo: $ art_comments"; $ headers = "Od:". $ art_name. "<" . $email_to . ">"." \ r \ n "." Odgovori: ". $ email_to; // Pošlji e-pošto wp_mail ($ email_to, $ art_subject, $ telo, $ glave); // Pošlji sporočilo o uspešnem pošiljanju $ message_success = "Sporočilo poslano. Kmalu vas bom kontaktiral."; Wp_send_json_success ($ message_success);) // Ponovno ukini proces ajax za vsak slučaj wp_die ();)

Obrazec preverimo za uspešnost. Težava se lahko pojavi, če datoteke js niste pravilno naložili v temo WordPress in pot do nje ni pravilno registrirana, in sicer v drugi kodi v razdelku // Vključi skriptno datoteko.

Izpolnimo in pošljemo pismo

Takšno pismo pride na pošto s povratno informacijo.

Kaj pride po pošiljanju

Super, uspelo nam je, v WordPressu smo lahko ustvarili obrazec za povratne informacije s tremi različnimi metodami, če imate kakršna koli vprašanja, vprašajte, bomo ugotovili. Vso srečo!

Všeč mi je všeč mi je



1 zvezdica2 zvezdici3 zvezdice4 zvezdice5 zvezdic 5,00 / 3
doma →D-povezava →Najboljši vtičniki WordPress za ustvarjanje kontaktnih obrazcev. WordPress Form Maker - brezplačen vtičnik za gradnjo odzivnih oblik katere koli zahtevnosti. Kontaktni obrazec za wordpress v ruščini →
Povezani članki: