Kako napraviti kontakt obrazac 7 na fotografiji. Sva polja (tagovi) obrasca. Polje za unos teksta za CAPTCHA radi na Internet Exploreru, ali ne i na Firefoxu. Nije moguće unijeti kod

(Zadnje ažuriranje: 19.05.2019)

Pozdrav, dragi čitatelju! Danas ću vam pokazati kako napraviti obrazac Povratne informacije s autorom web stranice/bloga u WordPressu, koristeći popularni dodatak Contact Form 7 (više od 5 milijuna instalacija). Uključeno u post : ispravna postavka Kontakt obrazac 7, anti-spam zaštita, kako promijeniti i konfigurirati izgled oblicima. Istaknuo je i glavne razloge zašto kontakt forma ne radi i ne šalje mailove. .

Kontakt obrazac je važno sredstvo za održavanje veze s čitateljima i obrnuto. Napišite osobno pismo, dajte ponudu autoru (koju on ne može odbiti), postavite pitanje, pošaljite nešto i još mnogo toga. Mi ćemo se pobrinuti za sve to i nećemo otkriti vrijedne informacije osobama izvana, našem kontaktu WordPress obrazac Kontakt obrazac 7. Evo ga, ovako nešto. Ja sam to tako napisao, i jako mi se svidjelo.

Oh, pismo je stiglo! Kontakt obrazac 7 dobro napravljen

Neću vas, dragi čitatelju, zamarati sa svim ovim pisanjem - prijeđimo na posao. Instalacija i pravilna konfiguracija modula za WordPress - kontakt obrazac 7.

WordPress obrazac za kontakt 7 dodatak

Dodatak za WP obrazac za kontakt 7

Contact Form 7 može upravljati s više obrazaca za kontakt gdje možete fleksibilno prilagoditi obrazac i sadržaj pošte s prilično jednostavnim izgledom. Obrasci imaju ugrađenu podršku za Ajax podnošenje, CAPTCHA, Akismet filter neželjene pošte i više.

Sve manipulacije vršimo u WordPress administratorskoj ploči. Kako biste instalirali dodatak, u odjeljku "Dodaci" kliknite "Dodaj novi". Unesite obrazac za kontakt 7 u prozor "Traži", naravno, on će se prvi prikazati. Pritisnite gumb "Instaliraj":

Kako instalirati dodatak

Obrazac za kontakt #1 prema zadanim postavkama

Sa slike možete vidjeti da standardno postoji standardna verzija obrasca za kontakt i gotov kratki kod za umetanje u novu stranicu, objavu ili bočnu traku (putem tekstualnog widgeta). Zadani izgled kontakt obrasca 7, instaliran na zasebnoj stranici web mjesta:

Izgled: Standardni kontakt obrazac na WordPress stranici

Ako želite samo pregledati, provjeriti ili promijeniti, odnosno dodati dodatna polja, kliknite na “Promijeni”. Gornji snimak zaslona.

Otvara se stranica Uredi obrazac za kontakt. Dodatak je na ruskom i stoga će vam biti vrlo lako shvatiti što je što. Kartica Predložak obrasca. Možete promijeniti predložak obrasca kako bi odgovarao vašim potrebama.

Na primjer, da biste dodali oznaku za učitavanje datoteke u predložak obrasca, trebate: Označiti mišem mjesto za umetanje oznake (po mogućnosti nakon poruke) i kliknuti odgovarajuću karticu "datoteka". S ovom značajkom možete dopustiti korisnicima da učitaju svoje datoteke putem vašeg obrasca, a zatim će vam biti poslana e-pošta s privicima datoteka:

Uredite obrazac za kontakt. Kartica datoteka

Otvorit će se prozor - Form Tag Generator: datoteka:

Da biste preuzetu datoteku priložili e-pošti, morate umetnuti oznaku ()

Obrazac za kontakt 7 nameće zadanu vrstu datoteke i ograničenja veličine datoteke. Kada ne postavite svoje opcije, zadane ekstenzije datoteka su: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, i wmv. A dopuštena veličina datoteka je 1 MB (1048576 bajtova). Kliknite gumb "Umetni oznaku":

Oznaka datoteke umetnuta je u predložak obrasca

Tamo gdje ste označili pokazivačem miša pojavit će se dodatna oznaka. Ako ste ga zalijepili na pogrešno mjesto, jednostavno ga kopirajte i postavite na pravo mjesto. Dodajte na isti način potrebne oznake u svoj oblik. Svakako kliknite plavi gumb "Spremi" nakon dodavanja dodatnih oznaka. A ovako će izgledati gumb za prilaganje datoteke uz pismo, nakon polja za poruku:

Gumb Odaberite datoteku u obrascu za kontakt

Ako sve učinite ispravno, nećete imati problema s dodatnim poljima.

Također provjerite kartice Mail, Form Submission Notifications i Advanced Settings. Po meni, tu nema potrebe ništa mijenjati. Ako samo u Dodatnim postavkama možete odrediti parametar - samo za pretplatnike - subscribers_only: true . Za detaljne informacije postoji poveznica na stranicu naprednih postavki.

A sada, prijatelji, moramo postaviti pripremljeni obrazac za kontakt na zasebnu, novu stranicu ili bočnu traku web izvora. Ovo je lako napraviti.

Obrazac za kontakt postavljamo na posebnu stranicu web stranice/bloga

Nakon svih postavki i spremanja obrasca, kopirajte kratki kod na stranici Contact Forms ili Edit Contact Form. Nakon toga izradite novu stranicu - odjeljak Stranice - Dodaj novo. Unesite naziv stranice, na primjer "Kontakti". Prebacite uređivač poruka u način rada "Tekst" i zalijepite kratki kod u polje za poruku:

Nova stranica sa kontakt formom

Ako vam je nova stranica automatski dodana u izbornik, tada postavite "Redoslijed" na 1, 2 ili 3 (što god da je u izborniku, prikazat će se stranica Kontakt). Pritisnite gumb "Objavi". Svi. Spreman. Također možete ručno dodati stranicu u izbornik. Sada imate obrazac za kontakt s autorom bloga/stranice.

Koristite istu metodu za dodavanje obrasca za kontakt na bočnu traku, podnožje ili u tekst članka. Kopirajte kratki kod i zalijepite ga u svoje objave ili sadržaj tekstualnog widgeta. Imajte na umu da se obrazac u bilo kojem trenutku može urediti ili stvoriti novi s različitim oznakama/poljima.

Primate li neželjenu poštu putem obrasca za kontakt 7?

Postoji zaštita. Spameri utječu na sve, a vaši obrasci za kontakt nisu iznimka. Prije nego što dobijete neželjenu poštu, zaštitite svoje kontakt forme snažnim anti-spam značajkama Contact Form 7.

