Tuto : Modifier le formulaire de contact sous PrestaShop 1.6

PrestaShop
  • Accueil
  • Blog
  • Tuto : Modifier le formulaire de contact sous PrestaShop 1.6

PrestaShop 1.6 propose comme sur les anciennes versions de la solution e-commerce une page particulière contenant un formulaire de contact. Ce formulaire suffit dans la plupart des cas mais il faut souvent le modifier / ajouter des champs pour répondre au besoin des projets.

Tuto : Modifier le formulaire de contact de PrestaShop 1.6

Par défaut, PrestaShop propose un formulaire de contact simple et efficace sans besoin d’intégration particulière. Voici une capture d’écran du formulaire par défaut :
form-prestashop-1.6
Le formulaire de contact de PrestaShop 1.6 permet de recevoir les infos de base des clients. On peut en revanche vouloir d’autres informations comme le prénom et nom du client, la société, le téléphone en tant que champs obligatoires. On peut aussi supprimer la fonction d’envoi de fichiers et le champ référence.

Modifier le template du formulaire de contact

On travaille ici le thème Défault-Bootstrap de PrestaShop 1.6.1.6 pour l’exemple mais le travail est valable pour toutes les version 1.6 de PrestaShop.

Suppression des champs inutiles

On ne peut pas utiliser les champs « référence » et « envoi de fichiers ». On ouvre le fichier contact-form.tpl du thème et on commente l’affichage des champs en Smarty via les accolades / étoiles : {* code commenté *}
Pour enlever le champ référence de commande du formulaire de contact :

{*{if !$PS_CATALOG_MODE}
{if (!isset($customerThread.id_order) || $customerThread.id_order > 0)}
<div class="form-group selector1">
<label>{l s='Order reference'}</label>
{if !isset($customerThread.id_order) && isset($is_logged) && $is_logged}
<select name="id_order" class="form-control">
<option value="0">{l s='-- Choose --'}</option>
{foreach from=$orderList item=order}
<option value="{$order.value|intval}"{if $order.selected|intval} selected="selected"{/if}>{$order.label|escape:'html':'UTF-8'}</option>
{/foreach}
</select>
{elseif !isset($customerThread.id_order) && empty($is_logged)}
<input class="form-control grey" type="text" name="id_order" id="id_order" value="{if isset($customerThread.id_order) && $customerThread.id_order|intval > 0}{$customerThread.id_order|intval}{else}{if isset($smarty.post.id_order) && !empty($smarty.post.id_order)}{$smarty.post.id_order|escape:'html':'UTF-8'}{/if}{/if}" />
{elseif $customerThread.id_order|intval > 0}
<input class="form-control grey" type="text" name="id_order" id="id_order" value="{if isset($customerThread.reference) && $customerThread.reference}{$customerThread.reference|escape:'html':'UTF-8'}{else}{$customerThread.id_order|intval}{/if}" readonly="readonly" />
{/if}
</div>
{/if}
{if isset($is_logged) && $is_logged}
<div class="form-group selector1">
<label class="unvisible">{l s='Product'}</label>
{if !isset($customerThread.id_product)}
{foreach from=$orderedProductList key=id_order item=products name=products}
<select name="id_product" id="{$id_order}_order_products" class="unvisible product_select form-control"{if !$smarty.foreach.products.first} style="display:none;"{/if}{if !$smarty.foreach.products.first} disabled="disabled"{/if}>
<option value="0">{l s='-- Choose --'}</option>
{foreach from=$products item=product}
<option value="{$product.value|intval}">{$product.label|escape:'html':'UTF-8'}</option>
{/foreach}
</select>
{/foreach}
{elseif $customerThread.id_product > 0}
<input type="hidden" name="id_product" id="id_product" value="{$customerThread.id_product|intval}" readonly="readonly" />
{/if}
</div>
{/if}
{/if}*}

Pour enlever l’envoi de fichiers du formulaire de contact :

{*{if $fileupload == 1}
<p class="form-group">
<label for="fileUpload">{l s='Attach File'}</label>
<input type="hidden" name="MAX_FILE_SIZE" value="{if isset($max_upload_size) && $max_upload_size}{$max_upload_size|intval}{else}2000000{/if}" />
<input type="file" name="fileUpload" id="fileUpload" class="form-control" />
</p>
{/if}*}

Ajouter les nouveaux champs

Toujours dans le fichier contact-form.tpl on va ajouter le nouveau champ « téléphone » par exemple. Voici le code du fichier contact-form.tpl après ajout du champ après l’envoi de fichier qui est désormais masqué :

