Formular de feedback într-o fereastră modală WordPress. Formular de feedback într-o fereastră modală. Trimiterea unui mesaj către Administrație

Buna seara prieteni! În acest tutorial vă voi învăța cum să creați un formular de contact în WordPress folosind pluginuri. Formă părere pe WordPress servește solutie ideala pentru cei care doresc să mențină contactul cu publicul lor sau să primească aplicații la E-mail pentru a comanda orice servicii. Vom învăța cum să facem un formular pop-up într-o fereastră modală. După ce ați citit acest articol, veți putea încorpora singur formularul pe site-urile dvs. web. Deci să mergem.

De ce ai nevoie Formular de contact WordPress?

Poate vă întrebați de ce am nevoie de un formular de feedback pentru un site WordPress? De ce să nu adăugați o adresă de e-mail pe site, astfel încât oamenii să îmi poată scrie?

Aceasta este cea mai frecventă întrebare a începătorilor cărora le este frică să adauge cod de formular pe un site web fără cunoștințe de programare. De fapt, nu aveți nevoie de niciun cod atunci când creați un formular de contact în WordPress. În acest tutorial, vom crea un formular de contact pas cu pas, astfel încât chiar și cel mai complet începător să o poată face.

Mai jos sunt cele 3 motive principale pentru care utilizarea unui formular este mai bună decât doar adăugarea unei adrese de e-mail pe site.

– roboții de spam cu o regularitate de invidiat își folosesc analizatorii pentru a ridica adrese de e-mail unde există o mențiune domeniul de mailși adăugați-l în baza lor de date, astfel încât să vă poată trimite apoi corespondență nedorită. Pe de altă parte, atunci când utilizați un formular de feedback pentru WordPress, scăpați de problema e-mailurilor SPAM care vă copleșesc cutia poștală.
Completitudinea informațiilor – Când trimit e-mailuri, oamenii nu trimit întotdeauna toate informațiile de care aveți nevoie. Cu un formular de contact, decideți ce câmpuri aveți nevoie pentru a facilita utilizatorilor să vă trimită un e-mail (nume, e-mail, număr de telefon, comentariu și multe altele).
Economisirea timpului este o formă de inversare Comunicații WordPress vă va ajuta să economisiți timp. Pe lângă caracterul complet al informațiilor pe care le-ați solicitat utilizatorului și pe care acesta vi le va trimite, puteți indica și ceea ce vă așteaptă pe urmatorul pas, de exemplu, „Aplicația dvs. va fi examinată în 24 de ore” sau Vizionați videoclipul și multe alte lucruri utile.

Mai jos este un exemplu de formular de contact pe care îl vom crea în acest tutorial.

Să începem, domnilor.

Pasul 1: Alegerea celui mai bun plugin de formular de contact pentru WordPress

Pe acest pas Trebuie să decidem asupra pluginului de formular adecvat. Există o mare varietate de ele, atât gratuite, cât și plătite. În acest tutorial vă voi spune despre diferite plugin-uri, astfel încât să aveți o alegere largă. În primul caz, va fi folosit pluginul WPForms.

Mai jos sunt motivele pentru care WPForms este cel mai bun plugin părere:

În primul rând, acesta este cel mai prietenos plugin pentru începători. Prin simpla glisare și plasare a blocurilor necesare, puteți crea un formular de contact în câteva clicuri.

WPForms Lite este complet gratuit.

Când sunteți pregătit pentru o funcționalitate mai puternică și dacă este cu adevărat important pentru dvs., atunci puteți face upgrade la versiunea Pro.

Super, dacă aceste motive s-au dovedit a fi suficiente și te-am convins, atunci mergem mai departe.

Pasul 2: Instalați pluginul pentru formularul de contact WordPress

Pentru acest tutorial folosim versiunea Lite deoarece este gratuită și ușor de utilizat. Îl puteți instala conectându-vă la blog și accesând Plugins - Adăugați nou.

În bara de căutare, introduceți numele pluginului nostru și faceți clic pe Instalați acum.

După instalarea pluginului, asigurați-vă că îl activați. Aceasta este prezentată aici:

Pasul 3: Creați un formular de contact în WordPress

Deci, după finalizarea cu succes a activării pluginului, este timpul să ne creăm formularul de feedback. Pentru a face acest lucru, în panoul de administrare al blogului, faceți clic pe fila Meniu WPForms și accesați Adăugare nou.

Acest lucru va deschide designerul Wpforms pentru dvs., unde simplu drag and drop Cu blocurile necesare, puteți crea un formular de contact WordPress pentru feedback. ÎN versiune gratuită Lite are două șabloane prefabricate disponibile (alb și formă simplă). Le puteți folosi împreună pentru a crea cea de care aveți nevoie și este convenabilă pentru dvs. În acest exemplu, am ales a doua opțiune pentru dvs., și anume un simplu formular de contact. Îi vom adăuga un nume, un e-mail și un câmp de text.

Puteți face clic pe fiecare câmp pentru al edita. De asemenea, puteți trage și reordona câmpurile de formular folosind mouse-ul.

Dacă doriți să adăugați un câmp nou, pur și simplu selectați-l pe cel de care aveți nevoie din lista din stânga și trageți-l în zona de lucru.

Când totul este gata, trebuie doar să faceți clic pe butonul Salvare.

Pasul 4: Configurați notificări și confirmări

Odată ce ați creat cu succes un formular de contact în WordPress, este foarte important să configurați corect formularele de notificare și confirmare.

