Formulaire de contact par mail en PHP

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Formulaire de contact par Mail en PHP

Cette formation Php est destinée à apprendre la gestion et l'envoi de mail par le serveur Web. Pour cela, nous proposons d'exploiter un formulaire de contact. Toutes les demandes pourront être reçues et centralisées sur un compte mail configuré par l'hébergeur du site Web.

Sources et présentation de la problématique
Nous souhaitons focaliser notre attention sur la partie du code serveur. C'est elle qui est capable d'acheminer des courriers électroniques. C'est pourquoi nous proposons de débuter les travaux sur la base d'une structure Html existante.

• Télécharger le fichier formulaire-contact-php.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression conduit au fichier de la page Web principale. Il est nommé index.php. Il correspond au formulaire de contact. Il est accompagné de ses ressources externes dans les sous dossiers. Le sous dossier images offre notamment des captures de codes de sécurité, qu'il s'agira de reproduire pour valider l'envoi de mail. Cette technique consiste à lutter contre le spam organisé par des robots.

Comme nous l'avons appris au travers de la formation pour débuter la programmation en PHP, ce projet doit être référencé dans EasyPhp. Un nom doit lui être attribué. Son adresse prélevée depuis l'explorateur Windows doit être renseignée.

Le serveur HTTP doit être démarré. Aucun accès à la base de données n'est prévu dans cette application. Il n'est donc pas utile de démarrer le serveur de base de données (Database Server).



Une fois le projet référencé, il apparaît dans la liste des applications émulées par EasyPhp.

• Cliquer sur son lien pour atteindre sa page d'accueil,

C'est bien le formulaire de contact préconstruit qui apparaît. Comme vous le remarquez, l'internaute doit renseigner son mail, un sujet et le corps du message. Mais il doit aussi reproduire le code de sécurité proposé sur la droite, sous forme d'image.

Ces images sont générées aléatoirement. C'est une technique que nous avions développée au travers de la formation Javascript pour créer des codes de sécurité.

• Cliquer sur le bouton Envoyer le message sans renseigner les champs,

Une alerte Javascript se déclenche instantanément. Pour ne pas solliciter le serveur inutilement en lui transmettant des données incomplètes, c'est un code Javascript qui se charge de contrôler la saisie en amont. En revanche, si nous renseignions toutes les informations requises, nous constaterions un Post-Back confirmant le transfert autorisé des données.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.php,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,
• Faire défiler le code vers le bas jusqu'à atteindre la ligne 79 pour un éditeur Notepad,

Nous y notons la présence du formulaire Html encapsulant les contrôles de saisie notamment. En effet, les données doivent être transmises au serveur. C'est le code Php émulé par le serveur HTTP qui pilotera le serveur SMTP. Comme vous le savez, le serveur SMTP se charge de l'envoi des courriers. Les mails entrants quant à eux sont gérés par un serveur Pop. Celui-ci ne nous concerne pas dans cette formation.

La méthode de ce formulaire est réglée sur Post. Il s'agit donc d'envoyer les données sur la machine distante. La page d'action, donc de réception des informations, est la page index.php, soit le formulaire lui-même. Après un aller-retour serveur (PostBack), suite au clic sur le bouton Envoyer, nous récolterons ces informations. Puis, nous les consoliderons pour produire le courrier électronique et l'envoyer.

Vous notez aussi la présence d'un contrôle particulier au sein de ce formulaire. Il s'agit d'un élément textarea d'identifiant msg_contenu. Un contrôle Html textarea est une zone de saisie offrant plusieurs lignes d'écriture. Nous l'utilisons pour le corps du message.

...
<div id="grille">
<form id="contact" name="contact" method="post" action="index.php">
<div class="div_txt_form">
Votre Mail :
</div>
<div class="div_input_form">
<input type="text" name="msg_mail" id="msg_mail" maxlength="70" />
</div>
<div class="div_txt_form">
Sujet :
</div>
<div class="div_input_form">
<input type="text" name="msg_sujet" id="msg_sujet" maxlength="70" />
</div>
<div class="div_msg">
<br /><strong>Votre message :<strong><br />
<textarea id="msg_contenu" name="msg_contenu" cols="20" rows="5" class="zone_msg"></textarea>
</div>
<div class="div_txt_form">
&nbsp;
</div>
<div class="div_input_form">
<input type="button" style="text-align:center;" name="msg_envoyer" id="msg_envoyer" value="Envoyer le message" onclick="validation_avt_envoi();" />
</div>
</form>
</div>
...

Enfin, tout en bas du formulaire, vous remarquez la présence du bouton permettant de soumettre les données. Il appelle une fonction Javascript au clic. Comme nous le disions, ces informations doivent être contrôlées avant d'être transmises.