{*{if $fileupload == 1}
<p class="form-group">
<label for="fileUpload">{l s='Attach File'}</label>
<input type="hidden" name="MAX_FILE_SIZE" value="{if isset($max_upload_size) && $max_upload_size}{$max_upload_size|intval}{else}2000000{/if}" />
<input type="file" name="fileUpload" id="fileUpload" class="form-control" />
</p>
{/if}*}
<p class="form-group">
<label for="projet">{l s='Téléphone'}* :</label>
<input class="form-control grey" type="text" id="telephone" name="contact_telephone" class="text1" value="{$contact_telephone}" />
</p>

Modifier le controller du formulaire de contact

Le controller du formulaire de contact de PrestaShop définit les champs à traiter, les champs obligatoires et fait le lien avec les variables Smarty. Il faut copier le fichier /controllers/front/ContactController.php et le coller dans /override/controllers/front/ContactController.php.
Il faut copier tout le contenu du fichier en modifiant la première ligne comme suit :

class ContactController extends ContactControllerCore

Il faut également supprimer totalement les fonctions suivantes :

public function setMedia()
protected function assignOrderList()
protected function getOrder()

Test et contrôle des nouveaux champs

Dans le fichier ContactController.php la fonction postProcess vérifie que les champs sont remplis correctement avant d’envoyer le contenu du formulaire. Si les champs sont obligatoires (comme dans l’exemple), il faut ajouter les conditions correspondantes à présent.
Voici le contenu du controller après ajout du contrôle du champ téléphone ajouté :

