Obrazac za kontakt 7 wordpress gotovih stilova.

Trebao sam nabaviti prekrasan obrazac za dodatak, obrasci koji su bili potrebni jučer, ali prilično je teško sjediti i pisati stilove ručno, a za mnoge projekte to jednostavno nije unutar proračuna. Stoga sam krenuo u potragu za zanimljivim dodacima za brzo postavljanje CSS kontakt obrazaca.

Svi su jednoglasno (ovo se odnosi na tražilice) preporučili - rekli su mudri ljudi - uredi css i nemoj nikoga zavaravati, uzmi Notepad i samo naprijed. Gledajući unaprijed, mudri su ljudi bili u pravu.

No, znatiželja je prevladala i odlučeno je detaljnije testirati dodatak.Već sam ga prije isprobao, ali činilo mi se izuzetno dosadnim i nezgodnim. Dodatak nije ažuriran 11 mjeseci, što je tužno. Nešto više od 6K webmastera je riskiralo povjerivši mu svoje forme, što također nije velik broj (od kojih sam ga ja skinuo četiri ili pet puta).

Nakon instalacije stvara odjeljak "Stil kontakta" u korijenu administratorskog izbornika. U ovom odjeljku postoje dvije stavke koje sadrže predloške za Valentinovo i Božić i “Prilagođeni stil” gdje možete potpuno prilagoditi izlaz obrasca. Zapravo, odjeljak "Prilagođeni stil" je ono što vas najviše zanima; više detalja o dostupnim postavkama:

“OPĆE POSTAVKE” - možete definirati boju pozadine, širinu oblika (postavite u px, % nisam probao), debljinu obruba, oblik (točkasto, puno itd.), boju, zaokruživanje.

“POSTAVKE UNOSA I OZNAKA” - pozadina polja za unos, boja fonta za unos, font (popis nije velik i jedva da ima nešto na ćirilici) i njegova veličina. Boja obruba polja, stil (puna točkasta linija, itd.), debljina, zaokruživanje. Font unosa i njegova veličina. Parametri margine u px - visina/širina, padding. Font oznake, stil, veličina, boja.

“POSTAVKE GUMBA POŠALJI” – postavke za gumb za slanje obrasca. Dostupne postavke su veličina gumba, zaokruživanje, boja, vrsta obruba i boja obruba.

Problemi u korištenju.

Nakon pregleda postavki, možete doći do zaključka da je sve vrlo dobro - praksa je pokazala suprotno. Postavke ima stvarno puno, ali nisu dovoljne - unutar obrasca nema postavki uvlačenja, tako da su svi blokovi skupljeni na lijevom rubu blizu ruba obrasca. Čudne "default" postavke - gdje je polje za unos 100*100 px. Ako ispravno postavite veličine polja, to neće utjecati na padajući popis i on će poprimiti stil glavne teme. Nije bilo moguće vratiti izvorne postavke prije deinstalacije dodatka...

Do sada, osim ručnog mijenjanja stilova, nije išlo koliko-toliko pristojno... Čudo se nije dogodilo.

Važna nota! Dodatak je nedavno ažuriran i nešto se značajno promijenilo u postavkama, pa morate pogledati i testirati.

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.

Dokumentacija i podrška

Snimke zaslona

Montaža

  1. Učitajte cijelu mapu contact-form-7 u direktorij /wp-content/plugins/.
  2. Aktivirajte dodatak na stranici Dodaci na nadzornoj ploči WordPressa.

U izborniku konzole WordPress pronaći ćete karticu "Povratne informacije".

Da biste saznali kako ispravno koristiti dodatak, možete posjetiti njegovu početnu stranicu.

Sudionici i programeri

Kontakt obrazac 7 je projekt otvorenog koda. Sljedeći suradnici pridonijeli su razvoju dodatka:

Sudionici

Dnevnik promjena

Za više informacija pogledajte Izdanja.

5.1.3

  • Ispravljena je pogreška koja je rezultirala nemogućnošću poništavanja odabira opcije na kartici Pošta.

5.1.2

  • Stalni kontakt: uveden birač popisa kontakata.
  • Stalni kontakt: Uvodi se dodatna postavka, constant_contact.
  • reCAPTCHA: Uvedene wpcf7_recaptcha_actions i wpcf7_recaptcha_threshold filter kuke.

5.1.1

  • reCAPTCHA: Mijenja odgovor na prazne tokene odgovora.

5.1

  • Uveden je integracijski modul Constant Contact.
  • Modul reCAPTCHA je ažuriran za podršku reCAPTCHA v3.
  • Dodaje pravila stila Dark Mode.