Formularul de confirmare este ceea ce văd utilizatorii atunci când vă trimit o solicitare de formular. Acesta ar putea fi un mesaj de mulțumire sau le puteți redirecționa către o altă pagină specială.

Formularul de notificare este mesajele pe care le primiți atunci când primiți un aplicatie noua sau scrisoare de e-mail de pe site-ul dvs. WordPress.

Puteți personaliza ambele câmpuri accesând Setări din interiorul pluginului WPForms forum builder.

În mod implicit, nu l-am setat să atingă și am lăsat câmpul Formular de confirmare cu mesajul „Vă mulțumim pentru solicitare” așa cum este. Cu toate acestea, aveți dreptul să îl schimbați în alt text sau să redirecționați utilizatorul către o pagină separată.

Cel mai bun lucru despre acest plugin este că setările implicite sunt perfecte pentru începători. Nu trebuie să-și dea seama ce să facă sau ce să schimbe. Totul este foarte intuitiv și simplu. Când accesați setările de notificare, toate câmpurile vor fi precompletate dinamic.

Notificările sunt trimise implicit la adresa de e-mail specificată în setări. Dacă doriți să schimbați destinatarul pentru trimiterea notificărilor, îl puteți schimba cu ușurință. Dacă doriți să indicați mai multe adrese de e-mail (specificate prin virgule), atunci vă rog, cartonașe în mână, după cum se spune :)

Câmpul Subiect e-mail va fi completat automat cu numele formularului dvs. Câmpul de nume va fi preluat din numele de utilizator (numele dvs.). Când răspundeți la o scrisoare, aceasta va merge la e-mail cu numele utilizatorului care a completat formularul de contact.

Pasul 5: Adăugarea unui formular de contact WordPress pe pagină

La acest pas, când ați creat și configurat formularul de feedback, trebuie să creați o pagină separată „Contacte”, unde să-l puteți plasa. Fie creați unul nou, fie îl editați deja pagina existentă, unde îl puteți adăuga.

Vom folosi un cod scurt simplu pentru a încorpora formularul în pagină. Pur și simplu faceți clic pe butonul „Adăugați formular” și selectați numele formularului pentru a-l insera în pagină.

Grozav. Acum salvați pagina și deschideți previzualizarea pentru a vedea modificările.

Cam așa va arăta formularul: WordPress simplu pagină:

Dacă doriți doar să adăugați un formular pe o pagină, atunci felicitări. Toți pașii au fost finalizați cu succes. Dacă doriți să îl adăugați ca widget în bara laterală, apoi continuați mai jos.

Pasul 6: Adăugarea unui formular de contact WordPress în bara laterală

Pluginul WPForms vine cu un widget de formular de contact încorporat pe care îl puteți adăuga în bara laterală sau în orice altă zonă a site-ului dvs. (cum ar fi subsolul).

Pentru a face acest lucru, trebuie să mergem la secțiunea „Aspect” -> Widgeturi. Acolo veți vedea un widget de plugin de formular preinstalat în partea stângă. Pur și simplu o luăm și setăm ordinea de afișare în zona dorită din bara laterală folosind o glisare și plasare obișnuită.

Următorul pas este să specificați numele widget-ului și să salvați. Intră pe site și vezi rezultatul.

Aceasta completează revizuirea pluginului nostru pentru formularul de feedback WPForms. Dar, mai ales pentru tine, am pregătit încă o recenzie a unuia plugin gratuit, cu care putem realiza un formular de feedback pop-up și toate aceleași caracteristici ca în cel precedent. Se numește Formular de contact 7. Este într-adevăr foarte puternic și atuul său este că este complet GRATUIT!

De asemenea, poate fi adaptat, adică formularul de feedback se va adapta la dimensiunea ecranului dispozitivului dvs.

Deci, pentru orice eventualitate, ca să știți că sunt acolo.

Cum să faci un formular de feedback de contact utilizând Formularul de contact 7

Continuăm să înțelegem problema creării de formulare pentru acceptarea cererilor de pe site-ul dvs. web. Avem în față un alt plugin pentru formularul de contact WordPress numit Formular de contact 7. Să-l instalăm pe blogul nostru și să-l activăm așa cum știm să facem.

Este deja instalat pe site-ul meu, nu pe acest blog. Procedura este standard. Acum trebuie să mergem la panoul de administrare al blogului și să creăm un nou formular care va colecta aplicații și altele Informatii utile. Accesați secțiunea „Formular de contact 7” -> Adăugați nou.

Grozav! Acum să-i dăm un nume adecvat, în cazul meu există o mulțime de aceste formulare de contact. Să alegem unul, de exemplu „Formular de comandă pentru promovarea site-ului”

Vă voi spune pe scurt de ce avem nevoie aici. În primul rând, trebuie să decidem câte câmpuri de formular vrem să facem. Voi spune imediat că nu este nevoie să creați 100.500 de câmpuri și este inutil, din simplul motiv că oamenii vă vor închide site-ul și nu vor lăsa o solicitare. Ei trebuie să facă acest pas mai ușor. Adică, dacă te gândești bine, ceea ce avem nevoie de la o persoană este:

Numele lui să i se adreseze (adresa personală)

Adresă de e-mail (feedback, unde să-i trimită o ofertă)

Număr de telefon de apelat imediat (dacă acest lucru se întâmplă rapid, atunci el va deveni oricum clientul tău)

Butonul actual „Trimite”.

Acestea sunt datele de bază, puteți afla deja pe altele în timpul corespondenței sau conversație telefonică. Logic? Cred ca da. Sa trecem peste.

