Prestashop : Personnaliser la page contact

Prestashop : Modifier le formulaire de contact en y ajouter de nouveaux champs pour en faire un devis. Ajout de champs nom, prénom, date de naissance…

Prestashop nous fournis tous les éléments nécessaires pour la création d’une boutique en ligne.

Tout a été pensé pour permettre aux utilisateurs, même les plus novices, de créer leurs boutiques en quelques clics et de faire de la vente en ligne rapidement. Pour personnaliser un minimum sa boutique, il faut parfois effectuer quelques modifications dans le code source de Prestashop.

Modification du formulaire de contact de Prestashop

Notre agence web Biarritz allons vous expliquer comment modifier le formulaire de contact pour y ajouter de nouveaux champs.

Pour le moment, par défaut sur les boutiques Prestashop, seul trois champs sont disponibles.

Objet

Par défaut, l’objet du message envoyé depuis le formulaire est automatique sélectionné en fonction du contact choisi. Ces contacts sont administrables depuis le backoffice, en cliquant sur Employés => Contacts. Ces contacts sont composés d’un nom, d’une adresse e-mail et d’une information complémentaire, qui est l’objet du message.

prestashop contact backoffic 300x131 Prestashop : Personnaliser la page contact

Votre adresse e-mail

Comme sa dénomination l’indique, c’est le champ ou l’internaute indique son adresse e-mail. Ce champ se rempli automatiquement si le client est déjà connecté. La validité de l’adresse email est contrôlée lors de l’envoi.

Message

Ici se trouve le champ où le visiteur du site entre son message.

prestashop contact 300x165 Prestashop : Personnaliser la page contact

Imaginons maintenant que vous souhaitez recevoir automatiquement depuis le formulaire de contact Prestashop le numéro de téléphone et le numéro de fax de votre visiteur, afin de faciliter les futurs échanges.

Nous allons commencer par éditer la vue de votre boutique, à savoir le fichier contact-form.tpl, qui se trouve dans le dossier de votre thème Prestashop. On aperçoit distinctement entre la balise p les champs du formulaire. Nous allons donc ajouter 2 champs, dans l’optique que vous n’avez pas une boutique multilingue (afin de vous faciliter l’édition de code).

Vers la ligne 31, vous voyez :


<p class="text">
<label for="email">{l s='E-mail address'}</label>
<input type="text" id="email" name="from" value="{$email}" />
</p>

C’est à cette endroit qu’est défini le champ email du formulaire.

Nous allons donc ajouter, a la suite du code :


<p class="text">
<label for="telephone">Numéro de téléphone</label>
<input type="text" id="telephone" name="telephone" value="" />
</p>
<p class="text">
<label for="fax">Numéro de fax</label>
<input type="text" id="fax" name="fax" value=""/>
</p>

Si vous contrôlez en ligne, vos deux champs doivent maintenant apparaître sous le champ mail, en suivant le même css que le reste du site.

Nous avons déjà terminé les modifications de la vue. Nous allons maintenant modifier le fichier php qui gère le contrôle et l’envoi du mail.

Ce fichier se trouve à la racine du site, sous le nom de contact-form.php

Il y a 3 endroits à modifier :

A la ligne 16 – 17, vous devez avoir dans votre fichier :


elseif (!($message = nl2br2(Tools::getValue('message'))))
$errors[] = Tools::displayError('message cannot be blank');

Ce code donne à la variable message le contenu du message envoyé via la page du formulaire. Un contrôle est fait pour vérifier si le message n’est pas vide. Nous allons faire la même chose, vérifiant que le contenu des champs téléphone et fax ne sont pas vides.
Ajouter en dessous des lignes précédements cités :


elseif (!($telephone = nl2br2(Tools::getValue('telephone'))))
    $errors[] = Tools::displayError('Merci de renseigner votre numéro de téléphone');

  elseif (!($fax = nl2br2(Tools::getValue('fax'))))
$errors[] = Tools::displayError('Merci de renseigner votre numéro de fax');

getValue et une fonction sous Prestashop qui permet de récupérer les données envoyés de différentes façons dans une variable.

