Comment créer un formulaire de contact en HTML
26
Tout d'abord créez 2 fichiers : contact_form.html et contact.php. Le premier fichier contiendra le code HTML du formulaire et le second traitera les données du formulaire.
HTML
Ci-dessous vous verrez le code HTML du formulaire de contact
|
1
2
3
4
5
6
7
8
9
10
|
<form action="contact.php" method="post"> Your name<br> <input type="text" name="cf_name"><br> Your e-mail<br> <input type="text" name="cf_email"><br> Message<br> <textarea name="cf_message"><br> <input type="submit" value="Send"> <input type="reset" value="Clear"></form> |
Et c'est comme ça que vous le verrez dans le navigateur
Jetons un coup d’œil sur certains aspects principaux. La balise <form> devrait avoir 2 attributs supplémentaires :
action=”contact.php” – cet attribut spécifie où envoie les données à partir des champs du formulaire de contact, lorsqu'il a été soumis
method=”post” – cet attribut spécifie comment envoyer des données du formulaire au fichier spécifié dans l'attribut action. Les balises <input> et <textarea> devrait avoir un attribut “name” avec un identifiant unique. Cet attribut est utilisé pour identifier les données de formulaire après leur soumission au serveur. Et les 2 éléments d’entrée utilisés comme boutons Send et Clear, on devrait avoir type=”submit” assigné à lui et l'autre type=”reset”
C’est essentiellement ça. Aussi facile que ça en a l'air.
PHP
Maintenant, pour le fichier contact.php qui saisira réellement les données des champs, composez un message et envoyez-le à votre email. Vous pouvez télécharger le fichier contact.php d'ici. Vous trouverez ci-dessous le code du fichier contenant des commentaires sur ses principales sections.
Affectation des données envoyées à partir des champs du formulaire de contact (cf_name, cf_email, cf_message) aux variables php ($cf_message, $field_email, $field_message)
|
1
2
3
|
$field_name = $_POST['cf_name'];$field_email = $_POST['cf_email'];$field_message = $_POST['cf_message']; |
$mail_to contiendra l'e-mail du propriétaire du site, c'est là que l'e-mail est envoyé. Vous pouvez spécifier plusieurs emails en les séparant par une virgule ([email protected], [email protected])
|
1
|
|
Objet du mail que vous recevez du formulaire de contact
|
1
|
$subject = 'Message from a site visitor ' . $field_name; |
Construire le corps du message
|
1
2
3
|
$body_message = 'From: '.$field_name."\n";$body_message .= 'E-mail: '.$field_email."\n";$body_message .= 'Message: '.$field_message; |
Construire les en-têtes du message
|
1
2
|
$headers = "From: $cf_email\r\n";$headers .= "Reply-To: $cf_email\r\n"; |
Définir la fonction mail() et l'assigner à la variable $mail_status, qui est utilisée ci-dessous pour vérifier si le courrier a été envoyé ou non
|
1
|
$mail_status = mail($mail_to, $subject, $body_message, $headers); |
Si la fonction mail() est exécutée avec succès alors faites le code ci-dessous
|
1
2
3
4
5
6
7
8
9
|
if ($mail_status) { ?> <script language="javascript" type="text/javascript"> // Print a message alert('Thank you for the message. We will contact you shortly.'); // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com window.location = 'contact_page.html'; </script><?php} |
Si la fonction mail() échoue, alors exécutez le code suivant
|
1
2
3
4
5
6
7
8
9
|
else { ?> <script language="javascript" type="text/javascript"> // Print a message // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com window.location = 'contact_page.html'; </script><?php}?> |
Claire est une écrivaine talentueuse et curieuse. Sa principale priorité est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'intéresse également activement à la littérature, aux traductions et communique avec plaisir avec les abonnés en ligne.