Crearea câmpurilor de formular de contact în pluginul Formular de contact 7

Deci, ne-am decis asupra numărului de câmpuri, acum trebuie să creăm aceste câmpuri. Următoarele file sunt disponibile pentru noi:

Text (Orice câmp de text, cum ar fi „Nume”, „Pune o întrebare” sau orice alt titlu pe care îl vei colecta prin acest câmp)
E-mail (scopul aici este ca utilizatorul să introducă)
URL (adresa site-ului va fi introdusă în acest câmp, alte valori nu sunt acceptabile și va fi afișată o eroare)
Tel (câmp cu număr de telefon pentru formularul nostru de feedback WordPress, sunt acceptabile valori numerice, textul va da o eroare)
Număr (Intervalul numeric de valori, poate fi aplicat, de exemplu, prețului: „cât ești dispus să plătești pentru site? De la 23.000 la 120.000 de ruble”)
Data (Indicați data, de la ce dată la ce dată. Exemplu: „Rezervarea unui autoturism de la 13.04.2016 la 25.04.2016”)
Zona de text (Zona de text, aici puteți introduce text ca comentariu)
Meniu drop-down. Implementat pe blogul meu, îl puteți vedea. La finalul fiecărui articol, sugerez utilizatorilor să creeze fie un simplu site web, fie un magazin online. Aceasta este exact funcționalitatea pe care o oferă această opțiune.
Casete de selectare (cu mai multe variante, de exemplu: site web + creare logo + promovare + publicitate contextuală)
Butoane radio (Selectarea unui articol, de exemplu: „Comenzi sau publicitate contextuală sau vizate")
Acceptare (Acceptați termenii acordului, de ex. informații despre utilizator, ca o ofertă publică)
Test (Quiz este o serie de întrebări scurte care pot fi introduse și în formularul de contact).
reCaptcha (Confirmare că nu sunteți un robot și că nu veți trimite spam.) Protecție bună din SPAM. Notă: această opțiune funcționează dacă ați conectat pluginul Really Simple Captcha.
Fișier (Dacă doriți să permiteți utilizatorilor să încarce un fișier la dvs., de exemplu: „Atașați specificații tehnice pentru dezvoltarea site-ului”).
Trimiteți (Trimiteți datele prin e-mail)

Așadar, ne-am hotărât asupra câmpurilor, știți și semnificația fiecăruia. Să începem să construim formularul nostru de contact în WordPress.

În exemplul de mai jos am folosit 2 câmpuri: Nume, E-mail. În consecință, veți avea nevoie de aceste file:

Făcând clic pe fila text (Text) ajungem la caseta de dialog:

Aici trebuie să facem clic pe caseta de selectare Field Type – Required. Acest lucru se face astfel încât, dacă utilizatorul nu introduce un nume în el, atunci el nu vă va putea trimite o cerere; va apărea o eroare de trimitere, care indică faptul că nu toate câmpurile sunt completate corect.

Veți vedea apoi un cod scurt pentru inserarea acestui câmp și lângă el un buton albastru „Inserați etichetă”. Aceasta va adăuga un câmp nou de formular de contact.

Ca să nu te încurci, l-am evidențiat cu stil. Codul de mai jos:

Numele complet

< div class = "col-md-4" > < label class = "sr-only" >Numele complet< / label >[ text* text - 658 class : form - control substituent „Numele tău" ] !}< / div >

Și iată ecranul:

Efectuăm o operațiune similară pentru câmpul „E-mail”. Facem clic pe fila corespunzătoare și intrăm în această casetă de dialog.

Nu este absolut diferit de precedentul, doar ne repetăm acțiunile. Câmpul meu de e-mail are și un stil. Vă ofer codul mai jos:

E-mail complet

< div class = "col-md-4" > < label class = "sr-only" >E-mail complet< / label >[ email* email - 447 class : form - control placeholder "E-mailul dvs.)." ] !}< / div >

Și iată ecranul:

Și, în sfârșit, butonul „Trimite”. Ea este în stilul meu.

< div class = "col-md-4" >[ submit class: btn - flat class: col - xs - 12 "Comandă"]< / div >

< / div >

Notă importantă: Dragi prieteni, în acest exemplu folosesc stiluri responsive pentru a crea un formular de contact în WordPress, ceea ce înseamnă că poate lua forme de orice dimensiune de ecran.

Veți vedea butonul din dreapta colțul de sus. Cu siguranță nu o vei rata. 🙂

Am făcut o parte din muncă, acum trecem la etapa următoare.

Setări adresa postala pentru acceptarea cererilor

La acest pas, trebuie să facem câteva setări, astfel încât scrisorile să ne fie trimise în căsuța poștală. Vă voi spune mai jos cum să realizați acest lucru.

Trebuie să facem clic pe fila mare „Scriere”. Acesta va fi al doilea după șablonul de formular.

Primul lucru pe care îl veți vedea sunt etichetele pe care le-ați adăugat, trebuie să le introducem în corpul scrisorii, acestea vor înlocui datele pe care utilizatorul le introduce din formular. Cred că am explicat clar.

Acum pentru câmpuri:

Către (Unde va fi trimisă aplicația, în cazul meu, aceasta este adresa mea de e-mail, puteți specifica mai multe adrese unde să trimit aplicațiile)
De la (Câmp De la, adică valoarea va fi înlocuită pe care aplicația provine de pe site-ul meu studio)
Subiect (Servește pentru a determina din ce formă provine aplicația, în cazul nostru este o aplicație din formularul de promovare a site-ului).
Anteturi suplimentare (Anteturi suplimentare, nu le atingem, sunt necesare pentru trimiterea corectă a formularului)
Corpul mesajului (Corpul mesajului, aici indicați de la cine a venit scrisoarea și de la ce adresă, de exemplu: „De la: Ivan” „Adresă de e-mail: vasya @ mail. ru”)
Fișiere atașate (Atașamente la fișier, nu atingeți)

Acum trebuie să configuram notificări despre trimiterea cu succes sau nereușită a unui e-mail din formularul de contact WordPress.

Acestea vor fi mesaje care vor fi afișate utilizatorului ca răspuns la acțiunile sale cu formularul. În mod implicit, se duc la Limba engleză. Am tradus în rusă cele mai necesare lucruri pentru tine. Vor fi mai mult decât suficiente, iar dacă nu, atunci Google Translator vă va ajuta. Asadar, haideti sa începem.

Când trimiteți un mesaj cu succes: „Mesajul dvs. a fost trimis cu succes. Mulțumesc."
Dacă un mesaj este trimis incorect din formular: „A apărut o eroare la trimiterea mesajului. Vă rugăm să încercați din nou mai târziu sau să contactați administratorul site-ului."
Eroare de completare: „Erori de completare. Vă rugăm să verificați toate câmpurile și să trimiteți din nou."
Datele trimise sunt identificate ca spam: „Eroare la trimiterea mesajului. Vă rugăm să încercați din nou mai târziu sau să contactați administratorul site-ului."
Unele condiții trebuie acceptate: „Vă rugăm să acceptați condițiile pentru a continua.”
Unele câmpuri trebuie completate: „Vă rugăm să completați un câmp obligatoriu”.
Lungimea caracterelor din câmp a fost depășită: „Au fost specificate prea multe date”.
Lungime insuficientă a caracterelor în câmp: „S-au specificat prea puține date”.
Format de dată nevalid: „Formatul datei este incorect”.
Data devreme la limita minimă: „Data specificată este prea devreme”.
Data de întârziere la limita maximă: „Data specificată este prea târziu”.
Descărcarea fișierului a eșuat: „Fișierul nu a putut fi descărcat”.
Tip de fișier nepermis: „Acest tip de fișier nu este permis”.
Se încarcă de asemenea dosar mare: "Acest fișier este prea mare."
Încărcarea fișierului a eșuat din cauza erori PHP: „Încărcarea fișierului a eșuat. A avut loc o eroare."
Formatul numărului introdus de expeditor este incorect: „Formatul numărului este incorect”.
Numărul este mai mic decât limita minimă: „Acest număr este prea mic”.
Număr mai mare decât limita maximă: „Acest număr este prea mare”.
Expeditorul nu a introdus un răspuns corect la întrebarea: „Ați introdus un răspuns incorect”.
Adresa de e-mail introdusă de expeditor este incorectă: „E-mail nevalid”.
Adresa URL introdusă de expeditor este incorectă: „Adresă URL nevalidă”.
Numărul de telefon introdus de expeditor este incorect: " Număr incorect telefon."

Foarte bun. Am terminat cu configurarea formularului, acum trebuie să-l introducem în site. Pentru a face acest lucru, folosind o tehnologie deja cunoscută, să mergem la o pagină existentă sau să creăm una nouă. În exemplul meu, vă voi arăta un exemplu de formular existent pe o pagină de pe un site WordPress.

Deoarece formularul nostru colectează aplicații pentru promovarea site-ului web, să mergem la o pagină similară.

Pentru a introduce formularul nostru de contact, trebuie să copiem codul scurt care i-a fost atribuit de plugin. Este disponibil sub numele formularului dvs.

Copiem și lipim în pagina noastră, după ce mergem la editor de text(nu vizual). Afișat în captura de ecran de mai jos:

Să ne salvăm pagina și să vedem cu ce ajungem în browser:

Super! Acum să încercăm să trimitem formularul fără a completa nimic. Și asta vom vedea.

A apărut o eroare la trimiterea formularului deoarece utilizatorul nu a furnizat datele necesare în câmpuri. Acum să introducem datele corecte și să vedem ce obținem în acest caz.

Faceți clic pe Trimiteți și iată ce scrie formularul nostru:

Acum să vedem cum arată aplicația noastră. Ei vin la e-mailul meu. Să verificăm livrarea:

Să intrăm înăuntru pentru a ne asigura că codificarea și toate datele sunt corecte.

Totul este in regula. Formularul funcționează bine și trimite date. Acum putem colecta aplicații care vă vor veni când începeți, dacă vorbim de promovare regională.

Așadar, v-am spus cum să faceți un formular de contact în WordPress pe o pagină de site. Acum vă voi spune cum să faceți un formular de feedback adaptiv pop-up folosind pluginul nostru Formular de contact 7.

Crearea unui formular pop-up de feedback de contact în WordPress

Pentru ca formularul nostru să devină adaptiv, adică „fluid”, trebuie să conectăm un alt plugin, sau mai degrabă adăugarea acestuia la Formularul de contact 7 - se numește Formularul de contact Bootstrap 7. Instalăm și activăm pur și simplu și gata - funcționează. Nu trebuie să faceți setări cu el. Setează-l și uită-l.

În pasul următor, vă voi spune ce modificări trebuie să facem pentru ca formularul să apară și să fie receptiv. Am făcut o implementare similară pe pagina principala site-ul studioului dvs. Pentru a face acest lucru, să mergem la șablonul index.php, care se află în secțiunea „Aspect - Editor”. Vom lucra doar cu cod, manual.

Formularul nostru pop-up va apărea într-un dialog modal ca acesta:

Pentru a obține acest rezultat veți avea nevoie de următorul cod, îl voi prezenta integral într-un fragment:

Comanda ×Închide Lăsați o solicitare

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

< ! -- Modal -- >

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

< div class = "modal-dialog" >

< div class = "modal-content" >

< div class = "modal-header" >

< button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >×< / span > < span class = "sr-only" >Închide< / span > < / button >

< h4 class = "modal-title black" id = "myModalLabel" >Trimiteți cererea dvs< / h4 >

< / div >

Bună, iubitul meu cititor! În acest episod vă voi spune cum am implementat un formular pop-up sună din nou pe site-ul WordPress.

Cert este că formularul de apel invers este folosit foarte des de majoritatea webmasterilor tocmai pentru comoditatea utilizatorilor, astfel încât aceștia să finalizeze acțiunea țintă cât mai curând posibil - adică să lase o solicitare pe site.

Le puteți vedea adesea pe multe site-uri comerciale care oferă servicii sau oferă să cumpere orice produse. De fapt, magazinele online nu sunt un ciclu complet, adică atunci când nu există coș de cumpărături, ci există ceva de genul unei precomenzi prin acest formular. Iată cum ar putea arăta:

Sau sub forma unui buton tot în antetul site-ului:

Cineva le poate folosi în subsolul site-ului, este permis și acest lucru. Arata cam asa:

Deci, prieteni. Toate acestea au fost exemple, acum vom implementa în practică același formular de apel invers pentru un site WordPress. O voi face pe un site web dedicat amenajării teritoriului Kaliningrad.

În primul rând, trebuie să ne autentificăm și să mergem la secțiunea de pluginuri, unde vom adăuga plugin nou numit Formular de contact 7. Aceasta este cea mai populară soluție pentru crearea de bloguri simple și complexe.

Nu e nimic al naibii - 24 de milioane de descărcări spun deja multe. Faceți clic pe butonul de instalare și acesta va apărea în partea stângă a panoului de administrare.

Limba rusă este deja selectată implicit, așa că nu trebuie să vă faceți griji. Ne continuăm procesul.

Acum trebuie să adăugăm câmpurile care vor participa. Le aveți deja implicit, în principiu le puteți lăsa, nu le șterge. Singurul lucru pe care l-aș adăuga este un câmp obligatoriu cu un număr de telefon.

Pentru a face acest lucru, trebuie să facem clic pe butonul „genera etichetă” din partea dreaptă a ecranului și să selectăm elementul corespunzător. Ca aceasta:

Faceți clic pe elementul „Număr de telefon”, verificați câmpul obligatoriu și apoi copiați eticheta rezultată în formularul din stânga împreună cu alte nume și în șablonul de scrisoare.

În partea stângă veți avea o intrare ca aceasta:

Plasați un câmp de număr de telefon mai jos.

În partea stângă este șablonul scrisorile primite vom avea un record ca acesta:

Nu uitați să bifați și caseta de selectare „Utilizați formatul de e-mail HTML”.

În partea de jos, va trebui să traduceți un rând ca acesta „Vă rugăm să completați câmpul obligatoriu” în rusă, ceva de genul acesta: „Vă rugăm să completați câmpul obligatoriu”

În câmpul destinatar, adăugați adresa de e-mail la care vor fi trimise aplicațiile de pe site.

Grozav! Formularul de apel invers pentru site este aproape gata. Acum trebuie să o facem să apară când facem clic.

Crearea unui formular pop-up

Sarcina noastră este să ne asigurăm că, atunci când faceți clic pe butonul de link, apare un formular pop-up de apel invers. Pentru a-l crea, avem nevoie de un plugin special bazat pe limbajul Jquery, care se numește Easy FancyBox. De asemenea, este disponibil pentru instalare direct din panoul de administrare. Să-l adăugăm acum.

Doar faceți clic pe „Instalare” și va începe să funcționeze pentru dvs. Are setări pentru fișierele media. Putem trece peste ele pe scurt.

Dimensiuni imagini – setați propriile valori pentru miniaturi, imagini medii și mari.

Efect FancyBox pentru următoarele categorii media:

Poze
Documente PDF
Conținut inline
Grafică SWF
Youtube
Vimeo
Dailymotion
IFrames

Indicați ce doriți să utilizați în viitor. O las doar pentru poze.

De asemenea, puteți seta transparența (Opacitatea) și culoarea. Nu am setat nimic, am lăsat totul așa cum este implicit.

Fereastră

Afișează pictograma de închidere a ferestrei
Culoarea antetului și culoarea chenarului
Dimensiuni (implicit 560x340x10)
Comportament (întârziere în secunde când apare formularul de apel invers pe site și viteza de închidere).

Compatibil cu alte browsere și dispozitive

Activați regulile pentru versiunile browser IE 6 și 7 (stiluri înseamnă)
Activați regula de stil pentru browserul IE 8

Nu am specificat nimic în ele, deși puteți experimenta cu funcționalitatea cross-browser a formularului.

Imagini

Detectare automată pentru extensii de imagine – jpeg, png, jpg. Puteți adăuga propriile extensii
Aplicați la toate imaginile legate
Apoi, pur și simplu nu am schimbat setările, am lăsat totul așa cum este. Fa la fel.

Grozav! Acum să salvăm toată această bogăție de opțiuni.

Acum ascultăm cu mare atenție, urmărim și repetăm după mine. Cel mai bine este să plasați formularul de apel invers în cel mai vizibil loc, adică chiar în partea de sus a antetului site-ului, sub numere de telefon și contacte. Asta vom face. Să mergem la șablonul antet. php și lipiți acest cod:

Apel înapoi

< a id = "myButton" href = "#contact_form_pop" class = "fancybox" >Apel înapoi< / a >

< div style = "display:none" class = "fancybox-hidden" >

< div id = "contact_form_pop" >

< / div >

Nu vă fie teamă că există unul în plus aici etichetă div, în aspectul site-ului meu web nu a stricat designul sau a provocat o eroare, dar într-un alt caz a apărut o eroare. Pe diferite șabloane experimentează într-un fel și altul.

Acordați atenție funcției în care este afișat formularul:

[ contact - formular - 7 id = "92" title = "Formular de apel invers" ] !}