Envoi de la variable.

Un fois vos nouveaux champs contrôlés, vous devez les faire suivre pour pouvoir récupérer les informations qu’ils contiennent dans vos templates email.

Replacer la ligne :


if (Mail::Send(intval($cookie->id_lang), 'contact', 'Message from contact form', array('{email}' => $from, '{message}' => stripslashes($message)), $contact->email, $contact->name, $from, (intval($cookie->id_customer) ? $customer->firstname.' '.$customer->lastname : $from)))

par



if (Mail::Send(intval($cookie->id_lang), 'contact', 'Message from contact form', array('{email}' => $from,'{telephone}' => $telephone,'{fax}' => $fax,'{message}' => stripslashes($message)), $contact->email, $contact->name, $from, (intval($cookie->id_customer) ? $customer->firstname.' '.$customer->lastname : $from)))

Il reste une dernière modification à effectuer. Lors que Prestashop effectue le contrôle des champs, la page du formulaire et rafraichie et vous perdez le contenu du formulaire. Cette modification évite à vos clients d’entrer plusieurs fois les mêmes informations en cas d’erreur.

Remplacer :


$email = Tools::safeOutput(Tools::getValue('from', ((isset($cookie) AND isset($cookie->email) AND Validate::isEmail($cookie->email)) ? $cookie->email : '')));
$smarty->assign(array(
  'errors' => $errors,
  'email' => $email
));

Par :


$email = Tools::safeOutput(Tools::getValue('from', ((isset($cookie) AND isset($cookie->email) AND Validate::isEmail($cookie->email)) 
? $cookie->email : '')));
$smarty->assign(array(
  'errors' => $errors,
  'email' => $email,
  'telephone'=>Tools::getValue('telephone'),
  'fax'=>Tools::getValue('fax')
));

Maintenant pour la dernière étape, il vous suffit d’ajouter dans les fichier template de vos mails les nouveaux champs. Ouvez les fichiers
/mail/fr/contact.html
et /mail//fr/contact.txt

Sur le premier fichier, en dessous de


<td align="left" style="background-color:#DB3484; color:#FFF; font-size: 12px; font-weight:bold; padding: 0.5em 1em;">Vous avez re&ccedil;u un message de la part d'un client depuis votre boutique {shop_name}</td>
    </tr>

Ajoutez



<tr><td>Téléphone: {telephone}</td></tr>
   <tr><td>Fax: {fax}</td></tr>

Sur le second, en dessous de


Adresse électronique : {email}

Ajoutez



Téléphone : {telephone}
Fax : {fax}

prestashop contact nouveaux champs1 300x165 Prestashop : Personnaliser la page contact

L’Exemple présenté ici vous explique comment ajouter deux champs en contrôlant uniquement si le texte est vide ou pas. Les possibilités sont infinies… Maintenant, vous pouvez créer avec facilité des formulaires complexes et des devis sous Prestashop.

5 réflexions sur “ Prestashop : Personnaliser la page contact ”

  1. J’ai suivi l’ensemble du tutoriel et c’est parfait.
    En revanche, une question reste sans réponse pour moi : quoi et où modifier les fichiers pour que les nouveaux champs (dans votre exemple Téléphone et Fax) soient récupérés et affichés dans le BO ? Je gère les retours dans le module SAV, et c’est là que je souhaiterai voir les résultats de ces deux nouveaux champs.
    Merci d’avance.

  2. Bonjour,

    Ce post à bientôt 4 ans et je suis ravi que le script fonctionne sur les nouvelles versions.

    En 2010, prestashop ne proposait pas de module SAV et donc il faut passer par un autre développement …

    Mickaël

    1. Bonjour, merci de votre réponse inespérée 4 ans plus tard…
      S’il n’y avait pas de module SAV, où récupériez-vous les infos Téléphone et Fax de votre exemple ? Peut-être juste en lisant les seuls e-mails sans en passer par le BO ?

      1. Bonsoir Laurence,

        L’article a 4 ans mais votre commentaire quelques jours ;) En effet, les messages étaient directement récupérés par Email et n’étaient pas stockés en base …