Come creare un modulo di contatto reattivo con PHP

I moduli di contatto sono comunemente utilizzati nelle applicazioni Web perché consentono ai visitatori del sito Web di comunicare con il proprietario del sito Web. Per la maggior parte dei siti Web, i moduli di contatto reattive possono essere facilmente accessibili da vari tipi di dispositivi come desktop, laptop, tablet e telefoni cellulari.

In questo tutorial, viene implementato un modulo di contatto reattivo e i dati inviati vengono inviati come e -mail utilizzando PHP. Il pacchetto PHPmailer viene utilizzato in questo tutorial per inviare il messaggio di contatto come e -mail al proprietario del sito Web; Tre file vengono utilizzati per inviare l'e -mail da LocalHost utilizzando PHP:

1. Phpmailerautoload.PHP
2. classe.Phpmailer.PHP
3. classe.Smtp.PHP

Puoi scaricare questi file da https: // github.com/phpmailer/phpmailer/.

Creazione del modulo di contatto reattivo

Usa il codice seguente per creare un indice.file html nel /var/www/html/php cartella per progettare un modulo di contatto reattivo. Il modulo conterrà quattro campi: Nome, E-mail, Motivo del contatto E Messaggio.

indice.html

MODULO DI CONTATTO

Nome e cognome*







E-mail*







Motivo del contatto*







Messaggio*

Esegui il seguente URL da qualsiasi browser per visualizzare il modulo di contatto:
http: // localhost/php/contactform/

Crea un file JS per la convalida e l'invio del modulo

Utilizzare il codice seguente per creare un file JS chiamato contatto.js Per convalidare il modulo di contatto. Qui, tutti i campi sono obbligatori e il campo e -mail deve contenere un indirizzo e -mail valido. Se la INVIA MESSAGGIO Il pulsante viene premuto quando c'è un campo vuoto o un indirizzo email non valido, verrà visualizzato un messaggio di errore. Se il modulo viene convalidato correttamente, i dati del modulo verranno inviati a contatto.PHP usando il ajax () metodo. Se i dati del modulo di contatto vengono inviati correttamente, verrà stampato un messaggio di successo; Altrimenti. Un messaggio di errore verrà stampato come un avviso.

contatto.js

$ (function ()
// Controlla gli errori del validatore
$ ('#cform').validatore ();
// Dopo l'invio del modulo
$ ('#cform').on ('invia', function (e)
// Se il validatore non impedisce l'invio del modulo
Se (!e.isDefaultPrevent ())
var url = "contatto.php ";
// pubblica i valori in background l'URL dello script
$.ajax (
Tipo: "post",
URL: URL,
Dati: $ (questo).serializza (),
Successo: funzione (dati)

var successAlert = '×' + data + '';
$ ('#msg').HTML (successolert);

);
restituire false;

)
);

Crea un file PHP per leggere i dati del modulo e inviare un'e -mail

Utilizzare il codice seguente per creare un file PHP chiamato contatto.PHP Per leggere i dati del modulo e inviare un'e -mail con i dati utilizzando il pacchetto Phpmailer. Qui, il server SMTP dell'account Gmail viene utilizzato per inviare un'e -mail. Devi abilitare il App meno sicura Opzione per inviare un'e -mail utilizzando Gmail. Imposta il tuo indirizzo Gmail come il Nome utente e la tua password come Parola d'ordine nel codice. Utilizzare un indirizzo email del ricevitore valido per sostituire 'Indirizzo e -mail del ricevitore'. Se l'autenticazione viene eseguita correttamente, l'e -mail verrà inviata correttamente. Un messaggio che trasmette successo o errore verrà restituito al file JS dal file PHP.

contatto.PHP

// Includi lo script necessario
richiedere 'phpmailerautoload.php ';
// Crea un oggetto
$ Mail = new PhpMailer ();
// Abilita SMTP
$ Mail-> Issmtp ();
$ Mail-> Smtpauth = true;
// Abilita il trasferimento sicuro
$ Mail-> SmtpSecure = 'TLS';
// $ Mail-> Smtpautotls = false;
// imposta il nome host SMTP
$ Mail-> host = 'SMTP.gmail.com ';
// Imposta la porta SMTP
$ Mail-> porta = 587;
// imposta la seguente configurazione per l'autenticazione SMTP
$ Mail-> SmtPoptions = Array (
'ssl' => array (
'verify_peer' => false,
'Verify_peer_name' => false,
'Amonta_self_signed' => true
)
);
// Imposta il tuo indirizzo email Gmail come nome utente SMTP
$ Mail-> username = 'Gmail Indirizzo';
// Imposta la password e -mail come password SMTP
$ mail-> password = 'gmail p';
// Imposta l'indirizzo del mittente
$ Mail-> setFrom ($ _ post ['email'], $ _post ['name']);
// Imposta l'indirizzo di risposta
$ Mail-> addreplyto ($ _ post ['email']);
// Imposta l'indirizzo del destinatario
$ Mail → AddAddress ("Indirizzo e -mail del ricevitore");
// Imposta l'oggetto dell'email
$ mail-> soggetto = $ _post ['motivo'];
// Imposta il messaggio dell'e -mail
$ mail-> body = $ _post ['messaggio'];
// Chiama la funzione Send () per inviare l'e -mail
if ($ mail-> Send ())
Il messaggio di eco è stato inviato.';
altro
ECHO 'Errore mailer:' . $ Mail-> errorinfo;
// echo 'errore nell'invio del messaggio';

?>

Esegui l'URL menzionato sopra, compila il modulo con dati adeguati e fai clic su INVIA MESSAGGIO Pulsante per inviare il modulo dopo la convalida.

Se il modulo è stato inviato correttamente e l'e -mail è stata inviata al ricevitore, il seguente messaggio verrà visualizzato nella parte superiore del modulo per informare l'utente che il messaggio è stato inviato correttamente.

Conclusione

In questo tutorial, abbiamo progettato un semplice modulo reattivo e inviato un'e -mail con i dati del modulo dal LocalHost utilizzando il codice PHP. Il modulo di contatto è una parte essenziale di qualsiasi sito Web perché consente ai visitatori di contattare il proprietario del sito Web di connettersi o porre domande. I campi del modulo possono variare in base ai requisiti del sito.