Formular de feedback într-o fereastră modală. Fereastra pop-up pentru WordPress

(Ultima actualizare: 07.08.2016)

Bună ziua tuturor! Sunt din nou eu, cu o postare utilă - WordPress popup - pentru începători și nu numai pentru utilizatorii WordPress. Dacă sunteți interesat de pluginul pop-up WordPress, numit și plugin de fereastră modală, atunci voi, prieteni, ați ajuns în locul potrivit.

Pluginul pe care îl voi prezenta mai jos, îl puteți folosi pentru: Formularul de contact 7 într-o fereastră modală; orice formular de contact (feedback) într-o fereastră modală (pop-up); video într-o fereastră modală; imagini într-o fereastră pop-up; postarea de informații utile cu link-uri; formular de abonare prin e-mail pentru articole noi într-o fereastră modalăși așa mai departe, și așa mai departe, nu poți enumera totul. Plugin-ul este foarte simplu, fără setări complexe și aproape că nu creează încărcare suplimentară pe site.

Easy Modal Plugin - Fereastra pop-up/Modal pentru WordPress
Plugin pentru fereastră modală pentru WordPress - Easy Modal

Puteți instala acest plugin în modul standard, prin panoul de administrare - Plugins - Add new și în câmpul Căutare pluginuri introduceți numele Easy Modal, apăsați Enter. Ar trebui să fie primul pe listă. Instalează-l și activează-l ca de obicei. Și apoi puteți trece la crearea unei noi ferestre modale.

Pentru a face acest lucru, faceți clic pe noua secțiune Easy Modal care apare și selectați Modal:

Easy Modal - crearea unei noi ferestre modale

După aceea, în partea de sus a paginii, faceți clic pe butonul Adăugați nou:

Adăugați o nouă fereastră

Și aici, totul este simplu:

Crearea unui pop-up video

În setările generale (fila General) dați numele noii ferestre (nu va fi afișată, aceasta este pentru dvs. dacă, de exemplu, creați mai multe ferestre modale); tip de încărcare Load Sitewide (pentru întregul site); titlul ferestrei și în cele din urmă lipiți codul de care aveți nevoie în editor (modul Text). În exemplul meu am inserat un cod video de pe YouTube.

Configurarea unei ferestre modale

În parametri puteți selecta dimensiunea ferestrei; dacă să folosiți un fundal sau nu; tip de animație pentru fereastră modală/pop-up; locația ferestrei și, de asemenea, puteți repara fereastra (bifați caseta și indicați distanța din partea de sus a ecranului).

În fila Exemple veți găsi exemple de cod pentru afișarea unui pop-up în WordPress:

Cod pentru afișarea unei ferestre modale în WordPress

Aici puteți selecta un link text simplu, un buton sau o pictogramă. Vă rugăm să rețineți că fiecărei ferestre nou create i se atribuie o clasă eModal. Prima fereastră creată va avea clasa eModal - 1, a doua eModal - 2 și așa mai departe. Trebuie doar să înlocuiți numărul după semnul -. Acest cod poate fi inserat în sau oriunde în articolul dvs. Desigur, puteți scrie orice text în cod. Da, aproape am uitat că după ce am creat o fereastră modală în partea dreaptă a paginii, nu uitați să faceți clic pe butonul Publicare.

Am inserat codul pentru fereastra modală cu videoclipul în bara laterală ca buton:

Butonul din bara laterală a blogului

Vizitatorul face clic pe el și se deschide o fereastră cu un videoclip:

Fereastra modală cu video

Sper, prieteni și tovarăși, principiul general de lucru cu pluginul Easy Modal este clar pentru voi. Voi adăuga doar că apoi sau imediat puteți personaliza aspectul ferestrei modale făcând clic pe elementul Temă. Din păcate, versiunea gratuită a plugin-ului are o singură temă pentru design, dar o poți proiecta așa cum vrei, există suficiente setări. Când personalizați aspectul ferestrei modale, puteți vedea imediat o previzualizare a designului în partea dreaptă:

Editarea unei teme - design de fereastră modal/pop-up

După toate setările pentru aspectul ferestrei, faceți clic pe butonul Salvare din dreapta. Și, în sfârșit, doamnelor și domnilor, vă voi arăta un exemplu de afișare a formularului de contact Formular de contact 7 într-o fereastră modală.

Creați o nouă fereastră modală așa cum se arată mai sus și într-un editor de text pur și simplu lipiți codul scurt Contact Form 7 (dacă aveți acest plugin instalat, dacă nu):

Creați formularul de contact 7 într-o fereastră pop-up
Buton pentru a scrie autorului după mesaj

Dacă cititorul dorește să vă contacteze, va face clic pe butonul și se va deschide formularul de contact într-o fereastră modală:

Formular pentru contactarea autorului într-o fereastră modală

Ceva de genul. De asemenea, toate ferestrele pop-up create de dvs. vor fi afișate pe pagină (articolul Modali), unde, de altfel, sunt indicate clasele pentru fiecare fereastră modală:

Creat ferestre modale pe WordPress

Buna ziua. În această lecție vom face un formular de feedback cu drepturi depline și va apărea într-o fereastră modală când faceți clic pe un buton din pagină. Am făcut această lecție chiar de la zero, folosind doar framework-ul jQuery și un mic JavaScript. Lecția este foarte interesantă, așa că vă rugăm să nu o treceți Mai jos puteți vizualiza o demonstrație a formularului creat de mine fisierele necesare pentru munca:

Pasul 1. Descrierea generală și funcționarea formularului de feedback:

În primul rând, vă voi spune de ce fișiere vom avea nevoie și, de fapt, de ce sunt necesare:

• imagini - folderul în care sunt stocate toate imaginile formularului nostru;
• index.html - fișierul principal „index” în care va fi localizat butonul pentru apelarea formularului de feedback;
• contact.html este fișierul care conține formularul în sine. Acest fișier va fi inclus în fereastra modală;
• send.php - un fișier de gestionare care este responsabil pentru trimiterea scrisorilor;
• jquery.js - cadrul principal jQuery;
• style.css este un fișier cu foi de stil în cascadă pentru formularul nostru.

Deci, să mergem mai departe și în ordine... Formularul va funcționa astfel: Utilizatorul merge la pagina pe care există un buton pentru a apela fereastra modală, îl apasă, apoi apare formularul, în care vizitatorul introduce toate datele și textul mesajului și trimite, apoi este redirecționat către o pagină cu un mesaj despre trimiterea cu succes sau nereușită a scrisorii. Asta e tot, acum hai să începem să ne arătăm formularul...

Pasul 2. Buton pentru a apela formularul.

Deci, pentru ca fereastra noastră modală cu formularul să apară, trebuie să o forțăm cumva să facă acest lucru. Pentru a face acest lucru, trebuie doar să plasăm un buton obișnuit pe pagină. Codul pentru un astfel de buton este afișat mai jos, împreună cu stilurile aplicate acestuia:

Scrieți un mesaj administratorului

Pasul 3. Formularul în sine + setările acestuia

Acum să ne dăm seama unde va fi localizat formularul nostru de feedback. Și va fi localizat în fișierul contact.html, care se află deja în codul sursă al lecției. Acest formular este destul de mic, așa că îi voi plasa codul mai jos:

Trimiterea unui mesaj către Administrație:

*Nume: *E-mail: Subiect: *Mesaj:

După cum puteți vedea, parcurgând codul, chiar și cu ochiul liber puteți vedea că pentru a afișa mai bine formularul, am folosit un aspect de tabel. Acest lucru a fost foarte util pentru mine pentru a egaliza toate câmpurile de formular.

Pasul 4. Procesor responsabil cu trimiterea scrisorilor

Aici vă voi spune rapid despre procesorul principal pentru trimiterea scrisorilor. Nu voi da aici codul său, pentru că este în codul sursă. Descărcați și vizualizați conținutul acestuia. Dacă cunoașteți PHP undeva la un nivel intermediar, ca mine, atunci puteți analiza cu ușurință întregul cod al acestui handler. Dacă totul este gata, mergi mai departe...