Kontakt obrazac 7 podržava filtriranje neželjene pošte pomoću Akismeta. Inteligentna reCAPTCHA blokira dosadne neželjene botove. Pomoću popisa blokiranih komentara također možete blokirati poruke koje sadrže određene ključne riječi ili poslane s određenih IP adresa.

Pritisnite "Integracija". Googleova usluga reCAPTCHA štiti vas od neželjene pošte i drugih oblika automatizirane zloupotrebe. Pomoću integracijskog modula Contact Form 7 reCAPTCHA možete blokirati slanje obrasca od strane spambotova.

Google reCAPTCHA v3 integracija: zaštita od spama

Integracija dodatka s drugim recaptcha uslugama

Kliknite Postavi integraciju, a zatim slijedite vezu da biste dobili ReCaptcha API ključeve:

reCAPTCHA je Google servis

Da biste počeli koristiti reCAPTCHA, prvo morate registrirati svoju WordPress stranicu. reCAPTCHA je Googleova usluga, pa je za korištenje potrebno Google račun. Prijavite se na Google pomoću račun, i slijedite poveznicu https://www.google.com/recaptcha/admin. Vidjet ćete jednostavan obrazac za registraciju poput:

Registrirajte WordPress stranicu. Goodle reCAPTCHA

Navedite ime. Odaberite reCAPTCHA v3 (reCAPTCHA v3 ne zahtijeva CAPTCHA widget (potvrdni okvir "Nisam robot" koji se koristi u reCAPTCHA v2)) i u polje Domene unesite domenu stranice. Nakon registracije stranice, dobit ćete ključ stranice i tajni ključ. Unesite ih (gornji snimak zaslona) i spremite postavke. To je sve. Vaš obrazac za kontakt sada koristi reCAPTCHA račun za provjeru je li poruku poslao čovjek ili spambot.

Ako odlučite instalirati Contact Form 7, preporučujem da uz njega instalirate i dodatak Style Contact Form 7. Omogućit će vam uređivanje izgleda vašeg obrasca. Ne možete odabrati samo jedan od gotove šablone, ali i stvoriti svoj vlastiti jedinstveni dizajn. Želite li promijeniti svoj izgled? Onda je nastavak posebno za vas, ljubitelje ljepote.

Izgled kontakt forme - Contact Form 7 Style

Stilovi za povratne informacije 7

Contact Form 7 Style Plugin je dodatak za Contact Form 7 koji je potrebno instalirati na vašu WordPress stranicu. Podržava prilagođene stilove kojima se lako može upravljati putem administratorske ploče. Postoje i unaprijed definirani predlošci koji se mogu aktivirati u postavkama Contact Form 7. Nova kartica će se pojaviti u glavnim postavkama dodatka - Contact Form 7 Style Template. Prilagodba izgleda:

Gotovi predlošci obrazaca

Primjer, promijenio sam standardni vanjski u ovaj lijepi:

Izgled kontakt forme

Ne zaboravite da možete postaviti vlastite prilagođene parametre stila:

Dodatak podržava prilagođene stilove kojima se može upravljati putem administratorske ploče

U zaključku:

Slanje e-pošte s obrasca za kontakt 7 funkcionira bez problema za većinu ljudi. Ali ispada da nije za svakoga. Iako dodatak uspješno šalje milijune e-poruka svaki dan, postoje mnogi problemi koji mogu odgoditi ili zaustaviti elektronička pošta, na strani slanja i primanju tipične e-pošte.

Zašto kontakt obrazac 7 ne radi (slanje e-pošte)?

1. Problemi s vašim hostingom. Važno je napomenuti da slanje i primanje e-pošte uvelike ovisi o poslužitelju na kojem se nalazi vaša WordPress stranica;
2. Provjerite koristite li ispravnu adresu e-pošte za povrat;
3. Vaša se e-pošta može smatrati neželjenom poštom;
4. Dodaci ili tema su u sukobu s kontakt obrascem 7;
5. Javascript sukobi.

Ako ne možete slati e-poštu iz ovog dodatka, vjerojatno je da općenito ne možete slati e-poštu iz WordPressa. Ako se nešto dogodi, gospodo, odgovore na često postavljana pitanja o radu dodatka možete dobiti na stranici https://contactform7.com/faq/.

Ili na forumu podrškehttps://wordpress.org/support/plugin/contact-form-7/. Engleski jezik Nije važno, sve će biti jasno s prijevodom vašeg omiljenog preglednika.

To je sve što imam. Čini se da nisam ništa zaboravio. Sve najbolje. Sretno prijatelji.

p.s. Ispada da uređivanje starih postova (informacije za čitatelje trebaju uvijek biti relevantne) oduzima jednako vremena kao i pisanje nove upute. Užas!

Ovaj materijal će detaljno opisati postavljanje kontaktnog obrasca 7, dodatka za tako popularnu platformu za stvaranje i promicanje web stranica na World Wide Webu kao što je WordPress. Ovaj softverski alat omogućuje vam stvaranje i konfiguriranje obrazaca za povratne informacije.

Malo o WordPressu

Jedan od najpopularnijih i najraširenijih alata za razvoj i popunjavanje informacijskih izvora je WordPress. U početku je ovaj softverski proizvod bio usmjeren na stvaranje jednostavnih blogova. Ali tada su specijalizirani stručnjaci dopunili njegovu funkcionalnost, što je omogućilo stvaranje drugih internetskih izvora pomoću ovog sustava za upravljanje sadržajem.

Snage i slabosti ove platforme za izradu i promociju web stranica

Prednosti ovoga softverska platforma takav:

Jednostavnost i otvoreni kod.

Impresivna količina referentnih informacija.

Sposobnost razvoja bilo kojeg tematskog resursa na Internetu u najkraćem mogućem roku.

Visoke performanse bez dodatnih softverskih dodataka (plugins).

Ali nedostaci u ovom slučaju su sljedeći:

Web stranice izgrađene na WordPressu neće moći podnijeti velika opterećenja.

Dolazi do smanjenja brzine internetskog resursa prilikom instaliranja dodatnih mini programa ili, kako se još nazivaju, dodataka.

i zašto ih stranice temeljene na WordPress platformi trebaju?

Osnovna funkcionalnost sustava za upravljanje sadržajem poput WordPressa vrlo je skromna. Dovoljno je samo razviti najjednostavnije blogove i web stranice. Kako bi nekako poboljšali situaciju s funkcionalnošću softverske platforme i dodali joj fleksibilnost, programeri moraju instalirati posebne mini-programe, koji se u stručnom žargonu nazivaju dodacima. Jedan od njih je Contact Form 7. Postavljanje dodatka omogućuje vam stvaranje obrasca za povratne informacije s proširenom razinom funkcionalnosti na određenoj stranici sustava za upravljanje sadržajem.