Puteți întreba, de unde îl pot obține? Totul este elementar, Watson! Accesați Formularul de contact 7 -> Formulare și acolo veți vedea un cod scurt de inserat oriunde pe site.

Acum voi salva pagina pe care am editat-o și voi vedea cu ce am ajuns.

dimensiunea câmpului, fontul și designul butonului „Trimite”. Ai putina rabdare J

Design pentru formularul de apel invers

Am decis să schimb dimensiunea câmpurilor de nume, e-mail și telefon din design. Intrarea standard nu este tocmai potrivită. Cum să afli clasa lor corectă? Acest lucru se face prin inspectarea elementelor făcând clic tasta dreapta mouse-ul și faceți clic pe vizualizați codul elementului și mai jos veți vedea toate elementele și clasele.

Acesta este codul pe care l-am inserat în foaia de stil pentru a obține designul formularului de apel invers de care aveam nevoie.

Salutare tuturor. Am fost bombardați cu întrebări despre cum să implementăm un formular care apare într-o fereastră modală după ce facem clic pe un buton, iar după trimitere, va fi afișat un mesaj despre succes sau eșec.

Cred că există o mulțime de lucruri similare pe Internet, dar din moment ce oamenii întreabă, am decis să o fac. Mai mult, o astfel de funcționalitate trebuie să fie prezentă pe aproape fiecare pagină de destinație pentru a implementa un buton de apel invers. Și într-adevăr, acum apar tot mai multe rezultate ale testării AB, care spun că formele deschise funcționează mai rău decât cele ascunse în fereastra modalăși se deschide după apăsarea butonului.

