Un semplice modulo di contatto che utilizza Ajax. Modulo di feedback Ajax in una finestra modale Finestra modale con un'e-mail con il nome del modulo di sottoscrizione

Mi sono dedicato a come creare una finestra pop-up che venga mostrata sul sito una volta e dopo un certo intervallo di tempo. Quindi, come opzione, puoi inserire un modulo in questa finestra. Può essere un modulo di iscrizione o un modulo di contatto, in generale, qualsiasi cosa. È preferibile visualizzare i moduli Ajax in finestre pop-up in modo che i dati vengano inviati senza ricaricare la pagina.

Struttura dell'articolo

Se stai creando un sito Web su un motore, ad esempio Joomla o WordPress, puoi ovviamente utilizzare varie soluzioni già pronte per i moduli, inclusi i designer. Ma cosa succede se stai semplicemente progettando in puro HTML e il cliente chiede di “ravvivare” i moduli in modo che funzionino? È qui che questo modulo torna utile.

AGGIORNAMENTO. 08/02/2018
L'articolo è stato riscritto tenendo conto che il modulo è stato pubblicato su GitHub

Quindi iniziamo. Prima di tutto, scarica i sorgenti dei moduli dal mio repository GitHub.

Ho assemblato questo assieme utilizzando il task manager Gulp. Ho scritto su come lavorare con lui, assicurati di leggere.

Collegamento del modulo al sito

Decomprimere l'archivio con il modulo. Successivamente, copia tutti i contenuti dalla cartella dist nella cartella dei moduli (ad esempio, ajax-form) nel modello del tuo sito. Successivamente, colleghiamo le risorse: stili e script. Esistono due versioni nelle cartelle css e js: compressa e normale. Se prevedi di apportare modifiche al codice in futuro, è meglio connettere versioni non compresse.

Se il tuo sito ha già abilitata la libreria jQuery, non è necessario collegarla. Presta attenzione a .

Inizializzazione del modulo

Vorrei subito notare che la convalida dei campi è organizzata utilizzando HTML5.

Il modulo viene chiamato dal metodo .simpleSendForm(), ad esempio:

$("#idForm").simpleSendForm();

Invece di #idForm specifichiamo l'identificatore del modulo. In generale, puoi trovare il codice di inizializzazione del modulo nel file scripts.js. Il codice chiamante del plugin può essere ritagliato da lì e scritto subito prima del file . Non dimenticare jQuery.(document).ready() .

Il modulo può accettare alcune opzioni.

Opzioni

• successTitle (string) — Titolo del messaggio di ringraziamento quando il modulo viene inviato. L'impostazione predefinita è "Grazie per averci scelto!"
• successText (string) - Il testo sotto il titolo del messaggio di ringraziamento. L'impostazione predefinita è "Ti contatteremo a breve".
• errorTitle (stringa) — titolo del messaggio di errore di invio del modulo. L'impostazione predefinita è "Messaggio non inviato!".
• errorSubmit (string) — testo del messaggio di errore di invio del modulo. L'impostazione predefinita è "Errore durante l'invio del modulo!".
• errorNocaptcha (stringa) — testo di errore se il captcha non è stato compilato.
• errorCaptcha (stringa) — testo dell'errore se il controllo fallisce.
• mailUrl (stringa): percorso del file del gestore. Il valore predefinito è "../form-submit/submit.php". Dovresti modificare e specificare il percorso completo se la cartella "invio modulo" non si trova nella radice del sito.
• autoClose (booleano): chiude automaticamente la finestra dopo l'invio riuscito del modulo (per i moduli in una finestra modale). La finestra del modulo si chiude, mostrando un messaggio di ringraziamento dopo 5 secondi. Questa volta può essere sovrascritto.
• autoCloseDelay (numero) - durata (in millisecondi) di visualizzazione del messaggio di ringraziamento dopodiché si chiuderà. L'impostazione predefinita è 5000 (5 secondi).
• debug (booleano) - false per impostazione predefinita. Abilita il debug se ci sono problemi con il modulo. Visualizza i messaggi di errore nella console.
• captcha (booleano): falso per impostazione predefinita. Abilita o disabilita Recaptcha 2.0.
• captchaPublicKey (stringa) — chiave pubblica recaptcha.

