Formular de contact pop-up WordPress. Formular de feedback Ajax într-o fereastră modală. Eliminarea restricției privind codurile scurte din bara laterală

Bună dragă cititor, în acest articol vă voi arăta cum să creați un formular părereîntr-un pop-up de 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 de utilizare

Să vedem de ce este nevoie de acest formular

1. 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.
2. Aspect eficient. Animația apariției unei noi ferestre pare interesantă și neobișnuită
3. 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 daț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 un formular pop-up de feedback 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 „Aspect” în meniu, 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:

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:

/***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 ; /*inner padding*/ bord: 1px nuanță de bord*/ background:#3399ff /*text-decoration:none; centrarea legendei*/ color:#ffffff /*culoarea legendei*/ -moz-transition: all 0.6s ease -webkit-transition: all 0.6s ease) /**Change the linkuri de culoare la trecerea cursorului**/ .contact-ne a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transition: toate 0.6s ease;

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”.

1

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

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:

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 ceva timp liber și dorința de a studia temeinic toate aspectele. Acum știi ce este Formular de contact, de ce este nevoie, cum să-l folosești pe site și cum să procesezi un link pentru a apela o fereastră cu efect pop-up. Mult succes și succes în această afacere dificilă, dar incitantă, de construire a site-urilor web.

Recent, pentru un site, mi s-a cerut să creez un formular de feedback pentru WordPress fereastra modală. Adică, când face clic pe linkul „scrie-ne”, în loc să meargă la pagina corespunzătoare, utilizatorul ar trebui să deschidă o nouă fereastră pop-up, unde va fi localizată funcția de trimitere a unui mesaj. Aceasta este o soluție mai interactivă, deși nu le place tuturor. Eu personal prefer implementarea clasică cu o pagină de contact, dar formularele de pe site-uri sunt diferite - așa că va fi util să luăm în considerare soluția acestei probleme. În munca mea am folosit 2 plugin-uri: binecunoscutul Formular de contact 7 și modulul Easy Modal pentru a crea o fereastră modală în WordPress.

Actualizare 18.05.2017: Judecând după cele mai recente recenzii din depozit, în unele cazuri pot apărea probleme cu funcționarea acestuia. Dacă și tu ești afectat de acest lucru, încearcă o nouă soluție de la dezvoltatori numită Popup Maker. O altă alternativă poate fi luată în considerare.

Nu voi intra în detalii despre instalarea și configurarea Formularului de contact 7, toate informațiile despre acesta sunt aici. Blogul avea și un articol despre ceea ce ar putea fi util.

Să trecem direct la modulul Easy Modal. Îl vei găsi. Dezvoltatorii susțin că acest lucru Cea mai bună decizie crearea de ferestre modale pe site cu diverse opțiuni interesante de prezentare a conținutului.



Peste 10 mii de descărcări, rating 4.6. Versiunile valide de 3.4 sunt 4.0.8, deși l-am rulat cu succes pe WP 4.3.1. În ciuda faptului că pluginul a fost transformat acum într-o nouă soluție Popup Maker, pe site-ul web wordpress.org și când căutați pluginuri în panoul de administrare puteți găsi în continuare versiunea obișnuită Easy Modal 2.0.17. Folosind exemplul său, vă voi spune despre crearea unei ferestre de feedback modal în WordPress.

După instalare, va apărea o secțiune cu același nume, unde există mai multe articole. Vom avea nevoie de primul dintre ei - Modale. Faceți clic pe butonul Adăugați nou acolo.



Această acțiune va crea o nouă fereastră modală pentru site-ul dvs. WordPress. Setările elementului vor avea 4 file:

• General - parametri generali.
• Opțiuni de afișare - opțiuni de afișare.
• Opțiuni de închidere - setări pentru închiderea ferestrei (folosind un clic sau butonul Esc).
• Exemple - exemple de cod de utilizat.

Setările generale conțin numele ferestrei (nu este afișat pe site), titlul acesteia, conținutul și tipul de descărcare. În blocul de conținut, trecând la modul HTML, adăugați codul scurt al formularului de feedback în fereastra modală.



Tipul de încărcare are 2 opțiuni:

• Încărcați la nivel de site (pentru întregul site).
• Per pagină/post (pentru anumite postări și pagini).