Specijalizacija "Kontakt forme 7"

Kao što je ranije navedeno, stvaranje povratne informacije između posjetitelja i administratora internetskog resursa temeljenog na WordPress platformi glavna je zadaća Kontakt forme 7. Postavljanje pošte, uređivanje predloška, ​​slanje raznih datoteka nije potpuni popis mogućnosti koje ovo pruža mini-program. U tom će slučaju opterećenje hardverskih resursa web-mjesta biti relativno malo i njegova prisutnost neće dovesti do značajnog smanjenja performansi web-mjesta ili bloga.

Postupak instalacije dodatka

Postoje tri načina za instaliranje dodataka na WordPress platformu:

Preuzimanjem ZIP arhive s World Wide Weba i "učitavanjem" u odgovarajući direktorij internetskog izvora.

Korištenje raznih vrsta FTP klijenata.

Najsigurnija od tri opcije za instaliranje dodataka je posljednja. U ovom slučaju programski kod preuzet je sa službene web stranice i definitivno ne sadrži razne vrste zlonamjernih, opasnih fragmenata. Postupak instaliranja dodatka u ovom slučaju je sljedeći:

Idite na WordPress administratorsku ploču.

Zatim morate prijeći na odjeljak "Dodaci".

U prozoru koji se otvori odaberite "Dodaj novo".

U traku za pretraživanje unesite naziv dodatka - Kontaktni obrazac 7 - a zatim pomaknite pokazivač miša preko gumba "Traži" i kliknite jednom. Nakon toga, operacija traženja traženog softver.

Po završetku prikazat će se popis pronađenih dodataka. Na ovom popisu nalazimo onaj koji nam je potreban i kliknemo na gumb s oznakom "Instaliraj", koji se nalazi nasuprot njemu.

Nakon toga, sustav za upravljanje sadržajem će automatski preuzeti i instalirati ovaj dodatak.

Sljedeći korak je aktiviranje instaliranog softvera. Da biste to učinili, idite na karticu "Dodaci" i na popisu pronađite obrazac za kontakt7. Pokraj njega je natpis: "Aktiviraj", kliknite ga jednom mišem.

Ažuriramo administrativnu ploču sustava za upravljanje sadržajem i među njezinim stavkama nalazimo Contact Form7. Ovo je uvjet za uspješnu instalaciju ovog popularnog i funkcionalnog dodatka.



Konfiguracijski algoritam za "Obrasce za kontakt 7"

Postavljanje obrasca za kontakt 7 sastoji se od sljedećih stavki:

Izrada novog obrasca ili uređivanje starog koji je nastao prilikom instaliranja dodatka. Iskustvo pokazuje da je u većini slučajeva bolje koristiti opciju izrade novog obrasca.

U sljedećoj fazi odaberite jezik obrasca i postavite mu naziv.

Zatim trebate ponovno konfigurirati njegov predložak ako je potrebno.

Spremite učinjene promjene.

S prethodno primljenim kodom stvaramo novu stranicu.

U završnoj fazi morate otići na web mjesto i provjeriti ispravan rad kreirani element sučelja internetskih resursa.

Napravite novi obrazac

Odmah nakon aktivacije, ovaj dodatak stvara zadani obrazac za postavljanje pitanja od posjetitelja stranice ili bloga. Naravno, može se uređivati ​​i prilagođavati po potrebi. Ali bit će puno lakše izbrisati ovaj i stvoriti novi cijeli set sve potrebne funkcionalnosti. Da biste to učinili, trebate učiniti sljedeće:

Idite na izbornik ovog dodatka i odaberite "Obrasci".

U prozoru koji se otvori nakon toga, morate potvrditi okvir pored stavke "Obrazac za kontakt1".

Zatim, iznad njega, na padajućem popisu "Akcije" odaberite "Izbriši".

Kao odgovor pojavit će se pitanje za potvrdu radnji koje se izvode. Morate potvrditi brisanje obrasca i kliknuti na gumb “Da”.

Zatim odaberite stavku izbornika: "Stvori novo" u administrativnoj ploči "Wordpress" "Obrazac za kontakt7".

U prozoru koji se otvori, na padajućem popisu odaberite jezik sučelja budućeg obrasca - "ruski". Zatim kliknite gumb "Stvori".

Nakon toga će se prema zadanim postavkama generirati početni kod za novi obrazac za povratne informacije za WordPress. Nakon toga morat ćete izvršiti radnje kao što je postavljanje obrasca za kontakt 7.

Postavite naziv obrasca

Nakon završetka svih prethodnih koraka pojavit će se prozor za unos naziva novog obrasca u Contact Form 7 Style. Postavljanje počinje ovom jednostavnom operacijom na jednoj strani. Ali bolje je dati naziv obrasca na temelju optimizacija pretraživača. Stoga bi najoptimalnija opcija u ovom slučaju bila, na primjer, "Obrazac za povratne informacije" ili "Postavite pitanje administratoru stranice". Nakon što smo se odlučili za naziv ovog elementa sučelja, unesite ga u odgovarajuće polje prozora zahtjeva.



Uređivanje predloška “Contact Forms 7”.

U istom prozoru s nazivom kreiranog obrasca nalaze se 4 kartice. Prvi je "Predložak". Prema zadanim postavkama ovdje se formira samo 5 elemenata:

Mjesto za upisivanje imena posjetitelja internetskog izvora.

Polje za biranje adrese e-pošte poštanski sandučić posjetitelj koji je postavio pitanje.

Drugo polje omogućuje unos predmeta pitanja.

Posljednji element obrasca prema zadanim postavkama je gumb s oznakom "Pošalji".