Modulo in una finestra modale

Il nostro modulo può anche essere visualizzato in una finestra modale. Il modale verrà visualizzato dalla biblioteca.

Codice HTML

Codice del pulsante

Richiedi una chiamata

Codice del modulo

Inizializza la finestra modale e il modulo. Facciamo in modo che la finestra si chiuda automaticamente dopo 3 secondi. dopo l'avvenuto invio del modulo. Puoi anche trovare il codice di chiamata Magnific Popup nel file scripts.js.

Chiamare un modulo con una finestra modale // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline", FixedContentPos: false, FixedBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, RemovalDelay: 300, mainClass: "mfp-top-up" )); // ===== Modulo modale init ==== $("#idForm").simpleSendForm (( successTitle: "La tua richiesta è stata accettata!", successText: "Il nostro dipendente ti contatterà il prima possibile." , autoClose: true, autoCloseDelay: 3000)); Come abilitare Recaptcha?

Se vuoi abilitare recaptcha in un modulo, devi aggiungere un blocco vuoto con la classe recaptcha nel codice html del modulo nel punto in cui desideri visualizzarlo. Successivamente, nel codice per chiamare il plugin del modulo, passiamo l'opzione captcha con il valore true e passiamo la chiave pubblica recaptcha all'opzione captchaPublicKey. Puoi ottenere chiavi pubbliche e private.

// ===== Init captcha nel formato ==== $("#idForm").simpleSendForm(( successTitle: "La tua richiesta è stata accettata!", successText: "Il nostro dipendente ti contatterà il prima possibile ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

Successivamente, apri il file del gestore del modulo submission.php dalla directory di invio del modulo. Cerchiamo la variabile recaptchaOn (circa la settima riga) e la impostiamo su true . Successivamente, cerca la variabile $secret (approssimativamente alla riga 89) e modifica la chiave privata con la tua.

Fondamentalmente tutto. Dopo queste manipolazioni, dovresti vedere un captcha.

Tieni presente che sul sito demo il captcha funziona in modalità test, poiché sono indicate le chiavi di test di Google.

Ora esaminiamo il file del gestore del modulo (submit.php) e analizziamo le parti principali del codice. Il gestore funziona in PHP, quindi se vuoi testare il modulo dovrai utilizzare .

Possibili errori Il messaggio dal modulo non viene inviato, il preloader gira e basta. Qual è il problema?

Verifica se il percorso del file del gestore è specificato correttamente nell'inizializzazione del modulo:

mailUrl: — percorso del file del gestore

Controlla anche che il recaptcha sia abilitato correttamente. Cioè, se disabilitate, le opzioni recaptcha nel codice di inizializzazione e $recptchaOn nel file del gestore dovrebbero essere impostate su false o true se recaptcha è abilitato.

Non mostrato Google Recaptcha a forma di

Controlla se i valori recaptcha (chiamata recaptcha) e $recaptchaOn (file gestore) sono stati trasmessi - VERO. Controlla anche se hai specificato correttamente le chiavi: pubblica e privata.

Ho fatto tutto secondo le istruzioni, ma il modulo non funziona, dove posso cercare l'errore?

Prima di tutto ti consiglio di guardare nella console del browser e verificare la presenza di errori. Controlla anche se hai la libreria jQuery abilitata. Verifica che il file scripts.js sia incluso correttamente. Se tutto va bene, prova ad abilitare il debug con l'opzione debug: true. Dopo l'accensione, controlla la console per eventuali errori.

Questa è la forma. Usalo sul tuo sito web, spero che ti possa essere utile. Cos'altro dire? Parliamo ora - nei commenti. Chiedi se qualcosa non è chiaro. Inoltre, se trovi un errore, faccelo sapere immediatamente e lo correggeremo...

È tutto. Grazie per l'attenzione. Ci vediamo nei prossimi post!

Saluti ai miei lettori, ho acquisito esperienza e vi parlerò dei principi di funzionamento del modulo feedback php. Te lo faccio vedere chiari esempi, in modo da capire come funziona il tutto e come avviene l'interazione tra il modulo di input stesso (i suoi campi di input) e il file gestore scritto in PHP. Inoltre, puoi scaricare i sorgenti gratuitamente insieme ai file .

