Formular de feedback WordPress fără plugin. Formulare pentru WordPress - rapid, simplu, eficient! ManageWP Feedback Panel

Implicit, WP nu are o astfel de funcționalitate, dar pluginurile și configurațiile special concepute pentru motor vin în ajutor.

Formular de feedback Comunicații WordPress Modul de contact 7 plugin

Voi analiza formularul de contact gratuit 7, care a fost tradus în rusă. Ca standard include:

• Adresa de mail
• Telefon daca se doreste
• Textul mesajului
• Captcha

Adăugați captcha reCaptcha

Instalăm pluginul ca standard prin panoul de administrare WordPress, așa arată în panou.

CF7 în căutare

Să setăm reCaptcha de la Google, să mergem la secțiunea de integrare și să facem clic pe linkul google.com/recaptcha. Trebuie să aveți un cont Google.

Link recaptcha

Îl va transfera în serviciu, va configura elementele ca în captura de ecran, va introduce domeniul corect și faceți clic pe trimite în partea de jos.

Conectarea captcha la site

Copiați datele pentru captcha, ambele chei.

Chei de acces

Să revenim la Plugin WordPressși faceți clic pe butonul Setări de integrare.

Integrare

Introducem cheile copiate din serviciul reCaptcha, le scriem în secțiunile corespunzătoare și le salvăm.

Salvarea setărilor

Crearea unui formular

Accesați setări și creați un formular nou. Ștergem marcajele standard.

Ștergeți inscripțiile standard

Introduceți numele noului proiect și faceți clic pe butonul Text, deoarece numele va fi introdus ca text fără reguli.

Câmp text

Va apărea o fereastră pop-up, personalizați-o în funcție de nevoile dvs.

Generator de etichete

Tipul determină dacă vizitatorul trebuie să completeze câmpul, l-am setat la da

Nu schimbăm numele, este un identificator unic

Valoare implicită, a introdus fraza pe care o voi vedea înăuntru

Utilizați în loc de substituent, adică până când nu se introduce nimic, inscripția va fi afișată

Nu recomand folosirea câmpului Akismet

Pentru a adăuga stiluri, introduceți clasa sau id-ul, creat pole-name

Introduceți eticheta în câmpul general

În mod similar, apăsăm butonul de e-mail, vedem aceeași interfață.

Generator de mail

Puteți introduce e-mailul prin text, dar apoi veți pierde funcția de verificare a corectitudinii. Pluginul va verifica dacă există un semn @.

Adăugați o zonă de text și o secțiune de telefon (opțional), principiul este același.

Butoane pentru telefon și zona de text

Anterior, am configurat integrarea captcha în WordPress, în versiunea de bază a CF7 nu există niciun buton pentru inserarea captcha, a fost creat un shortcode pentru aceasta și plasat sub celelalte elemente.

Tot ce rămâne este să adăugați un buton de trimitere, să selectați din listă și să configurați rezultatul acestuia.

butonul Trimitere

Rezultatul este următorul cod.

Codul final CF7

Configurarea trimiterii unei scrisori

Modificarea setărilor de e-mail

Etichete de câmp create mai devreme

Adresa de e-mail la care vor fi trimise scrisorile

Din și subiect, completați după cum doriți

Anteturi suplimentare, complet șters

Scriem în corpul scrisorii ceea ce dorim să primim pe e-mail după trimitere. De exemplu, am tastat Mail și am inserat eticheta corespunzătoare vizavi de acest cuvânt.

Faceți clic pe Salvați în partea de jos

Economisire

Testați filele de notificări și setări rămase, puteți modifica textul afișat în diferite situații.

Inserarea unui formular pe un site web

A fost generat un cod scurt în partea de sus a paginii, copiați-l.

Shortcode

Accesați orice intrare și lipiți-o.

Pune codul scurt în pagină

După ce faceți clic pe butonul Vizualizare, acesta va fi transferat pe site-ul afișând munca efectuată.

Versiunea finală

