Note utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

 

 

Dans ce tutoriel, je vais vous montrer comment personnaliser votre page d'erreur 404, et comment la doter d'un formulaire qui permettra à vos visiteurs de vous signaler la présence d'une page introuvable sur votre site.

 

Objectif

Si vous êtes un webmaster qui se respecte, vous avez certainement horreur des erreurs 404... Vos visiteurs aussi...

L'objectif de ce tutoriel est donc de créer une page d'erreur 404 personnalisée, qui offrira la possibilité à vos visiteurs de vous signaler l'erreur qu'ils ont rencontré.

Vous recevrez par mail ce signalement et vous pourrez ainsi agir immédiatement.

L'avantage de cette méthode est double : vous êtes rapidement informé d'une erreur 404, et vos visiteurs constatent également que le sujet vous préoccupe et que vous mettez tout en oeuvre pour l'éradiquer.

 

 

Présentation

Nous créérons tout d'abord notre page d'erreur 404 personnalisée, avec formulaire, puis nous écrirons le script de traitement en PHP.

Enfin, nous modifierons le .htaccess de notre site afin de remplacer la page d'erreur 404 par défaut par la nôtre.

Je détaillerai l'utilisation d' Adobe Dreamweaver, mais je vous fournirai également le code afin que vous puissez le faire avec n'importe quel éditeur wysisyg ou même avec le simple bloc notes de Windows.

Pour vous repérer facilement, je vous conseille de nommer les pages comme moi :

  • ma page d'erreur se nommera erreur404.htm
  • mon script de traitement se nommera traitement.php

 

 

Création de la page personnalisée d'erreur 404 :

Créez une nouvelle page, au format html ou php, peu importe.

Quelques conseils pour qu'une page d'erreur ne soit pas perturbante pour vos visiteurs :

  • créez-là aux couleurs de votre site
  • ajouter votre logo
  • ajoutez un lien vers la racine de votre site, ou vers votre moteur de recherche
  • incitez vos visiteurs à vous signaler l'erreur (offrez un abonnement, un goodies...)

 

Pour les images et les liens de votre page d'erreur, utilisez des liens absolus

 

 

 

Création du formulaire

Sur cette page d'erreur, nous allons créer un formulaire, très simple, qui permettra à vos visiteurs de vous indiquer :

  • l'adresse de la page manquante
  • l'adresse de la page sur laquelle le lien brisé était présent
  • l'email du visiteur

Sur Dreamweaver, cliquez sur le menu "Insertion", "Formulaire" puis "Formulaire"

 

 

Dans le champ ID de formulaire, donnez un nom à votre formulaire, sélectionnez la Méthode "POST", et réglez l'Enctype sur "multipart/form-data"

Laissez le champ Action vide pour le moment

 

 

Je choisit personnellement d'organiser mon formulaire en tableau

 

 

Je vais créer mon premier champ "URL_MANQUANTE", où le visteur pourra coller l'adresse de la page introuvable.

Pour cela, je clique sur le menu Insertion, Formulaire puis Champ de texte

 

 

Dans l'inspecteur de propiétés, j'indique le nom du champ "URL_MANQUANTE", puis je détermine une largeur de champ sur 50

 

 

Mon premier champ est créé

 

 

Je créé de la même manière deux autres champs texte :

  • URL_SOURCE : où le visiteur pourra m'indiquer où se trouvait le lien brisé
  • EMAIL : où le visiteur pourra m'indiquer son adresse mail

 

 

Je créé ensuite le bouton d'envoi du formulaire, en allant dans le menu Insertion, Formulaire puis Bouton

 

 

Je lui donne une valeur "ENVOYER L'ERREUR AU WEBMASTER" afin que le bouton soit bien explicite et je détermine l'action sur "Envoyer le formulaire"

 

 

Je fusionne mes 2 colonnes afin de le centrer dans mon tableau...

 

 

Afin d'identifier clairement les emails qui proviendront de ma page d'erreur, je créé un champ masqué...

Insertion, Formulaires, Champ masqué :

 

 

... que je vais nommer "DE" et auquel je vais attribuer une adresse spécifique dans sa valeur.

cette adresse peut réellement exister ou non, ce n'est absolument pas gênant.

De cette manière, je recevrai tous mes signalements d'erreurs 404 de la part de l'adresse que j'aurais indiqué.

 

 

Voici mon formulaire final :

 

 

Pour ceux qui n'utilisent pas Dreamweaver, le code du formulaire est le suivant :

<form action="" method="post" enctype="multipart/form-data" name="ERREUR404" id="ERREUR404">
<div align="center">
<table width="80%" border="1" cellpadding="10">
<tr>
<td width="52%" nowrap="nowrap"><em>Copiez/collez l'adresse de la page manquante</em></td>
<td width="48%"><label for="URL_MANQUANTE"></label>
<input name="URL_MANQUANTE" type="text" id="URL_MANQUANTE" size="50" /></td>
</tr>
<tr>
<td><em>Si possible, copiez/collez le lien de la page sur laquelle vous avez trouvé le lien vers cette page manquante</em></td>
<td><input name="URL_SOURCE" type="text" id="URL_SOURCE" size="50" /></td>
</tr>
<tr>
<td><em>Indiquez votre email</em></td>
<td><input name="EMAIL" type="text" id="EMAIL" size="50" /></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input name="DE" type="hidden" id="DE" value="erreur404@learnup.fr" />
<input type="submit" name="ENVOYER" id="ENVOYER" value="ENVOYER L'ERREUR AU WEBMASTER" />
</div></td>
</tr>
</table>
</div>
</form>

 

 