Naturalmente, sarebbe fantastico se avessi almeno una minima conoscenza di HTML/CSS perché... Dovrai trascinare il codice sulla tua pagina per analogia. Non toccheremo il linguaggio PHP; ti mostrerò tutte le modifiche necessarie che dovrai apportare da solo.

AGGIORNAMENTO: In base alle risposte dei lettori, ho capito che ho bisogno di qualcosa di più bello e funzionale, incontratemi, date un'occhiata e date un'occhiata. Scegli quale ti piace di più)

UPDATE2: Versione 3.0 Adaptive Landing + modulo ajax con trasmissione di tag UTM, leggi e vedi. Ti piacerà

Mi sono ricordato di me stesso quando ho provato per la prima volta a creare un modulo di feedback in PHP da solo e, a dire il vero, è stato molto laborioso, perché... Non capivo cosa e come stesse succedendo. Pazienza e perseveranza, amici, e avrete successo.

Modulo di feedback PHP - struttura

Studieremo l'analisi del modulo di feedback stesso utilizzando un esempio pagina di destinazione (Pagina di destinazione), a proposito, c'è un articolo separato su. Puoi vedere come funziona in azione utilizzando i pulsanti sottostanti, allego i sorgenti di questa pagina di una pagina e il file principale del gestore php (questo file verrà elaborato e invierà l'e-mail)

Dopo aver scaricato i sorgenti e decompresso l'archivio, vedrai la seguente struttura di file:

• immagine: tutte le immagini utilizzate per la pagina di destinazione stessa, i pulsanti, ecc.
• js - script javascript che forniscono, ad esempio, una finestra modale pop-up su una pagina e altri effetti visivi
• index.html - file indice della nostra pagina di una pagina
• index1.php è un file gestore in cui vengono trasferiti i valori del modulo, quindi viene generata una lettera dalle variabili ricevute e inviata all'indirizzo e-mail specificato. Index1.php fungerà anche da pagina di notifica intermedia sull'avvenuto invio dei dati con reindirizzamento automatico a index.html (ovvero la nostra pagina di una pagina)

È importante che il tuo hosting, dove si trovano i file del sito, supporti l'elaborazione PHP, altrimenti il ​​file index1.php non verrà eseguito e non funzionerà. Per chiarire questa sfumatura, contatta la campagna in cui è registrato il tuo hosting o semplicemente testalo: funziona, significa che c'è supporto. In caso contrario, abilita l'opzione di supporto della lingua php

Dai un'occhiata al diagramma di come interagiscono tutti gli elementi (pagina, modulo, gestore)

Codice sorgente per chiamare il modulo e il gestore

Diamo un'occhiata a come funziona uno dei pulsanti, che fa apparire una finestra pop-up modale contenente un modulo di feedback. Questo dato fonte- non è solo uno, due inseriti nella pagina e funzionerà, dovrai personalizzarlo tu stesso in base al tuo design e alle tue esigenze.

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

Richiedi di essere richiamato Richiedi di essere richiamato

Richiedi di essere richiamato Richiedi di essere richiamato

Di seguito è riportato il codice sorgente completo del gestore index1.php, per impostare l'invio alla tua casella di posta, modifica “ [e-mail protetta]"al tuo, il resto, in linea di principio, può essere lasciato invariato

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

Verrai contattato

Verrai contattato body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Cambia l'indirizzo della pagina corrente dopo 3 secondi (3000 millisecondi)*/

Verifica della funzionalità del modulo

Richiama la finestra e inserisci i dati per un controllo di prova del nostro modulo

Permettimi di ricordarti ancora una volta che il tuo hosting deve supportare l'elaborazione file php, altrimenti il ​​nostro gestore semplicemente non verrà eseguito e non verrà inviata alcuna lettera all'indirizzo email specificato. Il risultato di un modulo di feedback completato con successo

Per me questo è tutto, ho cercato di trasmettere al meglio il significato e il funzionamento della sceneggiatura. Se avete domande, non esitate a contattarmi nei commenti o su VK (vedi dettagli di contatto). Ti auguro un lavoro facile e produttivo.

Ciao a tutti. Siamo stati bombardati da domande su come implementare un modulo che appare in una finestra modale dopo aver fatto clic su un pulsante e, dopo l'invio, veniva visualizzato un messaggio di successo o fallimento.

Penso che ci siano molte cose simili su Internet, ma poiché le persone me lo chiedono, ho deciso di farlo. Inoltre, tale funzionalità deve essere presente su quasi tutte le pagine di destinazione per implementare un pulsante di richiamata. E in effetti, ora ci sono sempre più risultati di test AB che mostrano che i moduli aperti funzionano peggio di quelli nascosti in una finestra modale e aperti dopo aver fatto clic su un pulsante.

Alcuni sostengono che ciò sia dovuto al fatto che le persone stanno lentamente “sviluppando l’immunità” e la forma aperta è una vendita aggressiva. Presumibilmente, ora è il momento in cui l'utente, vedendo un modulo aperto, crede che stiano cercando di “vendergli” qualcosa. Non sono del tutto d’accordo con questa teoria, ma un fondo di verità c’è. Questo può essere vero in alcuni tipi di attività. Bene, ora passiamo all'implementazione del modulo.

Nota! Non descriverò ogni azione in dettaglio, ma ti offrirò una versione già pronta nel codice sorgente. Se avete domande, scrivete nei commenti. Lo scopriremo :)

