Comment créer une page de contact avec PHP

 



Dans ce tutoriel, nous allons créer une page de contact avec HTML, CSS et PHP. Le code consistera en un formulaire HTML, une validation et un code PHP qui traitera les données du formulaire.


A quoi sert une page de contact ?

Lorsqu'un utilisateur visite votre site Web, il peut utiliser la page de contact pour vous contacter concernant de nombreux aspects de votre site Web. Par exemple, l'utilisateur peut signaler un bogue ou vous faire part de ses commentaires impartiaux. Que leurs intentions soient bonnes ou non.

De plus, la page de contact peut vous aider avec des opportunités de marketing et fournira un moyen de communiquer avec votre public.



1. Mise en route

Avant de commencer à coder notre formulaire de contact, nous devons nous assurer que nous disposons d'un serveur Web fonctionnel et que nous répondons à toutes les exigences ci-dessous. Nous ne pouvons pas exécuter de code PHP sans un serveur Web fonctionnel car il s'agit d'un langage de programmation côté serveur.

1.1. Exigences

  • Serveur Web — Si vous n'avez pas installé de package de solution de serveur Web local, je vous recommande de télécharger et d'installer XAMPP . XAMPP est un package de solution de serveur Web open source.
  • Serveur de messagerie (SMTP) — Sans un serveur de messagerie fonctionnel, vous ne pourrez pas recevoir d'e-mails traités à l'aide du formulaire de contact. Si vous hébergez votre site Web chez un fournisseur, vous ne devriez rien faire. Cependant, si vous avez votre propre serveur (dédié/vps), je vous recommande d'installer Postfix .

1.2. Ce que vous apprendrez dans ce tutoriel

  • Concevoir un formulaire de contact — Nous utiliserons CSS pour concevoir notre formulaire de contact et HTML pour structurer notre code.
  • Validation du formulaire — Implémentez la validation des éléments individuels de notre formulaire.
  • Envoyer un e-mail — La fonction de messagerie PHP nous permettra d'envoyer un e-mail à une adresse e-mail spécifiée.

1.3. Structure et configuration des fichiers

Nous allons maintenant démarrer notre serveur Web et créer les fichiers et répertoires que nous allons utiliser pour notre page de formulaire de contact.

  • Ouvrez le panneau de configuration XAMPP
  • À côté du module Apache, cliquez sur Démarrer
  • À côté du module MySQL, cliquez sur Démarrer
  • Accédez au répertoire d'installation de XAMPP ( C:\xampp )
  • Ouvrez le répertoire htdocs
  • Créez les répertoires et fichiers suivants :

Structure du fichier

\-- formulaire de contact
    |-- contact.php
    |-- style.css

Les fichiers et répertoires ci-dessus contiendront les éléments suivants :

  • contact.php — Ce fichier contiendra notre modèle de formulaire de contact et le code PHP qui traitera le formulaire.
  • style.css — La feuille de style qui structurera notre page et la rendra plus attrayante.

2. Conception du formulaire de contact avec CSS

La feuille de style structurera notre mise en page et décrira comment chaque élément s'affichera à l'écran. Il comprend les polices, les couleurs et la taille des éléments.

Modifiez le fichier style.css et ajoutez :

CSSCopie
html, body, div, input, span, a, select, textarea, option, h1, h2, h3, h4, main, aside, article, section, header, p, footer, nav, pre {
    box-sizing: border-box;
    font-family: Tahoma, Geneva, sans-serif;
}
html {
    background-color: #F8F9F9;
    padding: 30px;
}
input,textarea,p {
    outline: 0;
}
h1 {
    margin: 0;
    padding: 20px;
    font-size: 22px;
    text-align: center;
    border-bottom: 1px solid #eceff2;
    color: #6a737f;
    font-weight: 600;
}
.contact {
    background-color: #fff;
    width: 500px;
    margin: 0 auto;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,.2);
}
.contact .fields {
    position: relative;
    padding: 15px;
}
.contact input[type="text"], .contact input[type="email"] {
    display: block;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #dfe0e0;
    width: 100%;
}
.contact input[type="text"]:focus, .contact input[type="email"]:focus {
    border: 1px solid #c6c7c7;
}
.contact input[type="text"]::placeholder, 
.contact input[type="email"]::placeholder, 
.contact textarea::placeholder {
    color: #858688;
}
.contact textarea {
    resize: none;
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #dfe0e0;
    width: 100%;
    height: 150px;
}
.contact textarea:focus {
    border: 1px solid #c6c7c7;
}
.contact input[type="submit"] {
    display: block;
    margin-top: 15px;
    padding: 15px;
    border: 0;
    background-color: #518acb;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    width: 100%;
}
.contact input[type="submit"]:hover {
    background-color: #3670b3;
}
.contact input[name="email"] {
    position: relative;
    display: block;
}
.contact label {
    position: relative;

}
.contact label i {
    position: absolute;
    color: #dfe2e5;
    top: 31px;
    left: 15px;
    z-index: 10;
}
.contact label i ~ input {
    padding-left: 45px !important;
}
.contact .responses {
    padding: 15px;
    margin: 0;
}

C'est tout ce que nous devons faire pour le fichier de feuille de style. Vous êtes libre de le personnaliser à votre guise.

3. Structurer le formulaire de contact avec HTML

Maintenant, nous devons structurer notre page et implémenter le formulaire de contact et ses éléments.

Editez le fichier contact.php et ajoutez :