Pasul 5. „Înșurubarea” cadrul principal jQuery

Acum, ca în orice lecție jQuery, trebuie să „înșurubam” cadrul principal jQuery. Pentru a face acest lucru, să revenim puțin înapoi, unde se află butonul nostru și între etichete și introduceți următorul cod:

Pasul 6: Modelarea formularului

După cum puteți vedea, stilurile pentru formularul nostru sunt plasate separat în fișierul style.css, deoarece aceste stiluri ocupă prea mult spațiu. Trebuie doar să conectăm codul de mai jos la fișierul nostru index:

Pasul 7. Îmbunătățiri jQuery

Acum, pentru ca fereastra modală a formularului să funcționeze pe deplin, trebuie să introducem următorul cod jQuery:

$(function() ( $("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(this.getTrigger().attr("href"));

Concluzie.

Formularul nostru de feedback interesant este gata. Drumul a fost lung și anevoios, așa că dacă cineva nu înțelege nimic, vă voi asculta întrebările în comentariile la această lecție. Și asta e tot pentru mine, ne revedem, prieteni!

Cu respect sincer, ghidul tău jQuery - M.K.

Foarte des trebuie să creați un formular de feedback și să îl ascundeți. Acest formular ar trebui să apară atunci când faceți clic pe un buton sau pe o inscripție de pe site într-o fereastră pop-up lightbox. În acest articol vom descrie: Cum să faci un formular de feedback într-o fereastră pop-up pentru WordPress. Ieșire formular de abonament Feedburner. Cum să efectuați un apel către mai multe formulare pe o singură pagină. Cum se închide fereastra cu formularul de feedback (fancybox) după trimitere și vom analiza toate erorile posibile și soluțiile acestora.

Pentru a crea un formular de feedback sau alte formulare pentru un site pe CMS WP, studioul de design „Engine” recomandă pluginul Contact Form 7, iar pentru o fereastră pop-up cu efect lightbox vom folosi Easy FancyBox.

Cel mai popular plugin, de înaltă calitate și ușor de configurat și utilizat este Formularul de contact 7 - cu ajutorul acestuia puteți crea orice formulare de contact și multe altele. Deoarece pluginul are un număr mare de forme și câmpuri diferite, poate fi folosit pentru multe sarcini.

În acest caz, pentru a apela mai multe formulare, acordați atenție acestor părți ale codului:

6. Ieșire formular de abonament Feedburner

ABONATI-VA

ABONATI-VA:

Puteți utiliza acest cod pentru formularul de abonare schimbând numai adresa de feed https://feedburner.google.com/fb/a/mailverify?uri=Cms-info la adresa dvs.

Adăugați următorul cod dacă utilizați un plugin cu fancybox, cum ar fi Easy Fancybox:
on_sent_ok: $.fancybox.close();
în secțiunea Setări suplimentare pentru formularul dvs.

Dacă dă o eroare: Conținutul solicitat nu poate fi încărcat. Vă rugăm să încercați din nou mai târziu

Această eroare poate apărea pe cele mai recente versiuni ale motorului WordPress, se recomandă schimbarea clasei din link:
Părere
schimba in:
Părere

Am schimbat fancybox în fancybox-inline .

Probleme și soluții întâlnite:

1. Când am dat clic pe link, nu s-a întâmplat nimic cu formularul - în bara de adrese a apărut http://site/#contact_form_pop.
Problema a fost rezolvată prin înlocuirea pluginului Easy FancyBox cu FancyBox pentru WordPress

2. Dacă aveți o galerie conectată (de exemplu NextGEN Gallery) sau o temă care are deja instalat un efect „lightbox”, se întâmplă următoarele: fotografiile sunt deschise cu lightbox-ul încorporat și, de asemenea, cu o lightbox din EasyFancy Box, care este, atunci trebuie să le închideți de două ori.
Pentru a evita acest lucru, în setările EasyFancy Box, debifați caseta de selectare Imagini și în partea de sus a codului formularului pop-up, înlocuiți clasa fancybox cu fancybox-inline . Codul tău va arăta astfel:.

Părere

Atât, dacă vrei să ne „mulțumești”, ai această oportunitate: în dreapta există opțiuni pentru donații pentru dezvoltarea portalului. Sau distribuiți articolul pe rețelele de socializare folosind serviciile de mai jos.

Salutări, prieteni. Tutorialul de astăzi va ajuta site-ul dvs. WordPress să aibă un formular de feedback frumos și funcțional. O vom face folosind pluginul Contact Form 7 La un moment dat, am petrecut mult timp căutând un formular de contact normal și nu am găsit niciodată o alternativă demnă la acest plugin.

Caracteristici plugin

Permiteți-mi să vă reamintesc încă o dată că vom lucra cu un plugin, așa că dacă aveți nevoie de feedback fără un plugin, ar fi bine să vizitați articolul despre, configurarea este puțin mai complicată, dar opțiunea este mai universală (potrivit pentru fiecare site) și pune mai puțină sarcină pe servere.

Principalul avantaj al formularului de contact din Formularul de contact 7 este ușurința sa de personalizare, funcționalitatea aproape nelimitată și ajustarea automată a designului la orice șablon WordPress. Cu ajutorul acestuia, puteți crea nu numai un formular pentru trimiterea de mesaje de pe site. Pluginul poate fi folosit pentru a crea un buton de comandă, un apel înapoi sau un chestionar complex cu casete de selectare și liste derulante. De asemenea, este posibil să atașați fișiere pentru transfer.

Într-un cuvânt, pluginul este mega-funcțional.

Dacă încă ești îngrijorat de întrebarea „să faci sau nu un formular de contact?” (vă puteți descurca prin simpla plasare a informațiilor de contact pe paginile necesare), apoi voi spune fără echivoc - merită făcut.

În primul rând, trimiterea unui mesaj direct de pe site este mai convenabilă decât deschiderea unui program de e-mail și completarea manuală a totul. Economisirea timpului nu va răni nimănui.

În al doilea rând, formularul de contact poate fi personalizat și acest lucru vă va permite să primiți scrisori într-un format standard - acestea vor fi mai ușor de navigat. De exemplu, puteți seta un antet standard pentru un mesaj „Comandă” și toate e-mailurile de pe pagina de comenzi vor sosi cu acest antet.

În al treilea rând, utilizarea unui formular de contact vă permite să vă ascundeți adresa de e-mail și, prin urmare, să scăpați de posibilele spam-uri care apar inevitabil atunci când caseta dvs. de e-mail devine disponibilă public.

În al patrulea rând, este pur și simplu elegant și modern.

Instalarea și configurarea pluginului Contact form 7

Pluginul se află în baza de date generală WordPress, așa că nu este nevoie să-i căutați fișierele undeva, să le descărcați pentru dvs. și apoi să le încărcați pe găzduirea dvs. Totul este simplificat - prin administratorul WordPress, accesați secțiunea de pluginuri, introduceți „Formular de contact 7” în câmpul de căutare și instalați-l. Dacă nu ați instalat niciodată pluginuri, atunci iată instrucțiuni detaliate despre cum să instalați pluginul.

Configurarea pluginului Formular de contact 7

Configurarea pluginului constă în două etape.

Prima este crearea unui formular specific. Pot exista multe forme diferite, fiecare dintre ele poate conține propriul set de câmpuri. Într-un cuvânt, pentru fiecare sarcină și fiecare pagină de pe site puteți crea separat un formular de feedback, Wordpress permite acest lucru - lista lor va fi stocată în baza de date a pluginurilor.

A doua etapă este inserarea formularului pe paginile site-ului. Fiecare formular pe care îl creăm în interiorul pluginului va avea propriul său cod scurt unic. Pentru a-l insera pe pagină, trebuie doar să-l inserați.

Deci să mergem.

Pentru a începe, în meniul din stânga al panoului de administrare găsim fila Formular de contact 7 Sub ea va apărea un meniu cu două elemente - „Formulare” și „Adăugați nou”.

Nu avem încă formulare gata făcute, așa că să mergem la secțiunea „Adăugați nou”. Acolo se va deschide o pagină care vă va cere să selectați o limbă, iar limba implicită va fi, de asemenea, listată acolo. Doar faceți clic pe butonul albastru „Adăugați nou”.

Setările formularelor sunt împărțite în blocuri separate. Le voi lua în considerare în ordine.

Blocarea „Nume formular”

Primul bloc este responsabil pentru numele formularului dvs. - plasați cursorul pe inscripția „Fără titlu” și introduceți numele de care aveți nevoie. Acest nume vă va fi afișat doar în lista de formulare de contact a pluginului, așa că vă este clar pentru a nu fi confundat pe viitor de toată varietatea.

Blocul „Șablon formular”

Inițial, acest bloc conține o configurație standard de câmp. Conține numele expeditorului scrisorii, adresa sa de e-mail, subiectul scrisorii, conținutul scrisorii și butonul de trimitere.

Câmpurile obligatorii sunt marcate cu asteriscuri. Dacă acest câmp este lăsat gol, mesajul nu va fi trimis.

Locația câmpurilor poate fi personalizată folosind marcaj HTML obișnuit.

În ceea ce privește configurarea câmpurilor în sine, le puteți elimina pe cele inutile și le puteți adăuga pe cele de care aveți nevoie. Dacă nu doriți ca subiectul scrisorii să fie introdus manual, pur și simplu ștergeți blocul corespunzător.

Adăugarea câmpurilor este, de asemenea, foarte ușoară. În partea dreaptă există un buton pentru a genera o etichetă, făcând clic pe ea veți vedea o listă cu toate câmpurile posibile pe care le acceptă acest plugin.

Selectați elementul dorit și configurați setările acestuia. Pluginul este în rusă, deci toate setările sunt intuitive.

Prima casetă de selectare indică dacă câmpul este obligatoriu sau opțional (adaugă un asterisc).

După configurarea câmpului, veți avea 2 shortcodes:

• „Copiați acest cod și lipiți-l în șablonul de formular din stânga” – acest cod este inserat în codul de formular în același mod ca toate celelalte;
• „Și inserați următorul cod în șablonul de scrisoare de mai jos” - vom avea nevoie de acest cod pentru a formata litera în următorul bloc.

În acest fel, puteți adăuga orice număr de câmpuri, casete de selectare, liste derulante, elemente pentru atașarea fișierelor etc.

Blocați „Scrisoarea”

Acum sarcina noastră este să personalizăm scrisoarea pe care o vom primi. Scrisoarea nu afectează în niciun fel funcționalitatea formularului de feedback, servește doar la transmiterea informațiilor introduse în formular.

Sarcina noastră este să includem toate informațiile în scrisoare.

Primul pas este să indicați adresa de e-mail la care va fi trimis mesajul (poate fi orice).

Al doilea articol indică adresa de e-mail de la care vă va fi trimisă scrisoarea. Nu aș schimba nimic aici, implicit este căsuța de e-mail a blogului tău și i se adaugă o etichetă cu numele persoanei care trimite mesajul.

În continuare indicăm subiectul scrisorii. Ca standard, subiectul este preluat din câmpul care este completat în formular. Dar puteți elimina acest element din formular și puteți introduce un anumit subiect în câmp, care este setat automat în fiecare literă. Am făcut acest lucru pentru formularele de feedback din pagini despre servicii și publicitate. Mesajele de acolo vin întotdeauna cu același subiect „Servicii de comandă” sau „Comenzi de publicitate” - simplu și clar.

Câmpul de antet suplimentar conține eticheta „Reply-To:” astfel încât atunci când răspundeți la o scrisoare primită de la blogul dvs., trimiteți mesajul către blog și la adresa pe care expeditorul scrisorii a indicat-o în câmpul formular. Nu este nevoie să schimbați acest câmp.

Câmpul „Șablon de scrisoare” este responsabil pentru conținutul intern al mesajului primit. În mod implicit, conține informații despre expeditor, subiect și textul mesajului introdus în câmp.

La final, este indicat site-ul de pe care a fost trimisă scrisoarea.

Dacă ați adăugat câmpuri suplimentare în formular care nu au fost instalate implicit, atunci nu uitați să adăugați eticheta corespunzătoare în șablonul de scrisoare. V-a fost dat în blocul „Șablon de formular”, unde ați generat eticheta corespunzătoare (câmpul „Și lipiți următorul cod în șablonul de scrisoare de mai jos”).

Orice informații text din acest bloc (cu excepția etichetelor) pot fi modificate după bunul plac. De asemenea, puteți adăuga orice descrieri și schimba etichete, aranjandu-le în ordinea care vă convine.

Blocul „Scrisoarea 2”

Dacă doriți ca altcineva să primească mesajul trimis, puteți bifa această casetă.

Acest bloc este configurat similar cu cel anterior. În mod implicit, toate câmpurile din acesta sunt completate astfel încât scrisoarea să ajungă la persoana care a completat formularul (se pare că nu uită).

Puteți configura o copie pentru a fi trimisă, de exemplu, managerului sau contabilului dvs.

Blocarea „Notificări la trimiterea unui formular”

În acest bloc puteți configura mesajele pe care utilizatorul le vede după ce face clic pe butonul de trimitere a mesajului. Dacă vrei să schimbi ceva, te rog, am lăsat totul așa cum este.

Activare formular

După ce ați completat toate câmpurile, reveniți la începutul blocului „Nume formular” și faceți clic pe butonul „salvare” situat în partea dreaptă.

Pluginul va plasa formularul pe care l-ați creat în lista celor activi și îi va atribui un cod special cam așa:

[ contact - formular - 7 id = "5464" title = "Verificare" ] !}

Prin introducerea acestui cod oriunde pe site-ul dvs., veți obține un formular gata făcut pentru comunicarea cu potențialii dvs. clienți.

Anti-spam – Akismet și Captcha

Spammerii provoacă multe probleme proprietarilor de site-uri web, iar fiecare formular nou care vă permite să scrieți ceva nu face decât să adauge la numărul de roboți de spam.

Dacă lăsați pluginul formularului de contact în versiunea sa de bază, atunci după un timp veți fi bombardat cu o mulțime de mesaje goale și fără sens.

Există două moduri de a scăpa de spammeri:

Plasați un captcha obligatoriu (acest lucru se poate face cu un plugin suplimentar – Really Simple CAPTCHA).

Utilizați pluginul anti-spam pentru WordPress – Akismet.

Prima opțiune este incomodă, deoarece obligă vizitatorii să introducă manual caractere suplimentare. Nu este atât de greu, dar unora nu le place.

Folosirea pluginului Akismet este mai convenabilă deoarece analizează în mod independent datele introduse (nume, adrese de e-mail, link-uri) și, pe baza bazei de date acumulate, trage concluzii dacă mesajul este sau nu spam.

În plus, akismet este instalat pe majoritatea site-urilor WordPress pentru a proteja împotriva spam-ului în comentariile la articole. Aceasta înseamnă că atunci când îl utilizați, nu va trebui să instalați pluginuri suplimentare și să creați încărcare inutilă pe site.

Protecție împotriva spamului cu Akismet

1. Instalează pluginul Akismet pe site-ul tău și activează-l - .

2. Adăugați date suplimentare la etichetele formularului de contact:

• in campul cu numele autorului adauga akismet:autor
• în câmpul cu expeditorul de e-mail al scrisorii akismet:author_email
• în câmpul pentru adresa site-ului akismet:author_url

Ar trebui să arate așa:

Odată salvat, formularul de contact ar trebui să blocheze toate mesajele trimise de spammeri. Puteți verifica funcționarea filtrului folosind numele de test special „viagra-test-123? – când îl introduceți, ar trebui să apară un mesaj de eroare.

Pentru a face verificarea mai puțin strictă, puteți verifica doar câteva dintre câmpuri, de exemplu, nume și e-mail, și puteți lăsa adresa site-ului web nebifată. Acest lucru va crește probabilitatea ca mesajele spam să fie transmise, dar veți fi mai puțin probabil să pierdeți mesajele de care aveți nevoie.

Protecție împotriva spamului cu Really Simple CAPTCHA

Dacă descoperiți că Akismet nu vă convine (lasă să treacă mult spam sau blochează mesajele necesare), atunci puteți activa un captcha. Pentru a face acest lucru, instalați pluginul Really Simple CAPTCHA.

Deschideți formularul de contact dorit pentru editare

Selectați Captcha din lista de etichete. În setările etichetei, puteți selecta dimensiunea imaginii cu simboluri, altfel nu este nevoie să schimbați nimic. În partea de jos a ferestrei de setări vor apărea 2 etichete, una este responsabilă de afișarea imaginii, a doua afișează un câmp pentru introducerea datelor din această imagine.

Pentru ca captcha să înceapă să funcționeze, trebuie să copiați și să lipiți ambele etichete în fereastra din stânga a șablonului de formular, apoi să salvați modificările.

Plasarea unui formular de feedback într-o fereastră pop-up

Formularul de contact nu trebuie să fie întotdeauna situat într-o anumită secțiune a site-ului, uneori, clientul ar trebui să îl poată accesa din fiecare pagină a resursei;

În astfel de cazuri, postarea unui formular complet nu este întotdeauna convenabilă. Este mult mai ușor să plasezi un buton într-un loc proeminent care să atragă atenția. Făcând clic pe acest buton ar trebui să ducă deja la deschiderea formularului.

Astfel, o persoană va putea trimite mesaje de pe site fără a părăsi pagina de care are nevoie.

Acest lucru se face folosind un alt plugin - Easy FancyBox.

1. Instalați pluginul

În primul rând, instalăm pluginul în sine, acesta se află în baza de date generală a pluginurilor, așa că tot ce trebuie să faceți este să îi introduceți numele în panoul de administrare al blogului dvs. în căutarea pluginurilor. După instalarea pluginului, va apărea o filă „Fișiere media” în secțiunea „Setări”.

În această filă trebuie să găsiți o listă de tipuri de conținut care ar trebui să fie afișate în fereastra pop-up. În mod implicit, există doar imagini, trebuie să adăugați conținut în linie.

Acum că configurarea pluginului este completă, să trecem la configurarea butonului de feedback.

2. Lipiți codul în site

În principiu, puteți utiliza un link text obișnuit, dar un buton imagine va arăta mai bine.

Pe site-ul dvs., unde doriți să afișați un buton pentru formularul de contact (în antet, subsol sau bara laterală), introduceți următorul cod:

< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "Formular de contact" alt = "Formular de contact" src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - formular - 7 id = „id-ul formularului tău” title = „numele formularului tău" ] !} < / div > < / div >

În cod, trebuie să indicați adresa imaginii pe care o utilizați ca buton de feedback și să editați codul scurt al formularului în sine - introduceți id-ul și titlul.

3. Eliminați restricția privind codurile scurte din bara laterală

Acest articol este necesar dacă doriți să instalați un buton în bara laterală. Bara laterală din WordPress nu permite întotdeauna coduri scurte.

Pentru a activa această funcție, trebuie să deschideți fișierul function.php pentru editare (direct din zona de administrare WordPress) și să introduceți următorul cod înainte de paranteza de închidere „?>”:

add_filter("text_widget", "do_shortcode");

add_filter ("widget_text" , "do_shortcode" );

Vă va oferi posibilitatea de a executa toate shortcode-urile din bara laterală.

Am ajuns cu acest formular pop-up frumos:

Mai multe formulare pop-up diferite pe o singură pagină

Uneori este nevoie să plasați mai multe formulare pe un site web cu setări și câmpuri diferite.

De exemplu, un buton duce la un formular cu un nume și un număr de telefon și este folosit pentru a comanda un apel înapoi de pe site, iar al doilea ar trebui să deschidă un alt formular în care există o cerere detaliată de comandă (cu o adresă, un câmp de descriere, capacitatea de a atașa un fișier etc.). În pluginul Contact Form 7 în sine, puteți face un număr infinit de opțiuni de formular, dar cum să le strângeți în butoane diferite pe aceeași pagină?

Pentru a face acest lucru, trebuie să ajustați codul butonului din paragraful anterior. Primul buton folosește opțiunea prezentată mai sus. În al doilea, două valori se schimbă:

Link-ul se modifică, atribuiți parametrului href valoarea #contact_form_pop_2

Schimbați id-ul la aceeași valoare #contact_form_pop_2

Buna seara prieteni! În acest tutorial vă voi învăța cum să creați un formular de contact în WordPress folosind pluginuri. Un formular de contact WordPress este o soluție ideală pentru cei care doresc să mențină contactul cu publicul sau să primească solicitări prin 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 de un 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 alege adrese de e-mail unde există mențiunea unui domeniu de e-mail și îl adaugă în baza lor de date pentru a vă trimite apoi corespondența nedorită. Pe de altă parte, atunci când utilizați un formular de feedback pentru WordPress, scapi de problema e-mailurilor SPAM care vă inundă 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).
• Economisiți timp – Formularul de contact 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ă în pasul următor, de exemplu, „Aplicația dvs. va fi revizuită în 24 de ore” sau Vizionați videoclipul si 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

La acest pas, trebuie să decidem cu privire la alegerea 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 de feedback:

Î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 a blogului, faceți clic pe fila Meniu WPForms și accesați Adăugare nou.

Acest lucru vă va permite să deschideți designerul Wpforms, unde prin simpla glisare și plasare a blocurilor necesare puteți crea un formular de contact pentru feedback WordPress. Versiunea gratuită Lite vine cu două șabloane prefabricate (form gol și simplu). 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ă.

Formularele de notificare sunt mesajele pe care le primiți atunci când primiți o nouă solicitare sau e-mail de pe site-ul dvs. WordPress.

Puteți personaliza ambele câmpuri accesând Setări din interiorul pluginului WPForms odds 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 separate 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 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 una nouă, fie editați o pagină existentă unde o 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.

Iată cum ar arăta formularul pe o pagină WordPress simplă:

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 o altă recenzie a unui plugin gratuit, cu ajutorul căruia putem face 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 în zona de administrare a blogului și să creăm un nou formular care va colecta aplicații și alte informații utile pentru noi. 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ției telefonice. 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âmpul numărului de telefon pentru formularul nostru de feedback WordPress, valorile numerice sunt permise, 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 fie publicitate contextuală, fie direcționată”)
• Acceptare (Acceptați termenii acordului, adică informații despre utilizator, cum ar fi 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.) Bună protecție împotriva SPAM-ului. Notă: această opțiune funcționează dacă ați conectat pluginul Really Simple Captcha.
• Fișier (Dacă doriți să permiteți utilizatorilor să vă încarce un fișier, de exemplu: „Atașați termenii de referință pentru dezvoltarea site-ului web”).
• 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 nu vă va putea trimite o aplicație, 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. Dau 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 substituent "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 în colțul din dreapta sus. Cu siguranță nu o vei rata. 🙂

Am făcut o parte din muncă, acum trecem la următoarea etapă.

Configurarea unei adrese de e-mail pentru primirea aplicațiilor

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. Implicit sunt în 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ă un fișier prea mare: „Acest fișier este prea mare”.
• Încărcarea fișierului a eșuat din cauza unei 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 de telefon invalid”.

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 mai întâi mergem la un editor de text (nu unul 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 nostru să apară și să fie receptiv. Am realizat o implementare similară pe pagina principală a site-ului studioului meu. 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 >