Cette fonction validation_avt_envoi est codée dans la section de script Javascript située en entête de code.

• Remonter dans le code jusqu'à la ligne 8 pour un éditeur Notepad,

Nous ne revenons pas sur les explications de cette fonction. Elle a fait l'objet d'une formation Javascript. Notez néanmoins qu'une variable (lancer) est initialisée sur le texte oui. Elle considère par défaut que le formulaire est conforme. Mais ensuite, chaque contrôle est passé en revue, grâce à la méthode getElementById permettant de les atteindre respectivement. Si l'un d'entre eux présente une anomalie, cette variable est basculée sur le texte non.

Et c'est l'état de cet indicateur qui est exploité à l'issue. Il permet de définir si les données peuvent être transmises, grâce à la méthode submit d'un objet formulaire.

...
function validation_avt_envoi()
{
var lancer="oui";

if(document.getElementById("msg_mail").value == "")
{
alert("Vous devez saisir votre mail");
lancer="non";
}
elseif(document.getElementById("msg_mail").value.indexOf("@") == -1 || document.getElementById("msg_mail").value.indexOf(".") == -1)
{
alert("Votre mail ne semble pas correct, corrigez-le");
lancer="non";
}
else if(document.getElementById("msg_sujet").value == "")
{
alert("Vous devez entrer le sujet de votre message");
lancer="non";
}
else if((document.getElementById("msg_contenu").value == "" || document.getElementById("msg_contenu").value.length < 10))
{
alert("Vous devez renseigner le contenu du message");
lancer="non";
}
else if(document.getElementById("msg_code").value == "")
{
alert("Veuillez saisir le code anti-spam");
lancer="non";
}
elseif(document.getElementById("msg_code").value.toLowerCase() != document.getElementById("mem_code").value.toLowerCase())
{
alert("Le code anti-spam est incorrect");
lancer="non";
}

if(lancer=="oui")
document.getElementById("contact").submit();
}
...

Dernière remarque au sujet de cette fonction, une contrainte est imposée sur la longueur du corps du message. Un minimum de caractères doit être tapé dans le contrôle textarea d'identifiant msg_contenu : document.getElementById("msg_contenu").value.length < 10.

• Atteindre la section de script située en bas de page (Ligne 129 pour un Notepad),

Ce code produit un nombre aléatoire borné, à chaque chargement du formulaire de contact. Il en résulte l'affichage d'un code de sécurité généré au hasard. Il s'incruste sous forme d'image sur la droite du formulaire.

Configurer le serveur SMTP
Avant de songer à exploiter les instructions Php permettant de construire un courrier électronique pour l'envoyer en bonne et due forme, le serveur SMTP doit être configuré. Cette configuration est très simple. Elle n'est nécessaire que pour les développements locaux. Lorsque vous mettrez votre site en production chez un hébergeur, ce dernier sera configuré par défaut. Il s'agira néanmoins d'adapter l'adresse de l'expéditeur du message. Elle doit correspondre avec le compte mail que vous aurez créé sur le serveur distant. Les fournisseurs d'accès et clients de messagerie sont très sensibles à la conformité des messages envoyés. L'expéditeur doit avoir le même nom de domaine que le site depuis lequel le message est émis. En revanche, ce point n'est pas à considérer pour notre phase de développement.

Pour régler le serveur d'envoi SMTP, nous devons accéder au fichier de configuration php.ini.

• Ouvrir le répertoire d'installation d'EasyPhp,

Dans les formations précédentes, nous avions conseillé de réaliser une installation sur un autre lecteur que le disque C. Si vous avez opté pour une installation standard, vous le trouverez dans le sous dossier program files du lecteur C.

• Dans la zone de recherche en haut à droite de l'explorateur Windows, taper php.ini,
• Valider pour lancer la recherche,

Plusieurs fichiers de configuration php.ini sont proposés. Celui qui nous intéresse est celui qui a été modifié le plus récemment. EasyPhp écrit en effet à chaque ouverture dans ce fichier de configuration.

• Cliquer droit sur ce fichier Php.ini,
• Dans le menu contextuel, choisir de l'ouvrir dans un éditeur comme le Notepad,

Ce fichier de configuration est dense. Nous proposons d'accéder directement à la rubrique concernée.

• Réaliser le raccourci clavier CTRL + F pour afficher la boîte de dialogue de recherche,
• Taper le mot clé sendmail et cliquer sur le bouton Suivant,

Nous atteignons directement la rubrique de paramétrage pour la gestion et l'envoi des mails.