Sauvegardez votre page d'erreur. Je l'enregistre personnellement sous le nom "erreur404.htm"

 

 

 

Création de la page de traitement

Créez une nouvelle page au format PHP que vous nommerez "traitement.php"

Puis, copiez/collez le code suivant entre les balises "<?php" et "?>"

Je ne détaille pas totalement la création de ce code, mais s'il vous intéresse, vous pouvez le lire dans le tutoriel "Créer un formulaire avec traitement PHP et mise en forme CSS"

 

<?php
$msg_ok = "Merci de nous avoir signalé cette erreur. Elle sera rapidement corrigée";
$message = $msg_erreur;
define('MAIL_DESTINATAIRE','votreemail@domaine.fr'); // remplacer par votre email
define('MAIL_SUJET','Erreur 404');

// nous vérifions ici les champs
if (empty($_POST['URL_MANQUANTE']))
$message .= "Vous avez oublié de nous communiquer l'adresse de la page manquante.<br/>";

// si un champ est vide, on affiche le message d'erreur
if (strlen($message) > strlen($msg_erreur)) {

echo $message;

// sinon c'est ok
} else {

foreach($_POST as $index => $valeur) {
$$index = stripslashes(trim($valeur));
}
//on prépare l'en-tête de l'email
$mail_entete = "MIME-Version: 1.0\r\n";
$mail_entete .= "From: {$_POST['DE']} "
."<{$_POST['DE']}>\r\n";
$mail_entete .= 'Reply-To: '.$_POST['EMAIL']."\r\n";
$mail_entete .= 'Content-Type: text/plain; charset="iso-8859-1"';
$mail_entete .= "\r\nContent-Transfer-Encoding: 8bit\r\n";
$mail_entete .= 'X-Mailer:PHP/' . phpversion()."\r\n";

// puis on créé le corps de l'email
$mail_corps .= "URL de la page manquante : $URL_MANQUANTE\n";
$mail_corps .= "URL de la page où le lien est présent : $URL_SOURCE\n\n\n";
$mail_corps .= "Email client : $EMAIL\n";
// envoi du mail
if (mail(MAIL_DESTINATAIRE,MAIL_SUJET,$mail_corps,$mail_entete)) {

//si le mail est bien expédié
echo $msg_ok;
} else {

//si l'email n'a pas été expédié
echo 'Une erreur est survenue lors de l\'envoi du formulaire par email';
}

}
?>

 

 

Terminez d'habiller votre page en ajoutant votre logo, un lien vers la racine de votre site, etc...

 

 

Vous pouvez à présent réouvrir votre page d'erreur personnalisée, et, dans les propriétés du formulaire, au niveau du champ "Action", indiquer l'adresse absolue vers la page de traitement php que vous venez de créer

 

 

 

Test de votre page d'erreur et du traitement du formulaire

Uploadez la page d'erreur "erreur404.htm" et la page de traitement "traitement.php" sur votre serveur, puis accédez à la page d'erreur à l'aide de votre navigateur :

Remplissez les champs avec des données, puis envoyez le formulaire.

 

 

Vérifiez que vous reçevez bien le mail :)

Vous constatez que :

  • le mail provient bien de l'adresse précisée dans le champ masqué "DE"
  • que les URL "URL_MANQUANTE" et "URL_SOURCE" sont bien présentes
  • que l'email de votre visiteur est bien affiché
  • si vous faites répondre, l'adresse du destinataire est automatiquement celle du visiteur

 

 

 

 

Modification du .htaccess

Maintenant que notre page d'erreur est prête, que le traitement du formulaire est également prêt, nous allons modifier notre fichier .htaccess de manière à ce que ce soit notre page d'erreur personnalisée qui soit utilisée à la place de la page d'erreur par défaut.

Si votre site tourne sous Joomla, suivez ces instructions

 

Récupérez le fichier .htaccess présent à la racine de votre site, puis ouvrez-le avec le bloc notes afin d'ajouter la ligne

ErrorDocument 404 http://www.votresite.fr/erreur404.htm

Remplacez évidemment par l'adresse de votre site, et vérifiez bien l'extension de la page, selon que vous l'ayez créée au format HTML ou PHP

 

 

Uploadez le fichier .htaccess modifié sur votre serveur, puis provoquez une erreur 404, en saisissant dans votre navigateur une URL n'existant pas.

Votre page d'erreur personnalisée doit s'afficher :)

 

Si ce n'est pas le cas, pensez à vider le cache de votre navigateur !

 

 

 

 

 

 

 

1000 caractères restants