5.0.5

  • Riješen problem nedosljednosti između get_data_option() i get_default_option() u klasi WPCF7_FormTag.
  • Spriječava PHP pogreške koje se javljaju prilikom poziva unlink().
  • Predstavljen wpcf7_is_file_path_in_content_dir() za podršku konstanti UPLOADS.

5.0.4

  • Eksplicitno postavlja argument power_type u register_post_type() pozivu kako bi riješio problem s neovlaštenom eskalacijom privilegija.
  • Lokalni privitak datoteke - zabranjeno je navoditi apsolutne staze do datoteka koje se nalaze izvan direktorija wp-content.
  • Alat za provjeru valjanosti konfiguracije - dodaje testni element za otkrivanje netočnih postavki datoteke privitka.
  • Ispravljena je pogreška u značajci JavaScript kompatibilnosti s prethodnim verzijama za naslijeđene preglednike koji ne podržavaju HTML5 atribut rezerviranog mjesta.
  • Potvrdni okvir pristanka - onemogućuje funkciju ne-pohranjivanja oznake obrasca.

5.0.3

  • CSS: primjenjuje stil pokazivača "nedopušteno" na gumbe za slanje u stanju "onemogućeno".
  • Potvrdni okvir za prihvaćanje: revidira korisničko sučelje generatora oznaka kako bi se potaklo korištenje boljih opcija u smislu zaštite osobnih podataka.
  • Predstavlja funkciju wpcf7_anonymize_ip_addr().
  • Uvedena opcija consent_for:storage za sve vrste oznaka obrazaca.

5.0.2

  • Dodan odjeljak Obavijesti o privatnosti u datoteku readme.txt.
  • Ažuriran sadržaj meta okvira s informacijama.
  • Koristite get_user_locale() umjesto get_locale() gdje je prikladnije.
  • Potvrdni okvir prihvaćanja: poništi status onemogućenog gumba za slanje nakon uspješnog slanja.

5.0.1

  • Popravljene netočne upotrebe _n().
  • Provjera valjanosti konfiguracije: ispravljen netočan broj upozorenja na ploči kartice Dodatne postavke.
  • Provjera valjanosti konfiguracije: Ispravljen nepravilan tretman za [_site_admin_email] posebnu oznaku e-pošte u polju zaglavlja pošte Od.
  • Potvrdni okvir prihvaćanja: navedeni atributi klase i id-a primijenjeni su na pogrešan HTML element.
  • Provjera valjanosti konfiguracije: kada postoji dodatno zaglavlje e-pošte za poštanske sandučiće kao što su Cc ili Reply-To, ali ima moguću praznu vrijednost, vratit će se pogreška "Koristi se nevažeća sintaksa poštanskog sandučića".
  • Eksplicitno odredite četvrti parametar add_action() kako biste izbjegli prosljeđivanje neželjenih vrijednosti parametra.
  • Provjerite je li ciljni direktorij prazan prije uklanjanja direktorija.

5.0

  • Dodatne postavke: on_sent_ok i on_submit su uklonjene.
  • Nova dodatna postavka: skip_mail
  • Flamingo: promjene naslova dolaznog kanala u kombinaciji s promjenom naslova odgovarajućeg obrasca za kontakt.
  • DOM događaji: učinite cijeli objekt API odgovora dostupnim putem svojstva event.detail.apiResponse.
  • HTML pošta: dodaje atribute koji se odnose na jezik u HTML zaglavlje.
  • Prijenos datoteke: postavlja atribut prihvaćanja u polje za prijenos.
  • Predstavlja klasu WPCF7_MailTag.
  • Omogućuje vam da prekinete pokušaj slanja pošte korištenjem radnje kuke wpcf7_before_send_mail. Osim toga, možete postaviti prilagođeni status i poruku putem presretača radnji.
  • Potvrdni okvir za prihvaćanje: Omogućuje navođenje izjave o uvjetima u sadržajnom dijelu oznake obrasca.
  • Potvrdni okvir za prihvaćanje: podržava izbornu opciju.
  • Nove posebne oznake pošte: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname] i [_user_display_name]
  • Nove zakačke filtera: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type) i wpcf7_mail_tag_replaced_($type)
  • Nove značajke oznake obrasca: zero-controls-container i not-for-mail

Korištenje dodatka za obrazac za kontakt. Ali s vremenom je došlo do razumijevanja da mogućnosti ovog dodatka očito nisu dovoljne, a najveći je nedostatak to što vam omogućuje stvaranje samo jednog obrasca za povratne informacije.

Čini se da problema zapravo nema. Ali neki vlasnici web stranica trebaju više od jednog obrasca za povratne informacije, koji se može nalaziti ne samo na stranici "Povratne informacije" ili "Kontakt", već i na bilo kojoj drugoj stranici ili postu.