public function postProcess()
{
if (Tools::isSubmit('submitMessage')) {
$extension = array('.txt', '.rtf', '.doc', '.docx', '.pdf', '.zip', '.png', '.jpeg', '.gif', '.jpg');
$file_attachment = Tools::fileAttachment('fileUpload');
$message = Tools::getValue('message'); // Html entities is not usefull, iscleanHtml check there is no bad html tags.
if (!($from = trim(Tools::getValue('from'))) || !Validate::isEmail($from)) {
$this->errors[] = Tools::displayError('Invalid email address.');
} elseif (!$message) {
$this->errors[] = Tools::displayError('The message cannot be blank.');
} elseif (!Validate::isCleanHtml($message)) {
$this->errors[] = Tools::displayError('Invalid message');
} elseif (!($id_contact = (int)Tools::getValue('id_contact')) || !(Validate::isLoadedObject($contact = new Contact($id_contact, $this->context->language->id)))) {
$this->errors[] = Tools::displayError('Please select a subject from the list provided. ');
} else if (!($contact_telephone = trim(Tools::getValue('contact_telephone'))) || (!($contact_telephone = nl2br2($contact_telephone)))) {
$this->errors[] = Tools::displayError('Veuillez renseigner le téléphone.');
} elseif (!empty($file_attachment['name']) && $file_attachment['error'] != 0) {
$this->errors[] = Tools::displayError('An error occurred during the file-upload process.');
} elseif (!empty($file_attachment['name']) && !in_array(Tools::strtolower(substr($file_attachment['name'], -4)), $extension) && !in_array(Tools::strtolower(substr($file_attachment['name'], -5)), $extension)) {
$this->errors[] = Tools::displayError('Bad file extension');
} else {
[...]

Toujours dans la fonction postProcess, il faut modifier la condition if (!count($this->errors)) par :

if (!count($this->errors)) {
$var_list = array(
'{order_name}' => '-',
'{attached_file}' => '-',
'{message}' => Tools::nl2br(stripslashes($message)),
'{email}' => $from,
'{product_name}' => '',
'{contact_telephone}' => $contact_telephone,
);

Remplissage des champs si erreur

Dans le cas où les champs obligatoires ne sont pas remplis à la validation du formulaire, alors il faut que les champs conservent les valeurs précédemment saisies. On va éditer le fichier ContactController.php encore une fois dans la fonction initContent(), repérer la condition $this->context->smarty->assign(array( et la modifier par :

public function initContent()
{
parent::initContent();
$this->assignOrderList();
$email = Tools::safeOutput(Tools::getValue('from',
((isset($this->context->cookie) && isset($this->context->cookie->email) && Validate::isEmail($this->context->cookie->email)) ? $this->context->cookie->email : '')));
$this->context->smarty->assign(array(
'errors' => $this->errors,
'email' => $email,
'fileupload' => Configuration::get('PS_CUSTOMER_SERVICE_FILE_UPLOAD'),
'max_upload_size' => (int)Tools::getMaxUploadSize()
));
if (($id_customer_thread = (int)Tools::getValue('id_customer_thread')) && $token = Tools::getValue('token')) {
$customer_thread = Db::getInstance()->getRow('
SELECT cm.*
FROM '._DB_PREFIX_.'customer_thread cm
WHERE cm.id_customer_thread = '.(int)$id_customer_thread.'
AND cm.id_shop = '.(int)$this->context->shop->id.'
AND token = \''.pSQL($token).'\'
');
$order = new Order((int)$customer_thread['id_order']);
if (Validate::isLoadedObject($order)) {
$customer_thread['reference'] = $order->getUniqReference();
}
$this->context->smarty->assign('customerThread', $customer_thread);
}
$this->context->smarty->assign(array(
'contacts' => Contact::getContacts($this->context->language->id),
'message' => html_entity_decode(Tools::getValue('message')),
'contact_telephone'=>Tools::getValue('contact_telephone')
));
$this->setTemplate(_PS_THEME_DIR_.'contact-form.tpl');
}

Modifier les e-mails du formulaire de contact de PrestaShop 1.6

Les e-mails dans PrestaShop sont sous deux formats : txt et html. Il faut modifier les deux formats aussi on modifie /mails/fr/contact.html et /mails/fr/contact.txt comme l’exemple.
Modification du template e-mail au format txt :

[{shop_url}]
Message de la part d'un client de {shop_name}
ADRESSE E-MAIL DU CLIENT : {email}
MESSAGE DU CLIENT : {message}
TELEPHONE : {contact_telephone}
{shop_name} [{shop_url}] propulsé par
PrestaShop(tm) [http://www.prestashop.com/]

Modification du template e-mail au format html :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Message de {shop_name}</title>
<style> @media only screen and (max-width: 300px){
body {
width:218px !important;
margin:auto !important;
}
.table {width:195px !important;margin:auto !important;}
.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto !important;display: block !important;}
span.title{font-size:20px !important;line-height: 23px !important}
span.subtitle{font-size: 14px !important;line-height: 18px !important;padding-top:10px !important;display:block !important;}
td.box p{font-size: 12px !important;font-weight: bold !important;}
.table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr {
display: block !important;
}
.table-recap{width: 200px!important;}
.table-recap tr td, .conf_body td{text-align:center !important;}
.address{display: block !important;margin-bottom: 10px !important;}
.space_address{display: none !important;}
}
@media only screen and (min-width: 301px) and (max-width: 500px) {
body {width:308px!important;margin:auto!important;}
.table {width:285px!important;margin:auto!important;}
.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}
.table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr {
display: block !important;
}
.table-recap{width: 295px !important;}
.table-recap tr td, .conf_body td{text-align:center !important;}
}
@media only screen and (min-width: 501px) and (max-width: 768px) {
body {width:478px!important;margin:auto!important;}
.table {width:450px!important;margin:auto!important;}
.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}
}
@media only screen and (max-device-width: 480px) {
body {width:308px!important;margin:auto!important;}
.table {width:285px;margin:auto!important;}
.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}
.table-recap{width: 295px!important;}
.table-recap tr td, .conf_body td{text-align:center!important;}
.address{display: block !important;margin-bottom: 10px !important;}
.space_address{display: none !important;}
}
</style>
</head>
<body style="-webkit-text-size-adjust:none;background-color:#fff;width:650px;font-family:Open-sans, sans-serif;color:#555454;font-size:13px;line-height:18px;margin:auto">
<table class="table table-mail" style="width:100%;margin-top:10px;-moz-box-shadow:0 0 5px #afafaf;-webkit-box-shadow:0 0 5px #afafaf;-o-box-shadow:0 0 5px #afafaf;box-shadow:0 0 5px #afafaf;filter:progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5)">
<tr>
<td class="space" style="width:20px;padding:7px 0"> </td>
<td align="center" style="padding:7px 0">
<table class="table" bgcolor="#ffffff" style="width:100%">
<tr>
<td align="center" class="logo" style="border-bottom:4px solid #333333;padding:7px 0">
<a title="{shop_name}" href="{shop_url}" style="color:#337ff1">
<img src="{shop_logo}" alt="{shop_name}" />
</a>
</td>
</tr>
<tr>
<td align="center" class="titleblock" style="padding:7px 0">
<font size="2" face="Open-sans, sans-serif" color="#555454">
<span class="title" style="font-weight:500;font-size:28px;text-transform:uppercase;line-height:33px">Message de la part d'un client de {shop_name}</span>
</font>
</td>
</tr>
<tr>
<td class="space_footer" style="padding:0!important"> </td>
</tr>
<tr>
<td class="box" style="border:1px solid #D6D4D4;background-color:#f8f8f8;padding:7px 0">
<table class="table" style="width:100%">
<tr>
<td width="10" style="padding:7px 0"> </td>
<td style="padding:7px 0">
<font size="2" face="Open-sans, sans-serif" color="#555454">
<span style="color:#777">
<span style="color:#333"><strong>Adresse e-mail du client : <a href="mailto:{email}" style="color:#337ff1">{email}</a></strong></span><br /><br />
<span style="color:#333"><strong>Message du client :</strong></span> {message}<br /><br />
<span style="color:#333"><strong>Téléphone :</strong></span> {contact_telephone}
</span>
</font>
</td>
<td width="10" style="padding:7px 0"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="space_footer" style="padding:0!important"> </td>
</tr>
<tr>
<td class="footer" style="border-top:4px solid #333333;padding:7px 0">
<span><a href="{shop_url}" style="color:#337ff1">{shop_name}</a> propulsé par <a href="http://www.prestashop.com/" style="color:#337ff1">PrestaShop™</a></span>
</td>
</tr>
</table>
</td>
<td class="space" style="width:20px;padding:7px 0"> </td>
</tr>
</table>
</body>
</html>

Appliquer les modifications du formulaire de contact

Pour appliquer les modifications appliquées au formulaire de contact, certaines actions sont nécessaires :

  • supprimer le fichier /cache/class_index.php
  • dans le back office de PrestaShop > préférences avancées > forcer la compilation
  • dans le back office de PrestaShop > préférences avancées > désactiver le cache
  • dans le back office de PrestaShop > préférences avancées > activer les surcharges

Voici les options avancées dans le back office :
form-prestashop-1.6-backoffice

Affichage des modifications du formulaire de contact

Vous êtes arrivés au bout de ce tutoriel ? Si oui, voici ce que vous devez retrouver dans votre page contact de PrestaShop :
form-prestashop-1.6-modified

Vous n’arrivez pas à réaliser ce tutoriel ? Je peux me charger de travail, contactez-moi pour un devis 🙂

Bonus : modifications du formulaire de contact de PrestaShop

Condition affichage si client connecté

Vous pouvez tout à fait conditionner l’affichage d’un champ à vos clients connectés. Pour cela utilisez la variable Smarty {if $logged}…{/if}.

Ajouter un captcha

Je vous invite à lire l’article Tuto gratuit : ajouter reCAPTCHA à PrestaShop pour ajouter simplement et sans frais un captcha efficace !
C’est tout pour aujourd’hui ! A bientôt 😉

4 commentaires sur “Tuto : Modifier le formulaire de contact sous PrestaShop 1.6

  1. Bonjour et merci pour ton tuto.
    j’ai effectué les modifications mais ma page contact est vide maintenaint 🙁
    j’ai certainement fait un erreur.
    je suppose que c’est ici:
    Test et contrôle des nouveaux champs
    Dans le fichier ContactController.php la fonction postProcess (c’est bien le fichier ContactController.php present dans le dossier /override/controllers/front/ ) qu’il faut modifier??
    ou bien /controllers/front/ContactController.php ??
    merci d’avance
    Luigi

    1. Bonjour Lupis,
      Attention à bien vider les caches déjà.
      Si page blanche il faut afficher les erreurs ; un article est disponible sur le blog pour cela 😉

  2. Bonjour,
    Je voudrais réaliser ce tuto mais j’utilise Prestashop 1.7 .. Malheureusement il n’y a pas les fonctions :
    public function setMedia()
    protected function assignOrderList()
    protected function getOrder()
    dans le controller : /controllers/front/ContactController.php
    Pouvez vous m’aider à adapter votre tuto pour la version 1.7 de Prestashop ?

    1. Bonjour Laura,
      C’est un sujet complexe car le fonctionnement n’est pas le même entre PrestaShop 1.6 et 1.7.
      Je note l’idée pour un futur tuto PrestaShop mais en attendant je vous conseille un module formulaire de contact déjà développé qui vous fera gagner pas mal de temps 😉

Laisser un commentaire

Consultez les autres articles