În această lecție, vreau să folosesc două forme de feedback-ul: samopisnaya pe Ajax și Formular de contact 7 plug-in.
În mod ideal, vă voi arăta cum să creați un formular de feedback pop-up, ea pop-up formular de contact 7 sau orice altă formă de feedback arbitrar într-o fereastră modal.
Pentru a lucra forma pop-up cu succes, aproape că nu aveți nevoie de cunoștințe de PHP și JavaScript, - trebuie doar să urmați pașii de mai jos.
Pentru toate WEB timp - programator, am creat și am văzut mai mult de o sută de forme pop: ca samopisnyh și pe baza gata-modale tipuri de ferestre fancybox, lightbox, și altele asemenea. Potrivit acesteia, pe baza experienței mele am adus la cele mai convenabile și simplu forma ferestre pop-up modal, forma albă translucid pe un fond negru, acestea sunt cu tine și vreau să împărtășesc.
Formular pentru feedback într-o fereastră modal
meniuri Pentru utilizatorii mai avansați, voi descrie acum 3 componente de cod (JavaScript, HTML, CSS) pentru înființarea și funcționarea unei ferestre modale. În continuare, vă voi arăta cum să integreze acest cod în CMS WordPress pentru utilizatorii care nu sunt foarte versați în programare. Du-te direct la integrarea formei pop-up pe un site WordPress pentru începători, puteți făcând clic pe acest link.
codul HTML forma pop-up
Acest cod HTML pentru a insera într-un loc arbitrar al părintelui a corpului etichetei. Cel mai bine este să introduceți capătul paginii, înainte de închidere
Cu toate acestea, va trebui să adăugați un link făcând clic pe care va provoca o formă de pop-up de feedback. Indicativ de acest gen:
Acum vom scrie aici este un cod pentru o fereastră modal:
fereastră Modal pentru forma codului CSS
Du-te, acum sunt aici, voi arunca de pe codul CSS pentru a afișa forma:
Aici de altfel, nu au niciun stil pentru forma în sine și pentru butonul de apel. Nu vreau să aglomerați codul paginii. Le-am adăuga în foarte instrucțiunile pentru adăugarea formei în fereastra modal un pic mai departe.
În acest scurt ghid pentru toți. În mod ideal, ar trebui să fi primit aici este o fereastră pop-up, ca burdufurile de mai jos:
Ghid pas cu pas: un pop-up un formular de feedback pentru WordPress
Pe lângă meniul veți vedea instrucțiuni pas cu pas pentru crearea și adăugarea unui formular pop-up pe site-ul WordPress. Pentru a începe, voi spune cum să facă o persoană de contact sub formă de 7 pop-up, și apoi cum să facă o formă de feedback arbitrar într-o fereastră modal.
Popup Formular de contact 7
Dacă o faci dreapta trebuie să introduceți codul va apela forma CF7 un astfel de plan:
ID-ul și titlul - poate arata diferit, dar, în general, o astfel de structură.
Așa cum am în cortul:
Și ne păstra modificările făcând clic pe butonul „Actualizare fișier“.
3) Deschideți fișierul style.css foaie de stil și scrie e următorul cod:
și încă o dată salvați foaia de stil. În această lumină lucrarea este finalizată, va continua să fie un pic mai complicat, dar nimic, cred că vom reuși.
5) în script-forma.js fișierul pe care doriți să înregistrați aici următoarele informații:
6) Acum deschide clientul nostru FTP, am deschis Filezilla, puteți deschide oricare alta, sau de a folosi built-in client cu dvs. de găzduire.
Și vom merge la site-ul nostru. La rădăcina site-ului. Este foarte usor de definit, există cel puțin 3 dosare: „wp-admin“, „wp-content“, „wp-include“, precum și un fișier de configurare „wp-config.php“, și o grămadă de alte fișiere.
7) Du-te la folderul rădăcină site-ul în „wp-content“, etc. „teme“, denumit în continuare pentru a alege numele temă, pot exista mai multe, am această „twentysixteen“ poți fi diferit. Du-te la folderul temei:
8) Umple fișierul nostru de aici, este nevoie în fereastra din stânga să-l găsească și cum să facă cortul următoarele:
9) Deschideți fișierul functions.php și scrie aici acest cod la început:
așa cum am în cortul:
Și nu uitați să salvați modificările noastre.
10) Ultimul pas, trebuie să adăugați un cod pentru a apela formularul, se uită la noi astfel:
Acesta poate fi arbitrar și, în orice loc, dar trebuie să fie prezent rel = „Form1“ și class = „show_form“. Am pus acest cod într-un capac în header.php ca aceasta:
11) Bucurați-vă de rezultatele muncii noastre:
În acest formular de contact pop-up sau formular de contact 7 fereastră pop-up 7 este terminat prin apăsarea butonului de apel un formular pop-up, ar trebui să vedeți un ecran întunecat + forma în mijlocul ferestrei.
Aleatorie fereastra pop-up cu formularul de feedback
situația de meniu se întâmplă, când să utilizați Formular de contact 7 plugin-ul nu este corespunzător sau posibil, de exemplu, un super-forme unice sau a unui client uns cu toate alifiile :). În cazul în care prima poate fi pusă în aplicare pe CF7, ea odihnit cu clientul, care nu-i place plugin-uri - inutile pentru a argumenta.
În continuare, voi arăta pas cu pas samopisnaya de configurare, orice formă pop-up.
Și, după cum am scris mai sus, pentru a crea o formă de pop-up de feedback-ul este pur și simplu o bucată de cod pe care îl avem deja instrucțiuni de mai sus.
1) Deschideți o fereastră nouă aici această intrare: feedback-ul fără plugin WordPress și citit-o de la început până la sfârșit, + face tot ceea ce este scris acolo. Articolul descrie un mecanism de creare a oricărei forme pe Ajax. Aruncări cod formulare și site-ul de lucru de testare dumneavoastră, așa cum este descris în articol.
2) Dupa ce a citit articolul de mai sus pe site-ul dvs. ar trebui să apară aici este un SHORTCODE:
Sper că l-au verificat, de exemplu, introdus în post, iar forma pe care a primit.
3) Ghici ce să faci în continuare? - corect, du-te la instrucțiunile de mai sus, care se numește „Popup Formular de contact 7“ și de a face toate elementele de la al doilea până la sfârșit. Singura problemă există în revendicarea 2, ne-am stabilit aici un astfel de cod:
iar acum acesta trebuie înlocuit aici este aceasta:
aruncă în continuare codul așa cum scrie în instrucțiunile.
Urca până la formularul de contact de instrucțiuni pop-up 7 revendicării 2 click pe link-ul.
ajutor plătit pentru a crea un pop-up formulare de feedback
pentru stabilirea formularul de contact 7 pop - 10 $ (cu editare și se potrivesc cod în stilul tau)
pentru fereastra pop-up cu formularul de feedback arbitrar pe Ajax - $ de 15
Pe aceasta am toate, faceți clic pe link-ul pentru a partaja este binevenit 🙂
Prompt, și există alternativă la atributul rel? Și funcționează, de fapt, numai pentru Chrome, alte browsere forma nu se deschide
Bună ziua. Acesta funcționează în toate browserele testate. Dar dacă trebuie să-l înlocuiască, puteți utiliza date-id în loc de rel, numai w schimbare peste tot. Sau chiar posibil ca forma id de lucru, dar eu nu sfătuiesc
Bună ziua. Vă mulțumesc pentru forma, este foarte util. O problemă. Când inserați o formă în partea de jos a site-ului, apăsând cu deschiderea ferestrei se întoarce înapoi la început. Prompt, cum să-l evite, care atribuie să caute?
Bună ziua. aici:
trebuie să adăugați un fals de întoarcere;
Am actualizat la codul, de asemenea.
Vă mulțumesc foarte mult, toate de ea! Ei bine, mai precis, aproape toate. Cu deschidere buton face totul este în regulă, stilul creat, atașat de el, se pare ca vreau sa. Dar nu am înțeles cum să se alinieze textul, una care poate fi modificat în raport cu acesta. El, după cum am înțeles, este aliniat cu cursorul, care este plasat pe un buton (nu puteți atașa ecranul, îmi pare rău) butonul de stil este înregistrat ca aceasta:
Ne pare rău pentru întrebări, probabil stupide, eu sunt doar de învățare.
Eu nu pot ajuta, pentru că ei nu înțeleg de ce ai nevoie. Arată site-ul este posibil ca ceva va sfatui. Și încă nu înțeleg cum trebuie să aliniați textul?
Forma în sine, am buton fixat la CSS totul „trimite“ sa dovedit, dar nu pot să dau seama cum să cârlig până la stilul de butonul de deschidere formularul de feedback? (Cel în care spui „text poate fi orice“) în setările de formă, nu l-am găsit.
Duck totul este doar în cazul în care copiați acest exemplu clasa show_form apoi butonul este deja înșurubează poate fi în stilul de a scrie: .show_form corp