Ako je potrebno, tekst u ovom polju se može uređivati ​​i dodavati drugi elementi sučelja. Da biste to učinili, samo odaberite kod bilo kojeg tekstualnog elementa (na primjer, dio koda gdje je označen predmet poruke i kopirajte ga pomoću kontekstni izbornik na istom polju na drugom mjestu. S desne strane nalaze se parametri (detaljnije će biti riječi u sljedećem odlomku), u kojima odabiremo element koji nas zanima. Nakon toga, traženi kod će se pojaviti pored padajućeg popisa. Zatim kopirajte ovaj kod i zalijepite ga umjesto koda predmeta poruke. Naziv elementa biramo prema vlastitom nahođenju.

Postavljanje duljine polja i više

Na istom mjestu možete promijeniti unos u kontakt obrascu 7. Podešavanje širine bilo kojeg tekstualnog polja vrši se na sljedeći način:

Na primjer, potrebno je povećati broj znakova u imenu posjetitelja internetskog izvora na 55. Standardno ih je 40.

Da biste to učinili, dodajte brojeve 60/55 na kraj koda. Rezultat će biti kod. Nakon spremanja promjena, duljina ovog polja bit će 60, a maksimalni broj znakova koji se mogu unijeti u njega bit će 55.

Na isti način možete promijeniti veličinu tekstualnog polja poruke. Samo u ovom slučaju potrebno je promijeniti kod ovog elementa na sljedeći način. U ovom slučaju 40 je broj slova u jednom retku, a 30 je ukupan broj pojmova u ovom elementu sučelja u Kontakt obrascu 7. Podešavanje izgleda samog obrasca vrši se upravo odabirom vrijednosti parametara svakog pojedinačni element. Stoga se preporučuje navesti specifične vrijednosti za svaki parametar naveden u ovom odjeljku u kodu svakog elementa.



Druge kartice obrazaca

Kao što je navedeno, prva kartica se zove "Predložak obrasca". Sljedeći u ovom prozoru je "Pismo". Određuje parametre lokacije na koju će se slati pošta s ovog internetskog izvora. Na kartici “Obavijest” generira se tekst poruke koji će biti prikazan ako je pismo uspješno poslano. Također postoji mogućnost da pripremite poruku u slučaju da niste u mogućnosti kontaktirati administratora stranice putem sredstava. Zadnja kartica u Kontakt obrascu 7 - “Dodatne postavke”. Sadrži one parametre koji se u praksi vrlo, vrlo rijetko koriste. Na primjer, možete ga koristiti za postavljanje praćenja teksta koji su unijeli korisnici pomoću Yandex metrike.

Polja koja se ovom obrascu mogu dodati pomoću ovog dodatka

Postavljanje obrasca za kontakt 7 za Wordpress omogućuje dodavanje sljedećih elemenata sučelja obrascu za povratne informacije:

• Testno polje je univerzalni element sučelja u koji možete unijeti bilo koji skup znakova.

  E-Mail - mjesto za unos naziva elektroničkog sandučića.

  URL - polje za unos adrese Internet stranice.

  Telefonski broj—omogućuje vam unos telefonskog broja u međunarodnom formatu.

  Element "Broj (spinbox)" omogućuje vam stvaranje polja za unos bilo koje cjelobrojne vrijednosti (na primjer, dob posjetitelja).

  Element "Broj (klizač)" dodaje klizač u obrazac koji vam omogućuje odabir numeričke vrijednosti iz određenog raspona.

  Stavka "Datum" stvara posebno polje za unos u kojem možete odrediti željeni datum. Kada aktivirate ovaj element sučelja, na dnu se pojavljuje kalendar u kojem možete odmah odabrati željeni datum.

  Zauzvrat, stavka padajućeg izbornika "Text field" namijenjena je za upisivanje tekstualnog dijela e-pošte.

  Sljedeća stavka - "Padajući izbornik" - omogućuje vam odabir željenog parametra s fiksnog popisa.

  Ali "CheckBoxes" je namijenjen odabiru jedne ili više vrijednosti s danog popisa.

  Element sučelja "Radio Buttons" gotovo je identičan prethodnom. Jedina je razlika što u ovom slučaju možete odabrati samo jednu točnu opciju, dok “CheckBoxes” mogu imati nekoliko točnih vrijednosti.

  Stavka "Prihvaćanje" omogućuje vam dodavanje samo jednog potvrdnog okvira u kreirani obrazac. U pravilu se koristi za upoznavanje s bilo kojim uvjetima i bez prihvaćanja istih neće biti moguće slanje e-pošte u budućnosti.

  Stavka "Izbornik" omogućuje vam stvaranje posebnog odjeljka u sučelju koji će zaštititi vaš poštanski sandučić od neželjene pošte. U tom slučaju morat ćete dati točan odgovor na pitanje prije slanja.

  Druga sigurnosna opcija je CAPTCHA. Kada ga odaberete, obrascu će biti dodan poseban odjeljak koji će prikazati sliku sa simbolima i dodatno polje za njihov unos.

  Sljedeća stavka je "Slanje datoteke". Omogućuje vam dodavanje datoteke s raznim vrstama objašnjenja i komentara na tekst pisma za administratora resursa.

  Posljednja stavka - "Gumb Pošalji" - omogućuje vam dodavanje odgovarajućeg elementa sučelja.

Spremite učinjene promjene

Nakon što su tražene vrijednosti postavljene i obrazac je pravilno konfiguriran, trebate sve to spremiti. Da biste to učinili, u prozoru za uređivanje dodatka idite do njegovog gornjeg dijela. Ovdje bi trebao postojati gumb "Spremi". Usmjerite pokazivač na njega i kliknite na njega jednom. Kao odgovor pojavit će se kod obrasca koji odabiremo istim pokazivačem miša i kopiramo. Zatim prijeđite na stavku "Stranice" na administrativnoj ploči sustava za upravljanje sadržajem. Zatim stvaramo novu stranicu sa traženim nazivom (na primjer, "povratne informacije", "Kontakti" ili "Postavite pitanje administratoru resursa"). Zatim pomičemo kursor za biranje u polje za unos njegovog koda. U tom slučaju trebate prebaciti način upisivanja koda na "Tekst" na ploči s parametrima. Nakon toga ubacite prethodno primljeni kod obrasca. Zatim, na desnoj strani sučelja pronađite gumb "Objavi" i prijeđite mišem preko njega. U sljedećoj fazi kliknite jednom lijevom tipkom miša na ovaj element sučelja sustava za upravljanje sadržajem.



Provjera rezultata

Nakon izvršenja prethodno navedenih manipulacija, sučelju internetskog resursa treba dodati novu stranicu na kojoj će se prikazati elementi navedeni u obrascu za kontakt 7. Postavljanje sučelja je u principu završeno. Samo trebate provjeriti je li softver ispravno konfiguriran. Da biste to učinili, morate otići na početna stranica web stranicu, blog ili portal. Zatim na popisu stranica nalazimo onu na kojoj je postavljen obrazac za povratne informacije. Idemo do njega, unosimo ispravne parametre u sva polja odjednom i šaljemo testno pismo sebi. Kao odgovor, trebala bi se pojaviti informativna poruka koja označava uspješan završetak ove operacije. Zatim pokušavamo poslati drugo pismo s praznim poljima. Nakon toga bi se trebala pojaviti poruka da morate postaviti sve odabrane parametre forme. Ako su u oba slučaja dobiveni prethodno navedeni rezultati, tada kreirani obrazac za povratne informacije funkcionira ispravno.

Prednosti i mane dodatka. Alternativne opcije

Izvrsno rješenje za programera početnika za izradu obrasca za povratne informacije je mini program Contact Form 7. Podešavanje slanja pošte, kreiranje elemenata sučelja i drugih važnih elemenata sučelja u ovom je slučaju uglavnom automatizirano i zahtijeva minimalno znanje korisnika. Stoga, za jednostavan internetski resurs početna razina a za administratora početnika ovo je izvrsno rješenje. Ali bilo koji dodatak dodatno opterećuje resurse web stranice, što smanjuje performanse. Zbog toga napredniji korisnici preporučuju izbjegavanje ovoga jednostavan način stvaranje povratne informacije. Možete ga i sami izraditi pomoću koristeći HTML, CSS i JS, iako s nižom razinom funkcionalnosti. To će smanjiti potrebu za računalnim resursima na stranici i značajno povećati razinu performansi.



Rezultati

Ovaj članak opisuje korak po korak kako konfigurirati obrazac za kontakt 7. Ovaj dodatak ima visoku razinu funkcionalnosti; možete ga koristiti za izradu bilo kojeg obrasca za povratne informacije. S druge strane, korištenje dodatnog dodatka kao dijela sustava za upravljanje sadržajem povećava opterećenje Hardver mjesto. Stoga se administratorima stranica početnicima koji se temelje na ovom sustavu upravljanja sadržajem preporučuje korištenje ovog dodatka u te svrhe. Pa, napredniji korisnici mogu i bez Kontakt forme 7. U ovom slučaju postavljanje dodatka definitivno nije potrebno.

Dodatak Contact Form 7 pomoći će organizirati povratne informacije na vašoj web stranici.

Dodatak Contact Form 7 možete preuzeti na službenoj WordPress stranici

Dodatak Really Simple CAPTCHA možete preuzeti na službenoj web stranici WordPressa

Pogledali smo kako instalirati i povezati ovaj dodatak u lekciji "", sada ćemo to shvatiti dodatne funkcije Obrazac za kontakt 7 ispravno radi na monitorima, tabletima, telefonima i prijenosnim računalima. Usput, ako vam se laptop pokvario, postoji servis koji popravlja HP ​​laptope.

Nakon što ste preuzeli i aktivirali dodatak, idite na postavke dodatka odlaskom na novi odjeljak upravljačke ploče "Kontakti".

Zadržite pokazivač miša iznad naziva obrasca i odaberite "Uredi"

Otvorit će se prozor za promjenu parametara forme.

Budući da stranica može koristiti ne jedan, već više obrazaca (forma za slanje poruke, forma za naručivanje poziva, forma s osobnim podacima), kako ne bi bilo zabune koja forma je za što zadužena, trebate promijeniti naziv obrasca. Da biste to učinili, kliknite na naziv obrasca 1.

Blok br. 2 prikazuje što će biti prikazano na stranici u obrascu. Prvo dolazi tekst, naziv polja, zatim šifra ovog polja. Možete promijeniti tekst u ono što želite.

Za dodavanje novih polja u formu kliknite na padajući popis br. 3 - “Generiraj oznaku” i odaberite željeni element iz padajućeg popisa.

• Polje za tekst
• E-mail
• Broj telefona
• Broj (spinbox)
• Broj (klizač)
• Polje za tekst
• Padajući izbornik
• Potvrdni okviri
• Radio gumbi
• Prihvaćanje
• Pitanje
• CAPTCHA
• Slanje datoteke
• Gumb Pošalji

Opisi alata i polja obrasca prema zadanim su postavkama raspoređeni na sljedeći način: opis alata na vrhu, element na dnu. Ako želite staviti opis i element u jedan red, uklonite oznaku iza teksta

. Cijeli blok s opisima i elementima mora biti u jednom retku i smješten unutar oznake

Polje za tekst

S padajućeg popisa odaberite element "Tekstualno polje".

Ako je neka funkcija koju dodate potrebna, označite okvir 1 i ne zaboravite to napisati u opisu.

Možete ga dodati u polje za unos Dodatne informacije radi lakšeg ispunjavanja obrasca. Potvrdni okvir 2 "Koristiti kao rezervirano mjesto?" i unesite savjet u polje pored njega. Kada ispunite ovo polje na obrascu, tekst opisa alata će nestati. Zatim slijedite upute dodatka. Rezultat će biti ovakvo polje u gotovom obliku:

Obavezno zalijepite kod u email predložak, inače podaci iz ovog polja neće biti poslani na email! Ovo se ne odnosi samo na tekstualna polja, već i na sve druge elemente.

E-mail

Koristi se za prijenos adrese poštanskog sandučića pošiljatelja u obrazac

URL

Omogućuje dodavanje adrese web stranice u obrazac.

Broj telefona

U ovo polje mogu se unijeti samo brojevi

Broj (spinbox)

Polje u kojem možete postaviti količinu nečega, na primjer proizvoda. Količina se postavlja pomoću strelica gore/dolje.

datum

Ubacuje kalendar u obrazac s mogućnošću odabira datuma. Na primjer, koristi se za rezerviranje hotelskih soba. Datum dolaska, datum odlaska.

Polje za tekst

Da, nemojte se iznenaditi :) Još jedno tekstualno polje. Ovaj put, ovo polje je veliko i omogućuje vam da u njega napišete puno teksta. Na primjer recenzije, komentari.