Une seule ligne doit être insérée sous l'instruction sendmail_path =. Elle est en effet préfixée d'un point-virgule et apparaît en vert. Il s'agit du serveur SMTP qui dépend de votre fournisseur d'accès. Avec orange, vous devez mentionner : SMTP = smtp.orange.fr.

Avec Free, il s'agit de   : smtp.free.fr etc...



Pour que cette configuration soit prise en compte, le serveur http doit être redémarré.

• Enregistrer les modifications et fermer le fichier php.ini,
• Depuis l'interface d'EasyPhp, cliquer sur l'icône Restart pour le http Server,

Réception et construction du mail en Php
En Php, c'est la fonction mail qui permet de d'envoyer un courrier électronique selon quatre paramètres à renseigner :

mail($destinataire, $sujet, $contenu_message, $entete);

Le premier d'entre eux est l'adresse du destinataire. Puis viennent dans l'ordre : Le sujet, le corps du message et l'entête. L'entête consiste à définir certains paramètres de configuration. Il est notamment possible de préciser que le message doit être construit et réceptionné au format Html, pour des raisons de mise en forme et d'encodage. Mais dans un premier temps, nous proposons de découvrir cette fonction sous sa forme la plus simple.

• Revenir dans le code de la page Web principale, index.php,
• En entête, juste après l'instruction include, ajouter les lignes PHP suivantes :

<?php
include("commun/entete.php");

if(isset($_POST["msg_mail"]) && $_POST["msg_mail"]!="")
{
$expediteur = "moimeme@gmail.com";
$destinataire = "votre adresse de compte de messagerie";
$sujet = $_POST["msg_sujet"];
$entete = "From: ".$expediteur;

$contenu_message = utf8_decode($_POST["msg_contenu"])."\r\n";
$contenu_message = "De : ".$_POST["msg_mail"].", Sujet : ".$ sujet.", ".$contenu_message."\r\n";
}

?>

<script language="javascript" type="text/javascript">
...

Comme toujours, nous commençons par réaliser un test sur l'une des données potentiellement transmises. L'objectif est de ne pas générer d'erreur au premier chargement de la page, en l'absence d'information transmise et donc de données à gérer. Pour cela, nous exploitons l'instruction Php $_POST. Elle permet de réceptionner la donnée transférée grâce au PostBack, par le contrôle dont le nom lui est passé en paramètre. La fonction isset, désormais bien connue, permet de tester son existence.

Si tel est le cas, nous initialisons les variables nécessaires qui serviront de paramètres à la fonction Php mail. L'adresse de l'expéditeur est réglée sur un faux compte. Comme nous l'avons évoqué, ce n'est pas gênant en développement. Veillez à l'actualiser le jour de la mise en production. Le cas échéant, vous risquez d'être blacklisté par les FAI et clients de messagerie. Dans la variable sujet, nous réceptionnons l'information saisie par l'internaute dans la zone de texte prévue à cet effet. Nous exploitons la fonction utf8_decode pour être en conformité avec le système d'encodage classique, pour la gestion des accents notamment. Nous l'appliquons sur le corps du message renvoyé par le contrôle msg_contenu. Vous le verrez, nous configurerons le courrier, grâce à l'entête, de manière à ce qu'il puisse être mis en forme par les balises Html. L'entête est un paramètre qui ne peut être exclu. Nous le livrons ici dans sa forme la plus simple. Nous y définissons l'adresse de l'expéditeur, comme gage de confiance, préfixé de l'instruction From :.

Nous concaténons certaines informations pour les livrer dans le contenu principal de la page. Dès lors, nous n'avons plus qu'à exploiter la fonction Php mail avec ces paramètres désormais construits.

• A la suite du code, dans l'instruction conditionnelle, ajouter l'appel de la fonction mail :

mail($destinataire, $sujet, $contenu_message, $entete);

• Enregistrer les modifications et basculer sur le navigateur Web,
• Recharger le formulaire de contact en validant sa barre d'adresse par la touche Entrée,
• Renseigner tous les champs du formulaire,
• Puis, saisir le code de sécurité correspondant à l'image,
• Enfin, cliquer sur le bouton Envoyer pour transférer les informations,

Un PostBack est généré. En conséquence, la page est rechargée et donc, le formulaire se vide. Aucune erreur n'est à signaler. Les informations semblent avoir été transmises au code Php qui s'est chargé d'envoyer le mail.

Si nous affichons notre client de messagerie local et que nous commandons la réception des messages par la touche F9, nous remarquons que le courrier émanant du formulaire de contact Php, a parfaitement été acheminé.



Pour des raisons d'ergonomie, Il convient d'adresser un message de confirmation à l'internaute en cas de succès. La fonction Php mail est booléenne. Elle retourne une valeur indiquant si le message est bien parti. Lorsqu'elle renvoie 1, aucun problème n'est à signaler.