HTMLCopie
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1">
		<title>Contact Form</title>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<form class="contact" method="post" action="">
			<h1>Contact Form</h1>
			<div class="fields">
				<label for="email">
					<i class="fas fa-envelope"></i>
					<input id="email" type="email" name="email" placeholder="Your Email" required>
				</label>
				<label for="name">
					<i class="fas fa-user"></i>
					<input type="text" name="name" placeholder="Your Name" required>
				<label>
				<input type="text" name="subject" placeholder="Subject" required>
				<textarea name="msg" placeholder="Message" required></textarea>
			</div>
			<input type="submit">
		</form>
	</body>
</html>

Cela créera notre modèle et tous les champs que nous associerons à notre formulaire de contact. Comme vous pouvez le voir dans la section d'en-tête, nous avons inclus notre fichier de feuille de style avec la bibliothèque FontAwesome , qui nous permettra d'utiliser des icônes dans notre formulaire.

Nous allons utiliser une requête POST pour traiter le formulaire et, par conséquent, la méthode du formulaire est définie surpostComme les données du formulaire seront traitées dans le même fichier, il n'est pas nécessaire de spécifier la valeur de l'action. Au lieu de cela, nous pouvons le laisser vide.

Le formulaire de contact est composé des éléments suivants :

HTMLCopie
<input id="email" type="email" name="email" placeholder="Your Email" required>

Cela créera le champ e-mail. Nous avons déclaré l'attribut name car c'est ce que nous utiliserons lors de la récupération des données avec PHP, qui peuvent être récupérées avec$_POST['e-mail'].

HTMLCopie
<input type="text" name="name" placeholder="Your Name" required>

L'élément ci-dessus créera notre champ de nom, qui sera le vrai nom de l'utilisateur.

HTMLCopie
<input type="text" name="subject" placeholder="Subject" required>

L'élément ci-dessus sera notre champ d'objet, qui est essentiellement le titre du message.

HTMLCopie
<textarea name="msg" placeholder="Message" required></textarea>

Enfin, nous avons le champ de message. L'élément textarea est différent des autres que nous avons déclarés car il permettra à l'utilisateur d'écrire sur plusieurs lignes plutôt que sur une seule.

Avez-vous remarqué comment nous avons spécifié l'attribut required sur tous nos éléments de formulaire ? En effet, le navigateur validera le formulaire avant la soumission, ce qui peut aider à éviter les soumissions multiples à notre serveur.

Si nous naviguons vers notre nouveau fichier dans notre navigateur, nous devrions voir :

http://localhost/contactform/contact.php
Formulaire de contact PHP

C'est tout ce que nous devons faire pour cette partie. Nous avons conçu et structuré notre formulaire de contact. Ensuite, nous allons commencer à coder l'aspect PHP.

4. Traitement du formulaire de contact avec PHP

Nous pouvons enfin commencer à coder notre formulaire de contact avec PHP. Dans cette section, nous validerons les champs du formulaire et enverrons le courrier directement à une adresse e-mail.

Modifiez le fichier contact.php et ajoutez le code suivant tout en haut, avant le code du modèle :

PHPCopie
<?php
// Output messages
$responses = [];
// Check if the form was submitted
if (isset($_POST['email'], $_POST['subject'], $_POST['name'], $_POST['msg'])) {
	// Validate email adress
	if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
		$responses[] = 'Email is not valid!';
	}
	// Make sure the form fields are not empty
	if (empty($_POST['email']) || empty($_POST['subject']) || empty($_POST['name']) || empty($_POST['msg'])) {
		$responses[] = 'Please complete all fields!';
	} 
	// If there are no errors
	if (!$responses) {
		// Where to send the mail? It should be your email address
		$to      = 'contact@example.com';
		// Send mail from which email address?
		$from = 'noreply@example.com';
		// Mail subject
		$subject = $_POST['subject'];
		// Mail message
		$message = $_POST['msg'];
		// Mail headers
		$headers = 'From: ' . $from . "\r\n" . 'Reply-To: ' . $_POST['email'] . "\r\n" . 'X-Mailer: PHP/' . phpversion();
		// Try to send the mail
		if (mail($to, $subject, $message, $headers)) {
			// Success
			$responses[] = 'Message sent!';		
		} else {
			// Fail
			$responses[] = 'Message could not be sent! Please check your mail server settings!';
		}
	}
}
?>

Tout d'abord, nous déclarons une variable qui affichera toutes les réponses dans notre formulaire, qu'il s'agisse d'une réponse par e-mail incorrecte ou d'autre chose.

Par la suite, nous vérifions si le formulaire a été soumis en vérifiant si les variables post existent, ce que la fonction isset() fera pour nous.

Enfin, s'il n'y a pas d'erreurs de validation, le code tentera d'envoyer le courrier à l'adresse e-mail indiquée. Assurez-vous de mettre à jour le$ àvariable.

Nous devons maintenant ajouter la variable de réponses à notre formulaire. Trouvez la ligne suivante :

HTMLCopie
<input type="submit">

Ajouter ci-dessus :

PHPCopie
<?php if ($responses): ?>
<p class="responses"><?php echo implode('<br>', $responses); ?></p>
<?php endif; ?>

C'est tout ce que nous devons faire pour créer un formulaire de contact. Si vous rencontrez une erreur de serveur de messagerie, vous devrez vérifier les paramètres de votre serveur de messagerie et vous assurer qu'ils sont corrects.

Conclusion

Toutes nos félicitations! Vous avez créé avec succès un formulaire de contact avec HTML, CSS et PHP. Et ensuite ? Envisagez d'implémenter votre propre validation et d'étendre le formulaire de contact pour prendre en charge davantage de champs, tels que la catégorie, la priorité, etc.

Envisagez de partager l'article sur les sites Web sociaux si vous l'avez trouvé utile et déposez un commentaire ci-dessous. Nous apprécions grandement le soutien.

Enregistrer un commentaire

Post a Comment (0)

Plus récente Plus ancienne