O varianta foarte interesanta. Dacă aveți nevoie de o fereastră pop-up care va fi afișată pe toate paginile site-ului (linkul se află în bara laterală, de exemplu), atunci alegeți prima opțiune. În al doilea caz, blocul de setări corespunzător va apărea pe paginile/postările site-ului la editare:



Puteți activa și selecta propria fereastră pop-up pentru o anumită pagină. Dacă nu bifați caseta, elementul nu va fi încărcat pe site.

A doua filă a parametrilor modulului este Optiuni de afisare.



Aici indicați:

• dimensiunea ferestrei - automată, medie, adaptivă, mică, mare etc.;
• fundal - puteți utiliza un fundal pentru formular sau îl puteți afișa fără acesta;
• animație ferestre pop-up;
• poziție (locație) - centru sus, dreapta jos etc.; fix sau nu;
• indentare în partea de sus a ecranului.

Exemple de afișare a ieșirii unei ferestre modale în WordPress folosind pluginul Easy Modal pot fi găsite în ultima filă.



Trebuie să inserați acest cod printr-un widget în bara laterală sau într-un editor de text. Nu este diferit de orice alt cod HTML, singurul lucru este că aici este indicată clasa unei anumite ferestre modale (eModal-1). Pentru al doilea element pe care l-ați creat, clasa va fi eModal-2 etc. Pentru a evita greșelile la introducerea codului, cel mai simplu mod este să îl copiați de pe această pagină.

Editarea temei unei ferestre modale

În pluginul Easy Modal, pe lângă setările pentru un anumit element, puteți defini teme pentru ferestre pop-up (Temă). La bază versiune gratuită Modulul are un singur șablon, dar acesta este mai mult decât suficient.



ÎN acest instrument 6 marcaje:

• General - indicați numele subiectului;
• Suprapunere — fundal (aici puteți selecta culoarea și transparența fundalului formularului);
• Container setări diferite fereastra modală în sine (padding, frame, shadow);
• Titlu—parametrii titlului ferestrei pop-up (font, umbră);
• Conținut — fontul și culoarea textelor din bloc;
• Închidere - element de închidere a formularului (text și design).

După cum puteți vedea, aspectul poate fi personalizat pentru a se potrivi nevoilor dumneavoastră. Am ajuns cu acest formular simplu WordPress într-o fereastră modală:



După ce setați toate setările, nu uitați să le salvați (faceți clic pe butonul Salvare).

Video cu adăugarea formularului de contact 7 în pop-upul Easy Modal

Apropo, am găsit un videoclip despre lucrul cu Plugin ușor Modal, care demonstrează procesul de creare a unei ferestre de feedback modal în WordPress. Acolo, interfața modulului este puțin depășită (unele setări arată diferit), dar puteți obține esența generală. Poate că cineva va fi mai ușor să înțeleagă această problemă folosind video.

Total despre ferestrele modale pentru WordPress

După cum am menționat mai sus, acum pluginul Easy Modal (judecând după Pagina Oficială) convertit în Popup Maker. Am reușit să găsesc un modul cu același nume în depozit, dar nu l-am testat. Vă spun despre asta pentru a ști ce să căutați dacă Easy Modal în WordPress în versiunile ulterioare încetează brusc să funcționeze.

Ambele soluții sunt gratuite, deși au suplimente plătite. Vă permit să personalizați direcționarea, adăugați mai multe subiecte design, conțin analize și alte caracteristici. Dacă aveți nevoie de un mecanism de fereastră modal mai avansat, puteți arunca o privire mai atentă asupra acestor extensii.

În ceea ce privește sarcina de a deschide formularul de feedback Formularul de contact 7 într-o fereastră pop-up, este suficient capabilități de bază Modal ușor. în plus această decizie poate fi folosit și pentru a afișa alte ferestre modale în WordPress - sfaturi utile, Informații suplimentareși așa mai departe. Având în vedere prezența unui editor Inserări HTML cod, puteți afișa videoclipuri, formulare etc. într-o fereastră pop-up. Per total, un plugin util. Dacă aveți întrebări despre el, scrieți în comentarii.

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 e-mail unde vor cădea 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. Accesați șablonul antet. phpși lipiți acest cod:

Apel înapoi