Unii susțin că acest lucru se datorează faptului că oamenii își „dezvoltă imunitatea” încet, iar forma deschisă este o vânzare agresivă. Se presupune că, acum este momentul în care utilizatorul, la vedere formă deschisă crede că încearcă să-i vândă ceva. Nu sunt în totalitate de acord cu această teorie, dar există un sâmbure de adevăr. Acest lucru poate fi adevărat în anumite tipuri de afaceri. Ei bine, acum să trecem la implementarea formularului.

Notă! Nu voi descrie fiecare acțiune în detaliu, dar vă sugerez opțiune gata făcutăîn sursă. Dacă aveți întrebări, scrieți în comentarii. Ne vom da seama :)

Astăzi vom începe nu cu jQuery, ci cu aspectul butonului și al formularului. Vom include toate scripturile la sfârșitul paginii.

Un buton care, atunci când este apăsat, va deschide o fereastră modală:

Trimiteți cererea dvs

Puteți seta orice clasă, dar în href scrie #modal - acesta va fi id-ul containerului cu umbrire și un formular de contact.

Acum voi da codul pentru formular și blocul pe care va fi amplasat formularul:

Lăsați datele dvs. de contact și consultantul nostru vă va contacta. Doresc acest formular pentru site-ul meu

După adăugarea stilurilor, arăta astfel:

Pentru a crea o fereastră modală, a fost folosită biblioteca Remodal. Acesta este un set de fișiere css și js, doar pentru a crea ferestre modale animate. Îl puteți descărca din link sau cu editările mele de la sfârșitul articolului.

Adăugăm stiluri între etichetele head:

Și înainte de a închide eticheta corporală- adăugați scripturi:

Script.js este un script pentru procesarea formularului. Același Ajax care ne permite să efectuăm întreaga procedură fără a reîncărca pagina:

$(document).ready(function () ( $("form").submit(function () ( // Obțineți ID-ul formularului var formID = $(this).attr("id"); // Adăugați un hash la ID-ul numelui var formNm = $("#" + formID); $.ajax(( tip: "POST", url: "mail.php", date: formNm.serialize(), succes: function (data) ( // Afișează textul rezultatului expedierii $(formNm).html(data); ), error: function (jqXHR, text, error) ( // Afișează textul erorii de trimitere $(formNm).html(error); ) )); return false; ) ); ));

Nu voi da originalul cod cssși js din fișierele responsabile pentru fereastra și formularul modal, deoarece sunt destul de mari. Daca da, uita-te la sursa. Si aici handler phpîn mare măsură standard (dacă pot spune așa):

Vă rugăm să nu uitați să vă schimbați adresele de e-mail cu propriile dvs.

Ca aceasta forma ajax a ieșit. Îmi pare rău că nu am încercat să explic în detaliu cum a fost realizat fiecare element. Am vrut doar să dau un rezultat final, dar nu are rost să descriu toate animațiile și aparițiile. Descărcați sursa și implementați-o pe site-ul dvs. web. Și asta e tot pentru azi. Noroc tuturor!

Băieți, vă îndemn să testați formularul pe un real sau server virtual(gazduire). Vă rugăm să vă asigurați că serverul dvs. acceptă PHP, că aveți un plan plătit și nu perioada de testare. În caz contrar, în 90% din cazuri formularul nu va funcționa.

Nu aștepta o scrisoare la tine cutie poștală, dacă tocmai ai deschis fișier indexîn browser și a făcut clic pe butonul „Trimite”. PHP este un limbaj pe partea de server!

Dacă vă este prea lene să vă dați seama și să faceți singur forma, atunci vă recomand să fiți atenți.

Versiune actualizata se află articolul

Există multe plugin-uri WordPress pentru crearea de formulare de contact pe blogul sau site-ul dvs. web. mai ales, vă permite să încorporați un formular de contact direct în postări și Pagini WordPress(în timp ce multe plugin-uri obligă un șablon personalizat să fie aplicat paginii, limitând astfel editarea acestuia).

Încorporarea formularului în pagină este de obicei suficientă, dar ce se întâmplă dacă doriți ca formularul să apară într-o fereastră pop-up atunci când utilizatorul face clic pe linkul Contactați-ne? Pentru a realiza o astfel de dorință, trebuie să folosiți două Plugin WordPressîn același timp: Easy FancyBox

1. În primul rând, instalați pluginuri și Easy FancyBox.

2. Pentru simplitate, vom folosi formularul Contact Form 7 deja creat de pluginul însuși în timpul instalării pentru exemplu. Pe pagina de setări a formularului de contact, luați codul formularului, pe care trebuie să îl copiați și să îl inserați Editor WordPress pentru a crea un formular.

3. Creați pagina nouaîn WordPress. Pentru a adăuga un formular de contact, trebuie să lipiți codul între paranteze drepte din pagina de setări Formular de contact 7 pe pagina dvs. Asigurați-vă că lipiți codul corect, exact așa cum îl afișează pluginul.

4. WordPress-ul dvs. are acum un formular de contact. Am decis să o facem să apară într-o fereastră modală după ce utilizatorul face clic pe link. Intră în joc Plugin ușor Cutie atragatoare. Cu ajutorul acestuia, puteți face ca orice element de pagină să apară într-o fereastră pop-up. Deschideți editarea paginii, faceți clic pe fila TEXT și adăugați următorul cod HTML:

Contactaţi-ne

5. Gata, acum avem un link care „lansează” formularul de contact într-o fereastră pop-up. Felicitări! Probabil va trebui să modificați CSS-ul formularelor dvs. de e-mail pentru a obține mesajele de e-mail pentru lățimea, înălțimea și afișarea corectă. posibile erori la umplere. Acest lucru ar trebui să fie suficient pentru a începe.

Bună dragă cititor, în acest articol vă voi arăta cum să creați un formular de contact pop-up pe site-ul dvs. WordPress. Adesea, atunci când vă dezvoltați propriul site web sau blog, este necesar să stabiliți capacitatea de a comunica rapid cu vizitatorii unei resurse de internet. În acest caz, formularul de feedback pop-up pentru WordPress va fi util, ceea ce va ajuta la stabilire contact rapid cu utilizatorii.

De ce aveți nevoie de un formular de feedback pop-up pentru WordPress? Motive pentru care îl utilizați

Să vedem de ce este nevoie de acest formular

Economisire spatiu liber Pe net. Formularul de contact poate fi plasat oriunde: în subsol sau antet, în conținutul principal al paginii, ca buton plutitor etc.

Aspect eficient. Animația apariției unei noi ferestre pare interesantă și neobișnuită

Disponibilitate. Puteți lăsa intrări în acest formular de oriunde pe site; utilizatorii nu trebuie să se întoarcă la pagina principală.

Un bonus suplimentar: formularul este ușor de modificat și personalizat pentru a se potrivi nevoilor site-ului dvs. Un formular de feedback pop-up pentru WordPress poate fi prezentat sub forma unei ferestre care se deschide pentru a comanda un apel, serviciu sau produs sau pentru a face un abonament. Dacă doriți, puteți adăuga efecte vizuale, diverse imagini etc.

Plugin-uri pentru instalarea unui formular pop-up

Să aruncăm o privire la instrumentele necesare pentru a dezvolta ferestre pop-up în wordpress - aplicație specială pentru dezvoltarea și crearea de site-uri web.

Formularul de contact 7

Acest plugin este utilizat direct pentru a proiecta formularul. Pentru a-l instala, urmați acești pași:

FancyBox ușoară

Acest plugin este potrivit pentru dezvoltarea unui efect de fereastră pop-up. Secvența de instalare Easy FancyBox este similară cu instalarea anterioară a pluginului.

Configurarea pluginurilor

Puteți configura setările suplimentului Easy FancyBox prin intermediul fișierelor media. Utilizați opțiunile de meniu „Setări” -> „Fișiere media”.

În blocul care se deschide chiar mai jos setări standard Parametrii pluginului în sine vor fi localizați. De obicei, există o bifă lângă elementul „Imagini”, care indică faptul că o fereastră pop-up va fi activată atunci când faceți clic pe imagine. Este recomandabil să-l eliminați, deoarece dacă există și altele instrumente suplimentare va avea loc crearea unei animații pop-up deschidere dubla imagini.

Dar asta nu este tot. Bifați caseta de lângă „Conținut integrat”

Oricine poate aprofunda mai mult în setările pluginului și le poate seta la propria discreție.

Sfat: dacă doriți ca formularul să fie mereu deschis, atunci debifați Setari usoare Caseta de selectare FancyBox de lângă opțiunea „Închide FancyBox când se face clic pe suprapunere”, care îndeplinește funcția de a închide fereastra atunci când se face clic cu mouse-ul în afara acesteia.

Instrucțiuni pas cu pas

Ei bine, cu „plictisitor” pregătire prealabilă Gata, acum să trecem la partea „gustoasă” - cum, de fapt, este dezvoltat formularul de feedback pop-up WordPress.

Gestionarea ferestrei formular

De unde începem? Desigur, cu presetat forma în sine. Selectați „Formular de contact 7” în meniul din dreapta, apoi opțiunea „Adăugați nou”.

Creați un nume nou pentru formular, de exemplu, „Experiment”, introduceți-l în câmpul de introducere al ferestrei care se deschide, unde se află textul „Titlu” și faceți clic pe butonul „Salvare”. Puteți modifica alți parametri, inclusiv șablonul de formular în sine, dar nu îl vom atinge. Acum ale noastre obiectivul principal– învață doar cum să creezi formulare pop-up.

Aruncă o privire la rezultat. După cum puteți vedea, pluginul a generat un cod scurt special care este folosit pentru a afișa ulterior formularul. Trebuie să-l copiați.

Ieșire formular

Acum să trecem la programare. Nou codul programului poate fi inserat oriunde pe site, de exemplu, în „Contacte” și altele. În exemplul nostru formă nouă va fi afișat în widget. Selectați din meniu secvenţial " Aspect", apoi faceți clic pe „Widget-uri”, apoi în fereastra care se deschide, faceți clic pe opțiunea „Text”.

Acum faceți clic pe butonul „Adăugați widget”.

Lipiți următorul cod în câmpul de introducere a conținutului:

Scrieți o scrisoare Textul de început Textul de sfârșit

Iată cum va arăta rezultatul rezultat:

Vă rugăm să rețineți că, în loc de codul scurt specificat în exemplu, va trebui să îl specificați pe cel pe care l-ați creat ca urmare a creării unui formular nou.

În plus, formularul poate fi editat: adăugați sau eliminați câmpuri de introducere, introduceți textul inițial și/sau final înainte și după formular, convertiți textul într-un titlu sau afișați-l ca bloc separat, utilizați diferite stiluri, substituenți etc. Dacă ar fi timp și dorință!

Stilul link-ului

Să ne uităm și la două moduri de a converti un link într-un buton pentru a-și îmbunătăți aspectul vizual.

Metoda 1: Utilizarea stilurilor de teme suplimentare.

Următorul cod poate fi introdus după cum urmează:

Codul programului în sine arată astfel:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/***Afișarea unui link sub formă de buton****/ .contact-ne a( margin:auto; /*alinierea blocului în centru*/ display:block; width:199px; /*button size*/ padding:11px 22px ; /*padding*/ border:1px solid black; /*border shade*/ background:#3399ff; /*background pattern*/ text-decoration:none; /*conversia textului în neliniat*/ text- align:center; /*centrarea etichetei*/ color:#ffffff; /*nuanța etichetei*/ -moz-transition: toate 0.6s ease; -webkit-transition: toate 0.6s ease; tranziție: toate 0.6s ease ; ) /**Schimbarea linkurilor de culoare la trecerea cursorului**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; caseta -shadow:0 0 7px #111 ; -moz-transition: toate 0,6 s ușurință; -webkit-transition: toate 0,6 s ușurință; tranziție: toate 0,6 s ușurință; )

Rezultatul este un buton ca acesta:

Codul spune deja ce parametru este responsabil pentru ce. Acum toată lumea poate edita codul după bunul plac, experimentând diferite stiluri și culori și creând cel mai potrivit link pentru pop-up.

Metoda 2 – utilizați o imagine ca buton. În primul rând, încărcați imaginea necesară pe site (orice imagine vă place, nu neapărat sub forma unui buton - nu contează cu adevărat). Pentru a face acest lucru, faceți clic pe „Media” -> „Adăugați nou” și selectați imaginea dorită. Un link permanent către fișier va apărea în dreapta imaginii (în în acest exemplu http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), copiați-l și adăugați-l la cod (nu eliminați ghilimele):

Adăugați codul rezultat la codul de ieșire principal al formularului în loc de textul „Scrieți o scrisoare”.

Site-ul meu a afișat butonul afișat în captura de ecran de mai jos:

Și așa va arăta butonul dacă părăsiți stilul suplimentar descris în prima metodă:

Adăugați în meniu

Pentru ca formularul de feedback pop-up pentru WordPress să poată fi apelat direct din meniu, trebuie să utilizați următorul cod

1 2 3

Scrie o scrisoare

Mai întâi trebuie să vă dați seama unde exact trebuie să introduceți acest cod. Accesați „Editor” prin „Aspect” și dintre șabloane selectați „Header (header.php)”

Acum găsiți locul unde se află codul meniului. Găsi următoarea informație:

1 2

Mai jos, inserați codul chiar înainte de eticheta de închidere.

În general, nu este nimic dificil în adăugarea unui formular de contact pe site-ul tău, principalul lucru este să ai puțin timp liber și dorința de a studia temeinic toate aspectele. Acum știți ce este un formular de contact, pentru ce este, cum să îl utilizați pe site și cum să procesați un link pentru a deschide o fereastră cu efect pop-up. Mult succes și succes în această afacere dificilă, dar incitantă, de construire a site-urilor web.