Padajući izbornik

Kada postoji mnogo opcija za nešto i trebate odabrati stavku s velikog popisa, na primjer popisa gradova, ulica, robe.

Popis mora biti postavljen u polje Odabir, svaka stavka u novom redu.

Potvrdni okviri

Potvrdni okvir ili potvrdni okvir u razvojnom žargonu je element koji stvara polje za označavanje okvira. Ovo polje ima dva stanja - označeno ili neoznačeno. Moguć višestruki odabir. Mogu se poredati samo u nizu ako označite potvrdni okvir "Učinite potvrdne okvire međusobno isključivim?". tada se može odabrati samo jedan parametar.

Radio gumbi

Prekidači (u žargonu: radio gumbi) koriste se kada je potrebno odabrati jednu jedinu opciju od više ponuđenih. Označavanjem okvira "Prvo postaviti oznaku, a zatim potvrdni okvir?" Lokacija oznake i polja za odabir mijenja se prema zadanim postavkama, prvo odabir, a zatim oznaka.

Prihvaćanje

Potvrda nečega. Pretpostavimo dogovor o prihvaćanju gore opisanih uvjeta.

Pitanje

Ovo je prva linija obrane od spama, najosnovnija. U postavkama napišite neko pitanje, može brojkama, može slovima ili oboje i označite točan odgovor. Ukoliko je odgovor prilikom ispunjavanja obrasca točan, obrazac će biti predan. Zeleno označava koji će dio ove formule biti prikazan na stranici prije polja za unos odgovora, crveno označava odgovor. Točan odgovor u formuli upisuje se iza znaka | (okomita crta)

Dodaje anti-spam zaštitu obrascu.

Za rad ove značajke potreban je još jedan dodatak. Preuzmite, instalirajte, aktivirajte dodatak.

Ne morate mijenjati postavke, samo kopirajte i zalijepite 2 retka prije gumba za slanje.