Oggi inizieremo non con jQuery, ma con il layout del pulsante e del modulo. Includeremo tutti gli script alla fine della pagina.

Un pulsante che, se cliccato, aprirà una finestra modale:

Invia la tua candidatura

Puoi impostare qualsiasi classe, ma nell'href scrivi #modal: questo sarà l'id del contenitore con ombreggiatura e un modulo di contatto.

Ora fornirò il codice per il modulo e il blocco su cui verrà posizionato il modulo:

Lascia i tuoi dati di contatto e un nostro consulente ti contatterà Voglio questo modulo per il mio sito web

Dopo aver aggiunto gli stili, il risultato era questo:

Per creare una finestra modale è stata utilizzata la libreria Remodal. Questo è un insieme di file css e js, solo per creare finestre modali animate. Potete scaricarlo dal link oppure con le mie modifiche a fine articolo.

Aggiungiamo stili tra i tag head:

E prima del tag body di chiusura, aggiungi gli script:

Script.js è uno script per l'elaborazione del modulo. Lo stesso Ajax che ci permette di effettuare l'intera procedura senza ricaricare la pagina:

$(document).ready(function () ( $("form").submit(function () ( // Ottieni l'ID del modulo var formID = $(this).attr("id"); // Aggiungi un hash all'ID del nome var formNm = $("#" + formID); $.ajax(( type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) ( // Emette il testo del risultato dell'invio $(formNm).html(data); ), errore: funzione (jqXHR, text, error) ( // Emette il testo dell'errore dell'invio $(formNm).html(error); ) )); return false; ) ); ));

Non darò l'originale codice CSS e js dai file responsabili della finestra modale e del modulo, poiché sono piuttosto grandi. Se è così, guarda la fonte. Ma il gestore PHP è in gran parte standard (se così posso dire):

Per favore, non dimenticare di cambiare i tuoi indirizzi E-mail per conto proprio.

Questo è il modulo Ajax che abbiamo ottenuto. Ci scusiamo per non aver cercato di spiegare in dettaglio come è stato realizzato ciascun elemento. Volevo solo dare un risultato finito, ma non ha senso descrivere tutte le animazioni e gli aspetti. Scarica il sorgente e implementalo sul tuo sito web. E questo è tutto per oggi. Buona fortuna a tutti!

Ragazzi, vi esorto a testare il modulo su un vero o server virtuale(ospitando). Assicurati che il tuo server supporti PHP, di avere un piano a pagamento e non un periodo di prova. Altrimenti nel 90% dei casi il modulo non funzionerà.

Non aspettare una lettera a casa tua cassetta postale, se hai semplicemente aperto il file indice nel browser e fatto clic sul pulsante "Invia". Php è un linguaggio lato server!

Se sei troppo pigro per capirlo e creare il modulo da solo, ti consiglio di prestare attenzione.

Si trova la versione aggiornata dell'articolo