O caracteristică bună a dezvoltatorilor de teme WordPress este să realizeze un produs care acceptă CF7 în avans, ceea ce ușurează viața și nu necesită înregistrare. Stiluri CSSîn codul site-ului. Tema mea acceptă pluginul și afișează o imagine foarte frumoasă. Dacă nu sunteți mulțumit, atunci a fost atribuită o clasă fiecărui câmp, utilizați-o pentru a schimba designul. Am verificat tema și e-mailurile vin repede. Pentru alte metode, citiți linkul.

Voi atașa instrucțiuni video la tot materialul, arătând nu numai procesul de creare, ci și modul de realizare design frumos forme, deoarece întregul proces nu poate fi descris în text.

Faceți câmpurile orizontale într-o linie

M-am uitat pe internet și am fost îngrozit de câte manipulări se făceau. Nu vă voi arăta cum să personalizați complet designul; acesta este subiectul oricărui manual mare. Mergem să edităm formularul și să împachetăm câmpurile pe care vrem să le aliniem orizontal într-un div cu o clasă, uită-te la cod.

Vreau să aliniez câmpurile Nume, E-mail și Telefon într-o linie. Nu uitați să salvați modificările.

Înfășurați-l în div

Să mergem la Administrator WordPress Aspect> Editor de teme > style.css adăugăm stiluri pentru feedbackul WordPress la sfârșitul fișierului.

Flex-form(display:flex;) Ecran numai @media și (max-width: 655px)(.flex-form(display:block;))

Stiluri de prescriere

Din stiluri reiese că div-ului cu clasa flex-form i s-a atribuit proprietatea display:flex, care specifică aranjarea elementelor într-o linie, fără parametri suplimentari spațiul este împărțit în mod egal.

A doua intrare arată când rezoluția ecranului a atins 655 pixeli, formularul își schimbă proprietatea din flex în bloc și formularul va începe să fie afișat ca înainte, cu câmpuri unul sub celălalt. Această limită de 655 variază individual, stilul este făcut la dispozitive mobile feedback-ul mi s-a parut ok.

Formular pop-up de feedback

Acțiune pozitivă privind acceptarea cererilor de la CF7. Pluginul pentru afișarea ferestrei pop-up va fi Popup Maker. Nu o voi descrie, linkul către material se află în acest paragraf. În plus din acel articol.

Cum se adaugă la elementor

Pentru a insera un formular în elementor, trebuie să utilizați secțiunea shortcode. Formularul a fost creat conform instrucțiunilor de mai sus, ceea ce înseamnă că există un shortcode de la CF7. Să mergem la crearea paginii în Elementor și să căutăm un shortcode în căutarea elementului.

Găsirea unui element în elementor

Elementor a procesat cererea

Folosind setarea temei

In majoritate Șabloane WordPress nu există instrumente pentru a crea modul automat feedback. Dar șabloanele noastre de la WPShop au o funcție încorporată care este afișată folosind un cod scurt. Să ne uităm la exemplul lui Root. Trec la crearea unei pagini, apoi mă uit la instantaneu.

Supliment în ROOT

• Introdu textul [ formular de contact ] (fara spatii in paranteze)
• Faceți clic pe previzualizare

Se va deschide o pagină cu un formular deja adaptat, marcat și aranjat, prin care vizitatorul poate primi feedback de la administrator.

Funcția ROOT încorporată

Feedback prin widget-uri

Este ușor să inserați feedback în widget-uri. Widgetul text vă va ajuta, mutați-l în zona activă și scrieți codul scurt în el.

Folosind widget-ul text

Setăm titlul, introducem configurația în zona de text, mergem pe blog și vedem cum este procesat feedback-ul.

Formular în widget

Feedback fără plugin

Dacă preferați metode fără plugin, atunci există instrucțiuni excelente, le-am găsit pe Internet, dacă apare proprietarul codului, voi oferi cu plăcere un link.

Deschideți fișierul function.php pentru editare, scrieți codul despre cum să îl utilizați în partea de jos.

/*cod de feedback*/ add_shortcode("art_feedback", "art_feedback"); funcția art_feedback() ( ob_start(); ?>