Slanje datoteke

Možete priložiti datoteku obrascu za slanje poruke. U postavkama možete odrediti maksimalnu veličinu u bajtovima i dopuštene formate za preuzimanje, na primjer.jpg .tiff .doc

Gumb Pošalji

Slanje obrasca. U postavkama, u odjeljku "Prečac", možete dati naziv gumba (Pošalji, odgovori, pošalji :)

Prilagođavanje izgleda Kontakt obrasca 7

Budući da dodaci imaju mogućnost ažuriranja, promjene izgleda obrasca izvršit će se u datoteci stila teme web stranice style.css

Kod je odgovoran za prikaz obrasca, njegovih polja i ostalih elemenata:

Wpcf7 (boja-pozadine:#ddd;) /*boja pozadine oblika */ .wpcf7 unos, .wpcf7 polje teksta( padding:5px; boja:#1D1D1D; obitelj-fontova:Arial, Helvetica, sans-serif; veličina-font-size: 16px; line-height: 1px solid #C7C7C7; inset 2px; -webkit-transition: all 0.2s-transition; : sve 0,2 s lakoće; prijelaz: sve 0,2 s lakoće; input( border: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input: lebdjeti, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( pozadina: #FDFDFD; obris: ništa; )

Što je što?

.wpcf7 unos, .wpcf7 tekstualno područje — stil polja za unos (tekstualno polje)

1. podstava- postavlja uvlaku od sadržaja do granice elementa. Ovdje je uvlačenje od teksta unesenog u polje do granice polja. Postavlja vrijednost u pikselima Xpx, gdje je X broj piksela. Primjer: padding: 5px 3px 6px 8px;
2. boja- boja teksta.
3. obitelj-fontova- font polja za unos.
4. veličina fonta- veličina fonta
5. linija-visina- visina linije
6. granica- okvir oko polja za unos
7. kutija-sjena- blok sjena. umetnuti označava da je sjena unutarnja. Ako želite vanjsku sjenu, preskočite ovu vrijednost. Druga i treća vrijednost od 2px 2px označavaju vodoravni i okomiti pomak sjene. Četvrta vrijednost, 8px, postavlja radijus zamućenja sjene. Peto - #F9F9F9 - boja sjene.

Prilagodba gumba Obrazac za kontakt 7

.buttons_form ( padding: 0px; visina: 30px; širina: 150px !important; border: none !important; cursor: pointer; color: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5em; granica-radijus: #faddde; pozadina: #d81b21; linearno, lijevo dolje, od(#ed1c24), do(# aa1317); pozadina: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aa1317");

Stil obavijesti obrasca za kontakt 7

Odgovoran je za poruke o pogrešci ili uspješnoj predaji

Wpcf7 .wpcf7-pogreške-validacije (border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( border:none; background-color:#7ad33f; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border -radius: 10px; border-radius: 10px; .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px ; -moz-border-radius: 10px; color: white .wpcf7-not-valid-tip(border:none; background-color:#349622; padding:padding- lijevo: padding-right: 5px; width: 290px; bijela boja; ; -moz-box-shadow: 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px rgba(0,0,0,0.3);

A sada, radi praktičnosti, cijeli kod s komentarima:

Wpcf7 ( background-color:#ddd; ) /*boja pozadine oblika */ .wpcf7 input, .wpcf7 textarea( /* Ovaj dio koda odgovoran je za stil polja za unos, područja teksta */ padding:5px; / * Postavlja ispunu iz elementa polja prije njegovog sadržaja, možete staviti bilo koju vrijednost, na primjer 10px */ color:#1D1D1D /* Boja teksta u poljima za unos */ font-family:Arial, Helvetica, sans-serif /; * Font teksta u poljima za unos */ veličina fonta: 16px; /* Veličina teksta u poljima za unos: 20px; /* Visina polja za unos: 1px solid #C7C7C7; /* Okvir oko polja .Prva vrijednost je širina u pikselima, a treća - njegova boja */box-shadow: /* Sjena od polja za unos x-os, 2px - pomak duž y-osi, 8px - radijus zamućenja sjene, #F9F9F9 - boja sjene */ -webkit-transition: sve 0,2s ease; -moz-transition: sve 0,2s-transition; : sve 0,2 s lakoća; prijelaz: sve 0,2 s lakoća; ulaz (obrub: nijedan; padding-lijevo: 0; margina-lijevo: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input:lebdjeti, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Ovaj dio je odgovoran za stil polja za unos kada pokazivač miša lebdi iznad njih */ pozadina: #FDFDFD; /* Pozadina polja za unos kada pokazivač miša lebdi iznad njega */ outline : none; /* Vanjska granica polja za unos teksta */ ) .wpcf7 input.wpcf7-submit(/* Ovaj dio koda je odgovoran za stiliziranje gumba Pošalji u obliku * / -webkit-transition: 0; - o-transition: none; /* Okvir oko gumba: relativan /* Tekst boja */ text-transform: uppercase; /* Transformacija teksta (velika slova znače da će tekst na gumbu biti prikazan velikim slovima) */ /* Zaokruživanje uglova gumba Vrijednosti sljedeća tri svojstva moraju biti isto, budući da su ista stvar, samo za različitim preglednicima */ -webkit-border-radius: 6px; /* Zaobljeni kutovi za Chrome */ -moz-border-radius: 6px; /* Zaobljeni kutovi za Mozilla FireFox */ border-radius: 6px; /* Zaobljeni kutovi za sve ostale preglednike, uključujući mobilne */ font-size: 14px; /* Veličina teksta gumba */ font-weight: bold; /* Stil teksta (podebljano znači podebljano) */ padding-top: 11px; /* Gornje ispunjavanje od ruba elementa do njegovog sadržaja */ padding-bottom: 10px; /* Donji razmak od ruba elementa do njegovog sadržaja */ padding-left: 35px; /* Lijevo padding od ruba elementa do njegovog sadržaja */ padding-right: 35px; /* Uvlačenje udesno od ruba elementa do njegovog sadržaja */ /* Gradijent pozadine - Gradijent pozadine gumba */ background-color: #000000; /* Boja pozadine gumba ako preglednik ne podržava gradijent */ /* U sljedećim svojstvima, boje bi trebale biti navedene iste, budući da su iste stvari, samo za različite preglednike. Pogledajmo prvo svojstvo. Dio from(#676767), to(#3B3B3B) znači da trebate prikazati gradijent, gdje iz boje #676767) postoji prijelaz u boju #3B3B3B */ pozadina: -webkit-gradient(linearno, lijevo gore, lijevo dolje, od (#676767), do (#3B3B3B)); pozadina: -moz-linearni-gradijent(gore, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - Sjena gumba. Boja sjene navedena je u RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); okvir-sjena: 0 2px 5px rgba(0,0,0,0.3); ) /* Pri lebdenju - Stilizirajte gumb dok lebdite pokazivačem miša. Sve je gotovo isto kao u prethodnom bloku */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(linearno, lijevo gore , lijevo dolje, od (#246416), do (#349622)); ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* Na klik - stil gumba kada kliknete na gotovo je isti kao u prethodnom bloku */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Boja teksta gumba kada se klikne */ background-color: #000000; background : -webkit -gradijent(linearno, lijevo gore, lijevo dolje, od(#FF0000), do(#246416)); Microsoft.gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: ništa; -moz-box-shadow: nema; box-shadow: nijedan; ) /* CF7 Poruke - Stil poruka o uspješnom slanju, pogreškama itd. */ .wpcf7 .wpcf7-validation-errors( /* Stil poruke za pogreške provjere */ border:none; /* Okvir bloka poruke */ background-color:#246416; /* Pozadina */ boja:#fff; /* Boja teksta */ margina:0; /* Vanjska margina */ padding:20px; Uvlačenje*/ /* Zaobljeni kutovi za različite preglednike - sljedeća 3 svojstva */ -webkit-border-radius: 10px; -moz-border-radius: 10px; rubni radijus: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Stil poruka o uspješnom slanju */ border:none; /* Okvir bloka poruke */ background-color:#7ad33f; /* Pozadina */ margin:0; / * Vanjski padding:20px; /* Zaokruživanje uglova za različite preglednike */ -webkit-border-radius: 10px; -moz-border-radius; : 10px ; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; .wpcf7-not-valid-tip(border:none; background-color:#349622; padding-left: 5px; padding-right: 5px; border-radius: 290px; /* Drop shadow */ -webkit-box-shadow: 3px 3px rgba(0,0,0,0.3); 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); .wpcf7-form .fleft( float: left; ) .wpcf7-form . mright20( margin-desno: 20px; ) .wpcf7-form .mright40( margin-desno: 40px; ) .wpcf7-form .clear( jasno: oboje; )

Obrazac za kontakt sastavni je atribut većine web stranica. To je razlog zašto u WordPress katalogu postoji toliko dodataka za obrazac za kontakt. Jedan od najpopularnijih je Contact Form 7. Dodatak vam omogućuje stvaranje obrazaca bilo koje vrste; vrlo fleksibilan i jednostavan za konfiguriranje; razvija se godinama i sadrži mnogo razvoja.

Izrada i prikaz kontakt obrazaca

Izrada obrazaca u admin panelu

Nakon instaliranja dodatka, pojavit će se stavka izbornika "Contact Form 7" putem koje možete kreirati i brisati obrasce.

Obrazac na slici kreiran je automatski kada je plugin aktiviran.

Koristit ćemo zadani obrazac, da bismo to učinili stvorit ćemo stranicu "Kontaktiraj me" i tamo umetnuti kratki kod obrasca.

Prednji dio stranice

Spremimo sada članak i pogledajmo kako izgleda naš obrazac (koristeći temu Twenty Sixteen):

Slika prikazuje obrazac nakon što je pismo poslano (na to ukazuje obavijest na dnu obrasca).

Prilagodba obrazaca (izrada složenih obrazaca)

Gornji primjer pokazuje kako umetnuti gotovu i vrlo jednostavnu kontakt formu. Sada pogledajmo kako stvoriti složeniji oblik. Da biste to učinili, vratimo se na administrativnu ploču, u upravitelj obrazaca i idimo na uređivanje zadanog obrasca.

U gornjem polju - naziv obrasca (vidljiv je samo u administratorskoj ploči) navedite naziv koji vam je jasan, na primjer: „Povratne informacije o stranici“, „Obrazac za prijavu za posao“, „Obrazac za povratne informacije“ itd.

Ispod naslova je kratki kod. Koristimo ga u zapisima za prikaz obrasca.

A ispod su četiri kartice:

1. Predložak obrasca
2. Pismo
3. Dodatne postavke

Pogledajmo svaku karticu zasebno.

Predložak obrasca

U ovoj kartici možete prilagoditi polja i izgled obrasca. Radni prostor je WP HTML editor. Samo umjesto uobičajenih gumba vidimo gumbe za umetanje različitih polja obrazaca.

Izgled obrasca

Za izgled možete koristiti html oznake i kratke kodove dodataka. Kratki kodovi dodaju polja obrasca, a html oznake omogućuju stvaranje prilagođenih HTML struktura. Na primjer, naš zadani obrazac izgleda ovako:

Vaše ime (obavezno) Vaš email (obavezno) Predmet Poruka

A kada se prikaže u objavi, pretvorit će se u ovaj HTML:

Vaše ime (obavezno)

Vaš email (obavezno)

Predmet

Poruka

Sintaksa kratkog koda

Kliknimo na gumb "Tekst". Otvara se prozor u kojem možemo odrediti atribute za tekstualno polje. Navedite i kliknite "Umetni oznaku".

Oznaka će se naknadno pretvoriti u tekstualno polje s html kodom:

Kratki kodovi mogu se jednostavno stvoriti pomoću alata za izradu kratkih kodova.

Ali konstruktor vam ne dopušta promjenu kratkog koda (tamo možete samo stvoriti kratki kod). Postoje dva načina za promjenu kratkog koda:

1. brisanje i kreiranje novog pomoću konstruktora.
2. Naučite sintaksu i ručno ispravite kratki kod polja.

Možete to sami smisliti s dizajnerom.

Ovdje ćemo pogledati sintaksu kratkog koda.

Na primjer, razmotrite oznaku tekstualnog polja s dodatnim opcijama:

Tekst (potreban) Vrsta polja: tekst, odabir, lozinka, broj itd. (u ovom slučaju polje je tekst). Određuje u koji će se element obrasca naša oznaka pretvoriti, a time i koju će vrstu podataka prihvatiti. * Zvjezdica čini polje obaveznim (obrazac se neće poslati i prikazat će se obavijest da je polje potrebno ispuniti). ime klijenta (potreban) Naziv polja koristi se kao atribut imena pri unosu, a koristi se i prilikom izrade predloška za poslano pismo. id:my-id Atribut id u unosu s vrijednošću my-id. Koristi se za dekoraciju. razred:moj-razred atribut klase u unosu s vrijednošću moja klasa. Koristi se za dekoraciju. rezervirano mjesto "Unesite naziv" Использовать текст "Введите имя" как placeholder. !}

Pratite redoslijed atributa oznake: prvo dolazi tip polja, zatim njegov naziv, a tek onda dodatne opcije.

Vrste polja

• Tekstualna polja: tekst, email, tel, url, textarea
• Numerička polja: broj, raspon
• Datumska polja: datum
• Potvrdni okviri, radio, popisi: potvrdni okvir, radio, odabir
• Polje za učitavanje datoteke: datoteka
• CAPTCHA: captchac i captchar
• Ankete: kviz
• Polje "Prihvaćam": prihvaćanje
• Gumb Pošalji: Pošalji
• Vrsta prilagođenog polja

Predložak pisma

U drugoj kartici možete fino podesiti predložak (izgled) i svojstva poslanog pisma. U poljima ove kartice možete koristiti posebne oznake polja obrasca - to omogućuje prijenos podataka navedenih u obrascu u pismu.

Oznake se sastoje od naziva polja iz predloška obrasca. Na primjer, stvorili smo tekstualno polje pod nazivom: . Sada možete koristiti oznaku u predlošku e-pošte. U pismu će umjesto ove oznake biti zamijenjena vrijednost polja koju je unio korisnik (puno ime).

Zaglavlja pisama:

Kome - elektronička pošta, gdje će pismo biti poslano. Možete navesti onoliko okvira koliko želite, odvojenih zarezima.

Od koga - ime i e-mail, od koga je stiglo pismo. Obično je ovdje navedena pošta poslužitelja (na primjer [e-mail zaštićen]).

Možete navesti bilo koju e-poštu, ali ako se domena e-pošte razlikuje od domene web stranice, obrazac neće će se testirati i "psovat će" na ovaj parametar, iako će se pisma i dalje slati.

Predmet - Naslov pisma. Bit će jasno iz kojeg su obrasca poslani podaci. Na primjer, predmet pisma je "Greška na web mjestu", "Naručite povratni poziv" i tako dalje. Odaberite zaglavlje koje olakšava rad s primljenom e-poštom.

• Dodatna zaglavlja - prema zadanim postavkama ovdje je zapisano Odgovori:. Zaglavlje Reply-To nam govori da se na ovu e-poštu može odgovoriti klikom na gumb "Odgovori" u program za poštu, a oznaka forme je naziv polja iz predloška. Adresa e-pošte koju je odredio korisnik bit će umetnuta umjesto ove oznake. Dobit ćete nešto poput odgovora: [e-mail zaštićen].

Tijelo pisma

Ovo je sljedeći važan dio ove kartice. Ovdje je naveden tekst samog pisma. U tekstu koristimo iste oznake obrasca (imena polja iz predloška obrasca).

Pogledajmo zadano slovo:

Iz:<>Predmet: Poruka: -- Poslano sa stranice Studying the Contact Form 7 plugin (http://test-wp.ru)

Imali smo 4 polja koja je korisnik ispunio. Nakon slanja pisma, oznake će se pretvoriti u vrijednosti i primit ćemo sljedeće pismo:

Od: Dmitrij Predmet: Pitanje o obrascu za kontakt 7 Poruka: Pozdrav! Imam pitanje o dodatku Contact Form 7. Kako ga konfigurirati? -- Poslano s web mjesta Studying the Contact Form 7 plugin (http://test-wp.ru)

Ne Obavezna polja u tijelu pisma

Ako korisnik ne ispuni polje, ali ono se koristi u tijelu pisma, tada će tijelo pisma biti nepotpuno. Na primjer, u tijelu piše Čovjek iz grada, ali korisnik nije ispunio polje, što znači da ćemo u pismu dobiti Čovjek iz grada... Ova linija u pismu je suvišna. Da biste uklonili ovaj redak iz poruke, potvrdite okvir "Isključi prikaz redaka s praznim oznakama poruke". Imajte na umu da će ovo funkcionirati samo ako su tekst i kratki kod polja u istom retku.

Opcija "Koristi HTML format e-pošte". Omogućuje korištenje HTML oznaka u tijelu pisma. U ovom slučaju možete koristiti ograničeno HTML popis oznake, jer ne sve klijenti e-pošte ili usluge mogu ispravno obraditi složene HTML oznake. Mogu se koristiti: tablice, popisi s grafičkim oznakama, podebljanje, odlomci i tako dalje. Više pojedinosti potražite na webu.

Contact Form 7 omogućuje slanje pisma na dvije adrese, a postavke za svako pismo su različite. Ovo može biti korisno kada trebate poslati pismo administratoru stranice s potpunim podacima i duplikat upravitelju, koji sadrži samo podatke o narudžbi.

Obavijesti prilikom predaje obrasca

U ovoj kartici možete urediti poruke koje obrazac prikazuje u određenoj situaciji: kada je pismo uspješno ili neuspješno poslano ili kada postoje greške.

Oznake predložaka e-pošte ne rade u ovim poljima.

Dodatne postavke

Ova je kartica namijenjena naprednim korisnicima i omogućuje vam da proširite mogućnosti obrasca pomoću JS koda. Na primjer, objavite događaje za analitiku.

O korištenju ove funkcionalnosti govorit ću u zasebnom članku.

Teško je zamisliti punopravno komercijalno mjesto koje nema obrazac za povratne informacije, a neke stranice čak koriste obrazac za povratne informacije kao obrazac za narudžbu. Istina, postoje i dinosauri koji pišu o potražnji za novim zgradama u Kijevu, ali kontakt s njima moguć je samo putem e-pošte:

Oni. da biste im pisali, trebate kopirati e-poštu, otvoriti softver/web stranicu, kreirati pismo, zalijepiti e-poštu, napisati tekst i poslati. Ali našim ljudima to je jako teško i lijeno. Lakše je ispuniti polje za ime na web mjestu, naznačiti svoju e-poštu, napisati pismo i poslati pismo pritiskom na gumb.

Neki CMS već imaju ugrađene obrasce, ali WordPress to nema (

Nemojte biti tužni, jer postoji izvrstan dodatak za obrazac za kontakt. Za otprilike 10 minuta imat ćete potpuno konfiguriran dodatak na svojoj web stranici, stoga nemojmo gubiti vrijeme, već se odmah bacimo na posao.

Instaliranje dodatka CF7

Najprije preuzmite dodatak i stavite ga u mapu ▬ /wp-content/plugins/

Zatim idite na administrativnu ploču na karticu dodaci I aktiviraj ga!

Ispravno postavljanje kontakt forme 7

Nakon instalacije, stavka bi se trebala pojaviti na lijevoj strani "Kontakt obrazac 7":

Kliknite na njega i počnite stvarati prvi obrazac ili uređivati ​​postojeće.

1. Ako trebate izraditi novi obrazac, kliknite "Dodaj novi"

2. Ako ste prvi obrazac prilagodili sebi, tada ga pomoću kratkog koda možete umetnuti u bilo koju stranicu, post ili widget.

3. Obrazac možete urediti klikom na njega.

Na nova stranica htjeti dodatne postavke polja, poruke o pogrešci pri slanju pisma, predložak pisma itd. Jednostavnim klikom možete dodati bilo koje polje u predložak obrasca.