Revizuirea pluginurilor pentru crearea unui formular de feedback. Formular de feedback - cele mai bune plugin-uri WP

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, un formular de feedback pop-up pentru WordPress va fi util, deoarece vă va ajuta să stabiliți un 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. Economisirea spațiului liber pe site. 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, diferite imagini etc.

Plugin-uri pentru instalarea unui formular pop-up

Să ne uităm la instrumentele necesare pentru a dezvolta ferestre pop-up în Wordpress, o 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 sub setările standard, vor fi localizați parametrii pluginului în sine. 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ă aveți alte instrumente suplimentare pentru crearea animației pop-up, imaginile se vor deschide de două ori.

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 opțiunea „Închide FancyBox când se face clic pe suprapunere” din setările Easy FancyBox, care închide fereastra când faceți clic în afara acesteia.

Instrucțiuni pas cu pas

Ei bine, pregătirea preliminară „plictisitoare” s-a încheiat, acum să trecem la partea „delicioasă” - cum, de fapt, este dezvoltat formularul de feedback pop-up WordPress.

Gestionarea ferestrei formular

De unde începem? Desigur, cu configurarea preliminară a formularului î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 obiectivul nostru principal este să învățăm pur și simplu cum să creăm 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. Noul cod de program poate fi introdus oriunde pe site, de exemplu, în „Contacte” și altele. În exemplul nostru, noul formular 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:

Scrie o scrisoare

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 ; /*inner padding*/ border: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;

/***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*/ border: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 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 în 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

1 2 3
  • Scrie o scrisoare
  • 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ți următoarele informații:

    1 2