• Revenir dans le code de la page index.php,
• Ajouter l'affectation d'une variable au retour produit par la fonction mail, comme suit :

$reussi = mail($destinataire, $sujet, $contenu_message, $entete);

Cette valeur de retour doit être exploitée dans le calque d'identifiant titre. Il est situé juste au-dessus du formulaire de contact.

• Dans les balises Div du calque titre, ajouter la section Php suivante :

...
<div class="centre">
<div class="titre_centre" id="titre" style="text-align:left; padding-left:10px;">
<?php
if(isset($reussi) && $reussi==1)
echo "Votre message a été envoyé avec succès";
else
echo "Vous devez renseigner tous les champs du formulaire";
?>
</div>
</div>
...

Nous testons l'existence et le contenu de la variable de retour pour ne pas générer d'erreur en cas de premier chargement. Si l'envoi est un succès, nous affichons le message de confirmation en lieu et place grâce à la fonction php echo.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Recharger la page en validant sa barre d'adresse,
• Puis, remplir intégralement le formulaire sans oublier le code anti-spam,
• Enfin, cliquer sur le bouton Envoyer le message pour transmettre les données,

Comme vous le constatez, le message de confirmation apparaît affirmant que l'envoi est un succès. Si nous consultons notre client de messagerie, nous remarquons qu'il a en effet parfaitement été acheminé.

Il s'agit désormais de pouvoir formater les messages que nous envoyons pour proposer un aperçu clair.

Pour cela, nous devons réaliser quelques paramétrages dans l'entête. Il s'agit de définir explicitement ce message comme un courrier au format Html. Le code, très simple au demeurant, est proposé au téléchargement, à la racine du dossier de décompression.

• A la racine du dossier de décompression, ouvrir le fichier fragments_code.txt,
• Sélectionner la ligne proposée et la copier (CTRL + C),
• Revenir dans la section Php située en entête de code de la page index.php,
• Juste avant la déclaration de la variable $entete, coller cette ligne,
• Pour la concaténation, ajouter un point devant la seconde affectation, comme suit :

...
if(isset($_POST["msg_mail"]) && $_POST["msg_mail"]!="")
{
$expediteur = "moimeme@gmail.com";
$destinataire = "votre adresse de compte de messagerie";
$sujet = $_POST["msg_sujet"];

$entete = "Content-Type: text/html;\n";
$entete .= "From: ".$expediteur;

$contenu_message = utf8_decode($_POST["msg_contenu"])."\r\n";
$contenu_message = "De : ".$_POST["msg_mail"].", Sujet : ".$ sujet.", ".$contenu_message."\r\n";

$reussi = mail($destinataire, $sujet, $contenu_message, $entete);
}
...

Nous définissons l'attribut Content-Type permettant d'indiquer que ce message sera formaté en Html. Cette configuration étant réalisée, il s'agit d'intégrer ces fameuses balises.

Il convient d'intégrer le corps du message dans des balises Html en recopiant la balise meta configurant le système d'encodage depuis le fichier fragments_code.txt.

• Dans la variable contenu_message, réaliser les adaptations suivantes, notées en gras :

...
$contenu_message = utf8_decode( $_POST["msg_contenu"])."\r\n";
$contenu_message = "De : ".$_POST["msg_mail"].",<br /><br /><strong>Sujet :".$sujet."</strong><br/><br />".$contenu_message."\r\n";
$contenu_message ="<html><body>".$contenu_message."</body></html>";
...

Nous remplaçons les virgules par des sauts de ligne. Ils sont matérialisés par la balise Html <br />. Nous aérons ainsi la présentation pour plus de clarté. Nous passons le sujet en gras en l'encadrant de balises <strong>...</strong>. Nous englobons le tout dans les déclaratives usuelles permettant d'amorcer un document Html (<html><body>) et de le fermer (</body></html>). Vous avez sans doute noté la concaténation avec des caractères spéciaux en fin d'instruction (."\r\n"). Ils consistent à briser le flot d'informations transmis et géré par les protocoles se chargeant de poster le courrier. Ils permettent de hacher le contenu lorsqu'il est dense. Sans cette astuce, des espaces peuvent être supprimés aléatoirement rendant difficiles la compréhension de l'information transmise.

Si nous enregistrons et que nous testons, nous constatons que nous réceptionnons le message mis en forme. Il est désormais aéré et plus simple à appréhender.



Bientôt nous exploiterons ces acquis pour produire des Newsletters construites automatiquement, par le code Php. Il sera question de contacter tous les membres. L'objectif ultime consistera à proposer des informations personnalisées selon les indications fournies lors de la phase d'inscription.