Flektor 5
Ovo je dodatak za kreiranje kontakt forme. Izuzetno je popularan (drugi nakon dodataka i preuzimanja) među korisnicima, jer uspješno kombinuje jednostavnost korištenja i moćne opcije za prilagođavanje i dizajn obrazaca za kontakt. Pokušat ću razmotriti sve mogućnosti dodatka što detaljnije.
1 Raspakujte arhivu.
2 Kopirajte fasciklu kontakt-obrazac-7 v / wp-content / plugins /.
3 Idemo na administrativni panel bloga na " Dodaci"i aktivirajte dodatak.
Kada se aktivira, dodatak stvara zasebni izbornik u administratorskom području bloga pod nazivom "", a također stvara zadani obrazac za kontakt koji možete vidjeti u " Kontakt obrazac 7 \ Oblici":
Ako koristite predloženi "embed code", tada će obrazac na blogu biti ovakav:
Naravno, izgled ovaj obrazac za kontakt ovisit će o stilovima koji se koriste u vašem predlošku, ali općenito će izgledati ovako.
Za izlaz ovoga najjednostavniji oblik treba vam samo par minuta. I upravo zbog ove lakoće dodavanja kontakt forme mnogi korisnici vole ovaj dodatak.
Međutim, dodatak ima mnoštvo mogućnosti za kreiranje naprednih obrazaca za kontakt bilo koje složenosti. No, počnimo jednostavno, kreiranjem vlastitog obrasca, koji će se samo malo razlikovati od zadanog obrasca ugrađenog u dodatak. Kliknite na link "Dodaj novo":
Ovo će se otvoriti početna stranica dodavanje obrasca:
Dodatak automatski detektuje lokalizaciju koja se koristi u blogu, tako da nema potrebe da birate jezik, samo kliknite na dugme "". Ovo će prikazati stranicu dizajnera obrasca. Prva stvar koju trebate učiniti ovdje je preimenovati naslov obrasca:
Naslov nije bitan, samo da se ne zbunite u svojim oblicima. Postavite naziv vašeg obrasca, kliknite na " Sačuvaj", i kao rezultat dobio "embed code":
Sada možete zalijepiti predloženi kod u bilo koju svoju objavu ili stranicu (naravno u "Text" modu) kako biste u njemu prikazali obrazac za kontakt. Međutim, ni po čemu se neće razlikovati od zadanog obrasca, pa ćemo nastaviti raditi s dizajnerom obrazaca. Na desnoj strani dizajnerske stranice nalazi se dugme " Generiraj oznaku", klikom na njega dat će se:
Odaberimo, na primjer, broj telefona. Otvoriće se prozor poput ovog:
Zapravo, ovdje ne možete ništa promijeniti. Veličine, klase i tako dalje su sekundarne opcije i u većini slučajeva ne morate ih uređivati. Međutim, opcija "" može biti korisna kao savjet posjetiteljima kako da popune ovo polje.
Na primjer, postavljamo sljedeće vrijednosti:
Prilikom prikaza kontakt obrasca, polje će izgledati ovako:
Kada kliknete na ovo polje, upisani tekst će nestati, jer služi samo kao nagoveštaj za popunjavanje. Ali propustio sam smisao dodavanja odabrane oznake u sam obrazac za kontakt. Ova oznaka:
Potrebno je zalijepiti u lijevu stranu stranice dizajnera obrazaca, gdje se nalazi kod kontakt forme:
Kôd obrasca morate stvoriti ručno, odnosno sami urediti naslove, oznake odlomaka i prijelome redova, trebali biste dobiti nešto poput:
Sačuvajte kod obrasca i na kraju ćete dobiti sljedeći obrazac za kontakt:
Zapravo, na isti način možete jednostavno dodati svoj kontakt obrazac za nekoliko minuta bilo koja oznaka koristi dodatak. Neću vas prisiljavati da ručno isprobate svaku oznaku, odmah ću dati njihov rezultat:
1 Polje za tekst.
Običan tekstualni okvir, može se koristiti za ime, predmet, itd.
2 E-mail.
Koristi se samo za unos e-mail adrese.
3 URL.
4 Telefonski broj.
Koristi se samo za unos telefonskog broja (brojevi i crtice).
5 Broj (spinbox).
Koristi se samo za unos broja (može se koristiti za označavanje starosti, broja naručenih artikala itd.).
6 Broj (klizač).
Neispravno radi. Za prikaz ovog numeričkog klizača koristi se HTML5, a to, prvo, znači da takav klizač izgleda drugačije u različitim pretraživačima, a drugo, još uvijek ne radi. Na forumima podrške dodataka vidio sam rješenja koja popravljaju rad ove oznake, ali mi nisu pomogla - nisam mogao natjerati ovaj klizač da prikaže bilo kakve brojeve. Preporučujem da ne koristite ovu oznaku.
7 Datum.
Koristi se samo za unos datuma.
8 Polje za tekst.
U ruskom prijevodu ova oznaka se naziva i "Text field", ali u HTML terminologiji to je textarea, što u stvari znači samo uvećano tekstualno polje. Koristi se za unos teksta poruke.
9 Padajući meni.
Koristi se za odabir stavke (ili više stavki) iz padajućeg izbornika. Može se koristiti za bilo šta - od pitanja o boji naručenog proizvoda do odabira spola osobe.
10 Potvrdni okviri.
Koristi se za odabir jedne ili više stavki iz predloženih opcija.
11 Radio dugmad.
Koristi se za odabir samo jedne stavke od predloženih opcija.
12 Prihvatanje.
Koristi se za prihvatanje uslova.
13 Pitanje.
Koristi se za odgovaranje na navedena pitanja (pitanje se bira nasumično od navedenih opcija). U osnovi, ova oznaka se koristi kao zaštita od neželjene pošte. A ako spamboti mogu lako odgovoriti na brojčano pitanje, onda pitanja poput "na kojoj planeti živimo?" nisu u stanju da odgovore.
14 CAPTCHA.
Koristi se za prikaz potpunog captcha. Da biste koristili ovu oznaku, morate instalirati Really Simple CAPTCHA dodatak. Captcha je prilično čitljiva i stoga lako prodire naprednim spam botovima poput Hrumera.
15 Upload fajla.
Koristi se za slanje fajla. Možete odrediti maksimalnu veličinu i formate važećih datoteka.
16 Dugme za slanje.
Koristi se za slanje podataka obrasca za kontakt. Ovo je obavezna oznaka.
Sa oznakama koje se koriste direktno u kontakt obrazac, skontao. Pogledajmo sada kako da te iste oznake dobijete iz kontakt forme na vašu e-poštu. Odmah ispod koda kontakt forme u konstruktoru nalazi se predložak pisma koje vam je poslato iu njemu morate izvršiti potrebne izmjene. Ovo je važno jer će pogrešno popunjavanje ovog predloška spriječiti da znate što je posjetitelj napisao u vašem obrascu. Uzmimo oznaku broja telefona kao primjer. Recimo da je u vaš kontakt obrazac umetnut putem koda ovako:
Dakle, u šablonu poslatog pisma potrebno je da unesete sledeći kod:
Mislim da je smisao jasan. U kodu kontakt forme , au pismu samo naziv ovog polja ... Dodatak generira imena digitalnih oznaka kao što su , ali vas niko ne brani da koristite svoja imena. A što se tiče ostatka tagova u šablonu e-pošte - oni su takođe formirani po istom principu - umesto koristi itd.
Tekstovi koje obrazac za kontakt može dati mogu se ispraviti u dizajneru obrasca u odjeljku "Poruke":
Često postavljana pitanja o dodatku:
1 Prikaži grešku " ", kako to popraviti?
To znači da je ili navedeni obrazac izbrisan, ili je naslov obrasca pogrešno naveden (naslov u pozivnom kodu je ključan za pozivanje obrasca).
2 U pismu vidim oznake kao umjesto teksta, kako to popraviti?
To znači da posjetitelj nije popunio ovo polje. U ovom slučaju, oznaka se ne zamjenjuje, već se prikazuje onakva kakva jeste.
3 Postoje li ograničenja u odabiru imena za oznaku?
Tu je. Ako je petlja WordPress koristi se naziv "name", onda ga ne možete koristiti kao ime za oznaku. Na najbolji način izbjegavanje problema je dodavanje prefiksa za imena, poput riječi "vaš". Definitivno neće biti problema sa nazivom oznake.
4 Može li posjetilac biti obaviješten putem e-pošte da je njegov obrazac primljen?
Može. Koristite opciju "Odredište 2" u konstruktoru obrasca:
Ova opcija se može koristiti kao telefonska sekretarica.
5 Može li se ispunjeni obrazac poslati na više adresa?
Može. Koristite polje "" u opciji "Odredište":
Gde [email protected] Vaš dodatni email, na koji će biti poslana kopija obrasca koji je ispunio posjetitelj (komanda "cc" šalje slijepu kopiju).
6 Da li je moguće prikazati obrazac koji nije na objavi ili stranici?
Da. Zalijepite kod za pozivanje obrasca u tekstualni widget.
7 Da li je moguće prikazati obrazac direktno pomoću koda u datotekama šablona?
Da. Koristite kod kao što je:
| "" ) ; ?> |
8 Obrazac nije poslan, prikazuje se greška u crvenom okviru, kako to popraviti?
Kontaktirajte svog hostera, moguće je da PHP ne dozvoljava poziv funkcije mail ().
9 Prilikom slanja obrasca dobijam grešku u narandžastom okviru, kako da je ispravim?
Narandžasti okvir označava neželjenu poštu. Dodatci za keširanje mogu uzrokovati lažne rezultate zaštite od neželjene pošte. Konfigurirajte svoj dodatak za keširanje da povremeno briše keš datoteke (24 sata je dovoljno).
10 Polje e-pošte izgleda drugačije od ostalih polja u obrascu, kako to mogu popraviti?
Dodatak koristi HTML5 kod za unos adrese e-pošte ( umjesto ), a takav kod često nije formatiran u starim predlošcima. Morate izvršiti promjene u styles.css vaš predložak dodavanjem potrebnog koda za birač unosa tamo.
11 Kako umetnuti fajl koji je priložio korisnik u e-mail?
Da biste to učinili, koristite posebno polje "Priložene datoteke:"
Zaista zaslužuje vašu pažnju. Za razliku od mnogih drugih popularnih dodataka, on vas ne prisiljava da ih kupite. Pro verzija - sve njegove mogućnosti su dostupne odmah. Popularnost dodatka (preko 19 miliona preuzimanja) je zaslužena - uz svu njegovu funkcionalnost, izuzetno je jednostavan za konfiguraciju i dostupan čak i početnicima u motoru WordPress.
Ali zapamtite, ovo je dodatak za kontakt obrazac, a ne jednostavan dodatak za obrazac. Uz sve svoje mogućnosti, neće vam dozvoliti da kreirate napredni obrazac na osnovu bilo kakvih uslova. Njegova glavna svrha je stvaranje obrazaca za kontakt i ništa više. Za stvaranje dinamičke forme, obrasce za kreiranje objava i slično, koristite dodatke poput Ninja obrazaca, oni su prikladniji za to.
Ako i dalje imate pitanja o konfiguraciji dodatka - pitajte u komentarima, svakako ću vam pokušati pomoći.
Autor dodatka: Takayuki Miyoshi
Dotična verzija: 3.9.1
od 31.07.2014
Trenutna verzija: 5.1.4
od 04.08.2019
Kompatibilan sa WordPress verzijom: 4.9
i više
Aktivne instalacije dodataka: 5 000 000+
Preuzmite plugin verziju 5.1.4(ukupno preuzeto 121 112 956
jednom)
Da li vam se dopao post? Pretplatite se na ažuriranja softvera ili
Dodaje stranicu s politikom privatnosti na web lokaciju. Također, pod Kontakt formom 7, dodaje se saglasnost za obradu ličnih podataka. Dodatak je namijenjen samo web stranicama na ruskom jeziku. Prilikom ulaska, korisnicima se prikazuje obavijest o korištenju kolačića od strane stranice. Pogodno za 152FZ.
Za pitanja o dodatku pišite na ovaj mail: [email protected] Ne dajemo savjete putem online konsultanta na našoj web stranici.
Instalacija
- Instalirajte dodatak.
- Popunite potrebne podatke o kompaniji.
Saradnici i programeri
“Politika privatnosti za stranicu. Saglasnost pod obrascem za kontakt 7” je projekat otvorenog koda. Sljedeći saradnici su doprinijeli razvoju dodatka:
Dnevnik promjena
1.28 Provjera kompatibilnosti sa WP 5.0. Dodano skrivanje naslova iz teksta pravila
1.27 Provjera prisutnosti kolačića za ploču koja iskače odozdo pri ulasku na stranicu prevedena je u js
1.26 Dodate veze rel = nofollow dodatka
1.25 Dodan tekst ugovora pod standardni obrazac komentarisanje
1.24 Ispravljena greška u Java skripti
1.22 Ispravljene manje greške u admin panelu i prikaz teksta imena dugmeta pod kontakt formom 7 na stranici
1.21 Klasa kontejnera, s kojom je uokviren tekst politike, zamijenjena je sa container-ppcf7
1.2 Dodata klasa u oznaku
p> ispod obrazaca
1.1 Dodata opcija za prikaz / sakrivanje veze politike privatnosti u podnožju
1.01 Uklonjena dodatna p oznaka u poruci kolačića
1.0 Prva verzija u spremištu
FormGet je jednostavan WordPress dodatak koji funkcionira kao prevucite i drop, koji vam omogućava da kreirate različite kontakt forme za vašu stranicu. Samo trebate kliknuti na polja koja želite dodati u obrazac i obrazac povratne informacijeće biti spreman za nekoliko sekundi.
Obrasci koji se mogu raditi s ovim dodatkom
Obrazac za kontakt, obrazac za podršku, obrasci za rezervaciju, konsultantske usluge, obrazac za kontakt, mailing lista, upitnici, formular za prijavu za posao, čarobnjak za registracionu formu, kreator obrazaca za narudžbu i još mnogo toga se može učiniti u ovom sjajnom dodatku.
FormGet Kontakt obrazac je veoma efikasan alat koji će vam omogućiti da kreirate i ugradite kontakt obrazac na svoju web stranicu u nekoliko jednostavnim koracima... Odaberite polja obrasca, prilagodite opcije i jednostavno ugradite obrazac za kontakt na svoju web lokaciju jednostavnim postavljanjem koda u widget ili korištenjem prilagođenog kratkog koda. Ne trebate nikakvo znanje programiranja da biste napravili željeni oblik - ovo je dodatni plus u odabiru takvih ekstenzija.
Ako je na web mjestu instalirano nekoliko obrazaca za kontakt odjednom, svi podaci o njima mogu se pratiti na jednom mjestu - na kontrolnoj tabli. Značajnija prednost ovog dodatka je da su obrasci koje kreira prilagodljivi, što vam omogućava da ispravno prikažete potrebne podatke na bilo kojem uređaju bez pisanja dodatnih stilova i klasa.
Lista polja koja podržava dodatak:
Ime, adresa, kontakt telefon, poruka, plaćanje (integracija sa PayPal-om), datum (podrška za dd-mm-yy ili dd / mm / yy ili yy-mm-dd format), tekstualni niz, višeredni tekst, više izbor, privitci, potvrdni okvir, odabir (odabir s predložene liste), radio tipke, prijenos datoteka i Captcha.
Instalacija je normalna - putem administratorske ploče web lokacije na WordPressu.
Postavljanje i kreiranje kontakt forme
Nakon instalacije i aktivacije, vidjet ćete poseban obrazac dobrodošlice:
Kliknite gumb "Kliknite za stvaranje" i idite na postavke i stvorite obrazac za povratne informacije. Sva podešavanja su podeljena u 4 kartice:
- Kontakt Form Builder
- Embed code
- Ekstenzije
U početku se otvara prva kartica na kojoj možete kreirati svoj prvi obrazac za povratne informacije koristeći konstruktor.
Pogledajmo izbliza:
Postavljanje i korištenje dodatka je intuitivno, stoga ga instalirajte i koristite sa zadovoljstvom!
Mnoge web stranice postavljaju obrasce za povratne informacije tako da korisnici mogu ostaviti poruku administratoru bez napuštanja stranice. Najpopularniji, visokokvalitetni i prikladan za postavljanje i upotrebu je dodatak Kontakt obrazac 7- uz njegovu pomoć možete kreirati bilo koje kontakt forme i još mnogo toga. Pošto dodatak ima veliki broj različitih oblika i polja, može se koristiti za mnoge zadatke. Na primjer, koristio sam ga za kreiranje profila poslodavca i tražitelja posla na web stranici za zapošljavanje, za kreiranje obrasca za narudžbu proizvoda na stranici koja prodaje samo jednu liniju proizvoda, koristio sam ovaj dodatak za kreiranje složenog i obimnog obrasca za obračun za gradilište , za razne forme za povratne informacije i druge oblike. Ali ne radi se o tome, već o tome kako da se kontakt forma pojavi u iskačućem prozoru, tako da možete napraviti dugme za pozivanje kontakt forme na svakoj stranici, a ne samo na stranici „Kontakti“?
Nije baš teško, ali trebat će vam još jedan dodatak sa FancyBox efektom, meni se lično sviđaju ova dva dodatka: Easy FancyBox ili FancyBox za WordPress, postoje razni slični dodaci, ali bilo koji od njih odlično funkcionira i također vam omogućava da otvarate slike u skočni prozor.
U principu, instalirana su dva dodatka: Kontakt obrazac 7 i Easy FancyBox, obrazac za kontakt je kreiran, ostaje dodati kod u šablon.
Kôd je umetnut u predložak web lokacije u .php datotekama!
Popup kod obrasca za kontakt postavljen u kodu datoteke šablona:
Zatražite poziv
Ako umetnete kod za pozivanje obrasca direktno u Visual editor za uređivanje teksta u TEXT modu, tada će kod izgledati ovako:
Pojavni kôd obrasca za kontakt postavljen je u vizuelni urednik snima (u tekstualnom modu) u admin panelu stranice:
Zatražite poziv
U mom primjeru imam kod za obrazac "Zahtjev za povratni poziv" - postoje samo dva polja u obrascu - ime i broj telefona, tako da će administrator stranice nazvati klijenta.
Razmotrimo ovaj kod.
Ovo je kôd gumba za pozivanje prozora s obrascem, za ovo dugme možete postaviti sve stilove i umetnuti ga bilo gdje u predlošku:
Zatražite poziv
Ovo je kod za sam iskačući prozor, možete ga ostaviti ispod dugmeta za pozivanje prozora ili ga možete sakriti u podnožju kako bi kôd sadržaja bio čišći:
U ovom kodu, sam oblik se poziva funkcijom poput ove:
Tamo gdje je napisano - prikažite kratki kod za Kontakt obrazac, kratki kod je naveden u samoj kontakt formi kada se kreira:
Da biste pozvali nekoliko obrazaca na jednoj stranici, morate koristiti drugačiji ID za pozivanje obrasca.
Primjer pozivanja dvaju obrazaca za povratne informacije u iskačućem prozoru:
Obrazac za poziv 1
Obrazac za poziv 2V ovaj slučaj da biste pozvali više oblika, obratite pažnju na ove dijelove koda:
... a za drugi oblik: ... itd.
Umjesto prikaza kratkog koda za obrazac za povratne informacije, možete prikazati bilo koji sadržaj, na primjer, blokove s tekstom ili slikama, ili obrazac za pretplatu na Feedburner, na primjer, ovako se prikazuje obrazac za pretplatu na feedburner na jednoj od web stranica
Možete koristiti ovaj kod za svoj obrazac za pretplatu tako što ćete promijeniti samo adresu feeda http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed u svoju.
Važna tačka! Da bi obrazac imao lijep izgled, morate postaviti vlastite stilove prikaza za njega. Najbolje je umotati svoj obrazac u div kada kreirate obrazac u CF7.
Kako zatvoriti prozor sa formularom za povratne informacije (fancybox) nakon uspješnog podnošenja
Dodajte ovaj kod ako koristite dodatak s fancyboxom kao što je Easy Fancybox.
Ako se formular nalazi samo na stranici, onda je tamo sve jasno - tu su poruke o grešci i poruka nakon uspješnog slanja poruke odmah ispod obrasca.
Razmotrimo koje zanimljive varijante događaja mogu biti nakon podnošenja CF7 obrasca u iskačućem prozoru, odnosno u iskačućem prozoru. Kako napraviti takav obrazac, opisao sam u članku Kako napraviti obrazac za povratne informacije u iskačućem prozoru za WordPress.
Dodajte kôd u blok Dodatne postavke vašeg obrasca.
Nakon uspješno poslane poruke
Prikazujemo upozorenje „Hvala na prijavi!“ - primitivno i ružno.
On_sent_ok: "upozorenje (" Hvala na prijavi! ");"
Preusmjerite na stranicu zahvale
On_sent_ok: "location =" http: //site.tu/thankyou/ ";"
Samo zatvaranje iskačućeg prozora nije najbolja opcija, korisnik možda neće shvatiti da li je sve prošlo kako treba
On_sent_ok: $ .fancybox.close ();
Nakon uspješnog slanja poruke prikazujemo iskačući prozor "Hvala na narudžbi".
Prikazujemo iskačući prozor “Hvala na naručivanju”, dok se sam prozor nalazi u bloku sa id = “popup_msg”, izgled i stilove će trebati dizajnirati prema vašem dizajnu, kako bi sve bilo lijepo + napraviti dugme 'Zatvori' prozor zahvale.
Ovaj kod dodajemo u blok Dodatne postavke vašeg CF7 obrasca:
On_sent_ok: "$ .fancybox ((href:" #popup_msg "));"
Sam prozor izgleda ovako:
Ovaj kôd iskačućeg prozora može se postaviti bilo gdje, čak i u podnožje, čak i ispod obrasca, glavna prednost je što se ovaj prozor može pozvati bilo kojim drugim obrascem i ne morate sami napraviti svaki obrazac.
A za dugme "Zatvori prozor" dodajte sljedeći kod u datoteku skripte:
$ (". popup-close-btn"). on ("klik", funkcija () ($ .fancybox.close ();));
Kako preuzeti pdf datoteku nakon popunjavanja obrasca pomoću dodatka za kontakt obrazac 7
Otvorite pdf odmah na istoj stranici
On_sent_ok: "location =" http://site.ua/wp-content/uploads/2016/08/catalog.pdf ";"
Otvorite pdf na novoj stranici
On_sent_ok: "window.open (" http://site.ua/wp-content/uploads/2016/08/catalog.pdf "," _blank ");"
Upotreba metode on_sent_ok kuka se više ne preporučuje. Ova funkcija će biti ukinuta do kraja 2017.
Sada, da biste preusmjerili na drugu stranicu nakon uspješnog slanja obrasca, trebate koristiti događaj wpcf7mailsent
Na primjer, ova opcija za otvaranje modalnog prozora sa id = "sentMessage":
Document.addEventListener ("wpcf7mailsent", funkcija (događaj) ($ ("# sentMessage"). Modal ();), false);
Ako imate nekoliko obrazaca, onda za svaki ID obrasca možete kreirati vlastite događaje:
Document.addEventListener ("wpcf7mailsent", funkcija (događaj) (var id = event.detail.contactFormId; if (id == 4 || id == 44 || id == 45) ($ .magnificPopup.open ((items : (src: "#popup_msg"), tip: "inline"), 0);)), false);
id je broj obrasca
$ .magnificPopup.open - Ovaj primjer koristi Magnific Popup
Kreiramo događaj za određeni obrazac nakon uspješnog slanja poruke (koristimo uobičajeni Easy Fancybox)
Mnogi imaju poteškoća s ovim trenutkom, pa sam odlučio da ga uključim u članak.
Ova skripta će prikazati prozor id = "popup_msg" nakon uspješnog podnošenja jednog od obrazaca (id == 17754 ili id == 17758 ili id == 17757):
Document.addEventListener ("wpcf7mailsent", funkcija (event) (var id = event.detail.contactFormId; if (id == 17754 || id == 17758 || id == 17757) ($ .fancybox ((href: " #popup_msg "));)), false);
Jednostavna analiza koda
id == 17754 || id == 17758 || id == 17757 - prozor će biti prikazan samo za ove forme (ili / ili).
Prozor s porukom o uspješnom slanju (možete ga dodati u kod, ili bolje u widget za podnožje, na primjer, ako ne želite mijenjati šablon, ili još 100 opcija):
Ako dodate skriptu ne u datoteku skripte, već u podnožje ili uređivač js koda, onda je umotajte u ovaj kod:
JQuery (dokument) .ready (funkcija ($) (// kod ...));
