Fereastra pop-up Js cu formular. Formular de feedback WordPress: creăm rapid și eficient. Cod sursă pentru apelarea formularului și handler-ului

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

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 chiar eu această lecție, 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 și, de asemenea, puteți descărca fisierele necesare pentru munca:

Pasul 1. descriere generalași cum funcționează formularul 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. Acesta este fișierul care va fi inclus în fereastra modală;
send.php - un fișier de gestionare 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, al nostru fereastra modală a apărut cu formularul, trebuie să o forțezi cumva să o facă. 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:

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 dispunerea tabelului. 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 furniza codul său aici, deoarece 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 muncă cu drepturi deplineÎn fereastra modală a formularului, 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 dificil, așa că dacă cineva nu înțelege nimic, vă voi asculta întrebările în comentarii pentru această lecție. Și asta e tot pentru mine, ne revedem, prieteni!

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

Salutări cititorilor mei, am acumulat experiență și vă voi spune despre principiile de funcționare a formularului de feedback conexiuni php. Vă voi arăta mai departe exemple clare, astfel încât să înțelegeți cum funcționează totul și cum are loc interacțiunea între formularul de intrare în sine (câmpurile sale de intrare) și fișierul de gestionare scris în PHP. În plus, puteți descărca gratuit sursele împreună cu .

Desigur, va fi grozav dacă aveți măcar puțină înțelegere a HTML/CSS, deoarece... Va trebui să trageți codul pe pagina dvs. prin analogie. limbaj PHP Nu ne vom atinge, vă voi arăta toate editările necesare pe care trebuie să le faceți pentru dvs.

UPDATE: Pe baza răspunsurilor cititorilor, mi-am dat seama că am nevoie de ceva mai frumos și mai funcțional, vă rog să mă întâlniți, să verificați și să aruncați o privire. Alege care iti place mai mult)

UPDATE2: Versiunea 3.0 Aterizare adaptivă+ formular ajax cu transmitere de etichete UTM, citiți și aruncați o privire. O să-ti placă

Mi-am adus aminte de mine când am încercat prima dată să creez un formular de feedback în PHP pe cont propriu și, să fiu sincer, a fost laborios, pentru că... Nu am înțeles ce și cum se întâmplă. Răbdare și perseverență, prieteni, și veți reuși.

Vom studia analiza formularului de feedback în sine folosind un exemplu pagina de destinație (Pagina de destinație), apropo, există un articol separat despre. Puteți vedea cum funcționează acest lucru în acțiune folosind butoanele de mai jos, atașez sursele acestei pagini de o pagină și fișierul principal de gestionare php (acest fișier va procesa și va trimite e-mailul)

După descărcarea surselor și despachetarea arhivei, veți vedea următoarea structură de fișiere:

imagine - toate imaginile care sunt folosite pentru pagina de destinație în sine, butoane etc.
js - scripturi javascript, care oferă, de exemplu, o fereastră modală pop-up pe pagină și alte efecte vizuale
index.html - fișier index pagina noastră
index1.php - un fișier de gestionare în care sunt transferate valorile din formular, apoi o scrisoare este generată din variabilele primite și trimisă la adresa specificată Adresa de e-mail. Index1.php va acționa și ca o pagină intermediară de notificare despre trimiterea cu succes a datelor de la redirecționare automatăînapoi la index.html (adică pagina noastră de o pagină)

Este important ca găzduirea dvs., unde se află fișierele site-ului, să accepte procesarea PHP, altfel fișierul index1.php nu va fi executat și nu va funcționa. Pentru a clarifica această nuanță, contactați campania în care este înregistrată găzduirea dvs. sau doar testați-o - funcționează, înseamnă că există suport. Dacă nu, atunci activați opțiunea de suport pentru limbajul php

Aruncă o privire la diagrama modului în care toate elementele interacționează (pagină, formular, handler)

Sursă

Să aruncăm o privire la modul în care funcționează unul dintre butoane, care afișează o fereastră pop-up modală care conține un formular de feedback. Acest cod sursă dat este ceva pe care îl puteți introduce în pagină de mai multe ori și de două ori și va funcționa. Va trebui să-l personalizați singur pentru a se potrivi designului și nevoilor dvs.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Solicitați un apel înapoi Solicitați un apel înapoi

Mai jos este codul sursă complet al handler-ului index1.php, pentru a configura trimiterea către căsuța poștală, schimbați „ [email protected]„la dumneavoastră, restul, în principiu, poate fi lăsat neschimbat

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Veți fi contactat

Veți fi contactat body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Schimbați adresa curentă a paginii după 3 secunde (3000 milisecunde)*/

Apelați fereastra și introduceți datele pentru verificarea testului forma noastră

Permiteți-mi să vă reamintesc încă o dată, găzduirea dvs. trebuie să accepte procesarea fișiere php, în caz contrar, operatorul nostru pur și simplu nu va fi executat și nicio scrisoare nu va fi trimisă către e-mail specificat-abordare. Rezultatul unui formular de feedback completat cu succes

Asta e tot pentru mine, am încercat să transmit sensul și funcționarea scenariului cel mai bun mod. Dacă aveți întrebări, nu ezitați să mă contactați în comentarii sau pe VK (vezi detaliile de contact). iti doresc usor si munca productiva Pentru tine.

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 sună din nou. Și într-adevăr, acum există din ce în ce mai multe rezultate ale testării AB care arată că formularele deschise funcționează mai rău decât cele ascunse într-o fereastră modală și deschise după ce faceți clic pe un buton.

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.

Între etichete de cap conectează stiluri:

Și înainte de eticheta body de închidere, 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 E-mail de unul singur.

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ă pur și simplu ați deschis fișierul index în browser și ați 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

Datorită numeroaselor solicitări din partea utilizatorilor, am găsit o soluție privată pentru implementare care apare atunci când dați clic pe un buton (de exemplu, „Comandă un apel”).

Pentru a adăuga un formular pop-up pe pagina de destinație:

1. Conectați-vă la editorul paginii în care trebuie să fie încorporat formularul.

2. Pentru a rezolva conflictul biblioteci jQuery, copiați codul postat de , și inserați-l prin instrumentul Scripturi, setând poziția la „După etichetă:

3. Folosind instrumentul Buton, creați un buton:

Acest buton va apărea pe pagina de destinație, astfel încât textul de pe acesta trebuie să corespundă acțiunii țintă care va urma clicului acesteia (de exemplu, „Comandă un apel!”). În linia URL, puteți specifica orice link (de exemplu, către site-ul principal), deoarece este necesar doar pentru a crea un buton.

4. Folosind instrumentul Formă, creați o formă:

Formularul va apărea după ce faceți clic pe butonul; numele etichetelor trebuie să corespundă acțiunii țintă (de exemplu, „Nume” și „Telefon” pentru butonul „Comandă un apel!”).

7. Găsiți liniile din cod:

În acestea, va trebui să modificați valoarea ID-ului pentru fiecare element în mod corespunzător.

8.1 În ID-ul numărul 1 din captură de ecran trebuie să introduceți ID-ul formularului. Pentru a face acest lucru, faceți clic o dată pe câmpurile formularului, accesați fila „Avansat” din meniul „Proprietăți” din dreapta și copiați „ID-ul ancora”:

8.2 În rândul 2 din captură de ecran trebuie să introduceți ID-ul butonului asociat formularului.
8.3 În rândul 3 din captură de ecran - ID-ul butonului care va fi afișat pe pagină.

Asta e tot. Formularul pop-up este gata.

Dacă doriți, puteți schimba aspectul