U ovom vodiču želim vam pokazati kako izraditi obrazac za povratne informacije pomoću drugog dodatka, funkcionalnijeg i malo složenijeg od onog o kojem se raspravljalo u prošlom postu. Hoćemo li početi?

Opis dodatka

Dodatak Contact Form 7 omogućuje vam stvaranje mnogo različitih obrazaca za slanje rezultata u vaš pretinac e-pošte. Apsolutno sve se može prilagoditi - izgled obrasca, redoslijed polja, naziv natpisa, format e-mail poruka, izbor primatelja odgovora. Općenito, dodatak je stvarno vrlo funkcionalan i cool.

Osim toga, na njega možete povezati dodatak Akismet za zaštitu od spama, implementirati ga i koristiti višejezičnu funkcionalnost. Ovo je, po mom mišljenju, cool! :-)

Instaliranje dodatka Contact Form 7

Dodatak se instalira na standardni način u WordPressu. Idite na odjeljak “Plugins” - “Add New”, unesite naziv Contact Form 7 i instalirajte ga iz repozitorija. Ne zaboravite aktivirati odmah nakon instalacije.

Postavljanje obrasca za kontakt 7

Nakon aktiviranja dodatka, u glavnom izborniku WordPress-a pojavit će se nova stavka „Kontakti (CF7)”; ovo je glavno mjesto za postavljanje obrazaca za povratne informacije. Broj obrazaca je neograničen.

Popis postojećih obrazaca dostupan je u odjeljku "Obrasci za kontakt":

Ovdje možete kopirati željeni kratki kod za lijepljenje na stranicu ili post:

Dodavanje novog obrasca za povratne informacije

Kao što vidite, u izborniku nema posebnih dodatnih stavki, pa prijeđimo na izradu samog obrasca za povratne informacije. Da biste to učinili, odaberite stavku "Dodaj novo" u glavnom izborniku.

Prije svega, od nas se traži da odaberemo jezik sučelja obrasca koji će se kreirati. WordPress otkriva instaliranu verziju na vašoj stranici i traži od vas da je odaberete kao zadanu:

Ali možete odabrati bilo koji dostupni jezik s popisa:

Nakon što kliknete gumb "Dodaj novo", pojavit će se dizajner obrasca.

Promjena naziva obrasca

Prije svega, moramo unijeti naziv našeg obrasca kako se ne bismo izgubili na popisu obrazaca kada ih je previše. Da biste to učinili, samo kliknite na riječ "Naslov" u gornjem dijelu zaslona:

Nakon toga pojavit će se tekstualno polje u koje unosimo naziv s opisom:

Nakon što se stranica osvježi, vidjet ćete sljedeću poruku:

Možete kopirati predloženi kratki kod i zalijepiti ga na stranicu koja vam je potrebna.
Ali to možete učiniti kasnije nakon što postavite obrazac. Tvoj izbor.

Promjena predloška obrasca

Predložak obrasca običan je HTML kod koji definira izgled vašeg obrasca. Prema zadanim postavkama sadrži 4 polja (ime, e-pošta, predmet i poruka) i gumb za slanje obrasca. Ovako izgleda:

Možete zamijeniti blokove jednostavnim rezanjem i lijepljenjem njihovog koda bilo gdje.
Na primjer, možemo zamijeniti polje adrese e-pošte i ime kupca:

Ili možemo ukloniti polje "Predmet" tako da se ne pojavljuje na našem obrascu. Da biste to učinili, samo izbrišite odgovarajući blok teksta u našem predlošku:

Zvjezdica pored koda elementa znači da je ovo polje obavezno i ​​dok klijent ne unese neku vrijednost, obrazac neće biti poslan:

Kako dodati novo polje u obrazac

Zamislite da standardnom obrascu trebate dodati polje s adresom web stranice. Dizajner obrazaca ovog dodatka omogućuje vam da bez problema provedete svoje planove. Samo upotrijebite gumb "Generiraj oznaku":

Kada se klikne, pojavit će se ogroman popis mogućih dodatnih polja:

Sve što trebate učiniti je odabrati vrstu polja koja vam je potrebna i izvršiti nekoliko jednostavnih koraka.

Nemojte se uznemiriti. Iako postavke izgledaju zastrašujuće, zapravo su vrlo jednostavne :-)

Potvrdni okvir "Obavezno polje" omogućuje vam postavljanje dodatnih provjera i sve dok ovo polje ostane prazno ili ima netočnu vrijednost, obrazac neće biti poslan. Gotovo sve vrste polja imaju ovu postavku:

Osim toga, mnoga naša polja obrasca imaju iste postavke naziva, ID elementa i CSS klasu, putem kojih možete promijeniti izgled tih polja. Prisutni su u gotovo svim poljima:

Polje "Ime" je najvažnije; koristi se iu predlošku obrasca iu predlošku pisma.

Ali dok sam koristio ovaj dodatak, nikad nisam morao mijenjati ili postavljati vrijednosti ovih atributa. Najvjerojatnije ni vama neće trebati. Ali moram im reći i predstaviti ih :-)

Sva tekstualna polja u našem konstruktoru obrazaca imaju dodatna polja s veličinom samog polja i maksimalnom duljinom vrijednosti, evo ih:

Također, određena polja, kao što je URL ili neka druga polja osim običnih tekstualnih, imaju svoje posebne postavke. Na primjer, naše URL polje ima dodatnu postavku:

Neću uzeti u obzir apsolutno sve postavke, jer... ima ih previše i specifični su za svaki tip polja. Pa, ako vam iznenada i dalje trebaju ove informacije, napišite o tome u komentarima na ovaj post i pripremit ću dodatni pregled postavki.

Sada trebamo dodati kod za ovo polje u obrazac predloška obrasca.
Da biste to učinili, trebate kopirati predloženi kod i zalijepiti ga u obrazac s lijeve strane:

Na primjer, želim postaviti polje s adresom web stranice iza imena klijenta. Morat ću unijeti kod sličan drugim poljima, to jest dodati odlomak, prijelom retka i umetnuti kratki kod ovog novog polja:

Pa, da bi nam vrijednost ovog polja bila poslana e-poštom, ovu vrijednost je potrebno kopirati:

I zalijepite u tekstualno polje ispod u “Predlošku e-pošte”:

Ostala polja se dodaju na sličan način. Sve je jednostavno i jasno :-)

Predložak adresata i pisma

Sada pogledajmo postavke koje se uzimaju u obzir prilikom slanja poruke. U našem slučaju to je primatelj (gotovo uvijek vi) i predložak pisma koje će biti poslano na navedenu e-mail adresu nakon slanja poruke.

Prije svega, potrebno je navesti primatelja na čiju će se e-poštu slati poruke iz naše forme. Prema zadanim postavkama, ovdje je umetnuta adresa e-pošte iz postavki WordPressa.

Mislim da ste već primijetili da ovi obrasci koriste nerazumljive kodove, kao što su , . Dakle, ovo je isto polje "Naziv" iz generatora polja o kojem sam govorio gore:

Pa, onda sve što trebate učiniti je srediti predložak samog pisma:

Možete koristiti sva polja koja ste automatski kreirali putem gumba "Generiraj oznaku" ili možete napustiti standardni obrazac ako niste ništa promijenili u postavkama.

p.s. U postavkama ovog dodatka postoji prilično zanimljiva prilika - odrediti drugog primatelja poruke. Da budem iskren, ne mogu odmah smisliti zašto bi to moglo biti potrebno, ali budući da postoji prilika, netko će je ipak iskoristiti.

Postavljanje poruka

Pa, kakav je ovo dodatak za slanje poruka ako vam ne dopušta promjenu teksta obavijesti ili natpisa? I dodatak Contact Form 7 nije iznimka. Omogućuje vam prijevod bilo kojeg teksta ili poruke o pogrešci:

poznati problemi

Događa se da će pri korištenju nestandardnih kontrola, poput e-pošte ili url-a, izgled pojedinih elemenata na stranici biti drugačiji. Na primjer, obratite pozornost na polje "Adresa vaše web stranice" u samom obrascu:

Zar nisi vidio? I pokazat ću ti bliže:

Općenito, problem je što se izgled takvih polja vizualno razlikuje od standardnih tekstualnih polja. Usporedite ga s poljem "Vaše ime", odmah ćete sve razumjeti.

Ovdje postoje dva moguća rješenja. Prva stvar je dodati odgovarajuće stilove datoteci style.css vaše teme ili promijeniti vrstu url-a u tekst u predlošku obrasca, tada će sve biti u redu:

Zaključak

Mislim da se pregled načina za izradu obrazaca za povratne informacije može smatrati potpuno zatvorenim, a sama tema je razmatrana gore-dolje.

Naravno, sigurno će se naći netko tko ili ne uspije ili želi predložiti neki drugi, sličan dodatak na razmatranje. Uvijek rado postavljam pitanja i prijedloge! Slobodno ih pitajte u komentarima :-)

Ako mi želite zahvaliti na materijalu, možete to učiniti ovdje :-)

Ako pronađete grešku, označite dio teksta i kliknite Ctrl+Enter.