Comment construire un formulaire de contact réactif avec PHP

Les formulaires de contact sont couramment utilisés dans les applications Web car ils permettent aux visiteurs du site Web de communiquer avec le propriétaire du site Web. Pour la plupart des sites Web, les formulaires de contact réactifs peuvent être facilement accessibles à partir de différents types d'appareils tels que des ordinateurs de bureau, des ordinateurs portables, des tablettes et des téléphones portables.

Dans ce didacticiel, un formulaire de contact réactif est mis en œuvre et les données soumises sont envoyées comme un e-mail à l'aide de PHP. Le package PHPMailer est utilisé dans ce tutoriel pour envoyer le message de contact sous forme de courrier électronique au propriétaire du site Web; Trois fichiers sont utilisés pour envoyer l'e-mail à partir du localhost à l'aide de PHP:

1. Phpmaileratoload.php
2. classe.phpmailer.php
3. classe.smtp.php

Vous pouvez télécharger ces fichiers à partir de https: // github.com / phpmailer / phpmailer /.

Création du formulaire de contact réactif

Utilisez le code ci-dessous pour créer un index.fichier html dans le / var / www / html / php dossier pour concevoir un formulaire de contact réactif. Le formulaire contiendra quatre champs: Nom, E-mail, Motif du contact et Message.

indice.html

Formulaire de contact

Nom et prénom*







E-mail*







Motif du contact*







Message*

Exécutez l'URL suivante à partir de n'importe quel navigateur pour afficher le formulaire de contact:
http: // localhost / php / contactform /

Créer un fichier JS pour la validation et la soumission de formulaire

Utilisez le code ci-dessous pour créer un fichier JS appelé contact.js Pour valider le formulaire de contact. Ici, tous les champs sont obligatoires et le champ de messagerie doit contenir une adresse e-mail valide. Si la ENVOYER LE MESSAGE Le bouton est enfoncé lorsqu'il y a un champ vide ou une adresse e-mail non valide, puis un message d'erreur sera affiché. Si le formulaire est validé correctement, les données du formulaire seront soumises au contact.php en utilisant le ajax () méthode. Si les données du formulaire de contact sont envoyées avec succès, un message de réussite sera imprimé; sinon. Un message d'échec sera imprimé en alerte.

contact.js

$ (function ()
// Vérifiez les erreurs de validateur
$ ('# cform').Validator ();
// après la soumission du formulaire
$ ('# cform').sur ('soumettre', fonction (e)
// Si le validateur n'empêche pas le formulaire
si (!e.isDefaultPreveted ())
var url = "Contact.php ";
// Poster les valeurs en arrière-plan de l'URL du script
$.ajax (
Type: "Post",
URL: URL,
Données: $ (ceci).sérialiser (),
Succès: fonction (données)

Var SuccessSalert = '×' + Data + '';
$ ('# msg').HTML (SuccessAlert);

);
retourne false;

)
);

Créez un fichier PHP pour lire les données du formulaire et envoyer un e-mail

Utilisez le code ci-dessous pour créer un fichier PHP appelé contact.php Pour lire les données du formulaire et envoyer un e-mail avec les données à l'aide du package PHPMailer. Ici, le serveur SMTP du compte Gmail est utilisé pour envoyer un e-mail. Vous devez activer le application moins sécurisée Option pour envoyer un e-mail à l'aide de Gmail. Définissez votre adresse Gmail comme le Nom d'utilisateur et votre mot de passe comme le Mot de passe dans le code. Utilisez une adresse e-mail de récepteur valide pour remplacer «Adresse e-mail du récepteur». Si l'authentification est effectuée correctement, l'e-mail sera envoyé avec succès. Un message qui transmet un succès ou un échec sera renvoyé au fichier JS à partir du fichier PHP.

contact.php

// Inclure le script nécessaire
nécessitent 'phpmaileratoload.php ';
// Créer un objet
$ mail = new phpmailer ();
// activer SMTP
$ mail-> issmtp ();
$ mail-> smtpauth = true;
// Activer le transfert sécurisé
$ mail-> smtpsecure = 'tls';
// $ mail-> smtpautotls = false;
// définir le nom d'hôte SMTP
$ mail-> host = 'smtp.Gmail.com ';
// Définir le port SMTP
$ Mail-> port = 587;
// Configuration de la configuration suivante pour l'authentification SMTP
$ mail-> smtpoptions = array (
'ssl' => array (
'Verify_peer' => false,
'Verify_peer_name' => false,
'allow_self_signed' => true
)
));
// Définissez votre adresse e-mail Gmail comme nom d'utilisateur SMTP
$ Mail-> username = 'Gmail Adresse';
// Définissez votre mot de passe de messagerie en tant que mot de passe SMTP
$ mail-> mot de passe = 'gmail p';
// Définissez l'adresse de l'expéditeur
$ mail-> setFrom ($ _ poster ['e-mail'], $ _post ['name']);
// Définissez l'adresse de réponse
$ mail-> addReplyTo ($ _ poster ['e-mail']);
// Définir l'adresse du destinataire
$ Mail → Addaddress («Adresse e-mail du récepteur»);
// définit le sujet de l'e-mail
$ Mail-> sujet = $ _post ['raison'];
// Définit le message de l'e-mail
$ mail-> body = $ _post ['message'];
// appelle la fonction Send () pour envoyer l'e-mail
if ($ mail-> send ())
Echo 'Message a été envoyé.';;
autre
Echo 'Erreur de diffusion:' . $ mail-> errorInfo;
// ECHO «Erreur dans l'envoi de message»;

?>

Exécutez l'URL mentionné ci-dessus, remplissez le formulaire avec des données appropriées et cliquez sur le ENVOYER LE MESSAGE bouton pour soumettre le formulaire après validation.

Si le formulaire était soumis correctement et que l'e-mail a été envoyé au récepteur, le message suivant apparaîtra en haut du formulaire pour informer l'utilisateur que le message a été envoyé correctement.

Conclusion

Dans ce didacticiel, nous avons conçu un formulaire réactif simple et envoyé un e-mail avec des données de formulaire du LocalHost en utilisant le code PHP. Le formulaire de contact est une partie essentielle de tout site Web car il permet aux visiteurs de contacter le propriétaire du site Web pour se connecter ou poser des questions. Les champs du formulaire peuvent varier en fonction des exigences du site.