{"id":1248,"date":"2016-01-17T13:52:05","date_gmt":"2016-01-17T11:52:05","guid":{"rendered":"http:\/\/www.h-hennes.fr\/blog\/?p=1248"},"modified":"2018-11-22T18:14:52","modified_gmt":"2018-11-22T16:14:52","slug":"prestashop-ajouter-des-champs-au-formulaire-de-contact","status":"publish","type":"post","link":"https:\/\/www.h-hennes.fr\/blog\/2016\/01\/17\/prestashop-ajouter-des-champs-au-formulaire-de-contact\/","title":{"rendered":"Prestashop : Ajouter des champs au formulaire de contact"},"content":{"rendered":"<p>C&rsquo;est une demande assez r\u00e9guli\u00e8re , comment ajouter facilement des nouveaux champs sur le formulaire de contact prestashop ?<br \/>\nAvec le code de base il n&rsquo;est pas \u00e9vident de rajouter des champs car il n&rsquo;existe aucun hook particulier qui permets d&rsquo;utiliser un module sur cette page.<\/p>\n<p>J&rsquo;ai donc r\u00e9alis\u00e9 un nouveau module qui va permettre de rajouter des \u00e9l\u00e9ments de mani\u00e8re plus simple.<br \/>\nCes nouveaux champs seront ensuite envoy\u00e9s dans l&#8217;email r\u00e9capitulatif au marchand.<br \/>\n( C&rsquo;est une version basique de preuve de concept qui peut encore grandement \u00e9voluer \ud83d\ude42 , test\u00e9 uniquement sur la derni\u00e8re version 1.6.1.4)<\/p>\n<p>Vous pouvez le t\u00e9l\u00e9charger depuis github : <a href=\"https:\/\/github.com\/nenes25\/prestashop_contactformfields\">https:\/\/github.com\/nenes25\/prestashop_contactformfields<\/a><\/p>\n<p><strong>Cependant il est pour l&rsquo;instant n\u00e9cessaire de comprendre son fonctionnement, et d&rsquo;\u00e9diter du code pour pouvoir ajouter les nouveaux champs.<\/strong><\/p>\n<p><strong>Avant d&rsquo;installer le module<\/strong> , il faut \u00e9diter le fichier <em>contact-form.tpl<\/em> de votre th\u00e8me.<br \/>\nRajouter le code suivant \u00e0 l&rsquo;endroit ou vous souhaitez que les nouveaux champs apparaissent<\/p>\n<pre lang=\"html\" escaped=\"true\">{* Nouveaux champs pour le formulaire de contact : ce code cr\u00e9\u00e9 un nouveau hook pour les modules *}\r\n{hook h='contactFormAdditionnalFields'}\r\n<\/pre>\n<p>Vous pouvez \u00e0 pr\u00e9sent installer le module et sur la page du formulaire de contact vous devez avoir le visuel suivant :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1254\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2016\/01\/contact-form-fields.jpg\" alt=\"Nouveaux champs\" width=\"397\" height=\"500\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2016\/01\/contact-form-fields.jpg 397w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2016\/01\/contact-form-fields-238x300.jpg 238w\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" \/><\/p>\n<p><strong>Ajout visuel des nouveaux champs<\/strong><\/p>\n<p>Le visuel et les noms des nouveaux champs sont \u00e9ditables dans le fichier<\/p>\n<p>contactformfields\/views\/templates\/hook\/hookContactFormAdditionnalFields.tpl<\/p>\n<pre lang=\"html\" escaped=\"true\">&lt;div class=\"contactformfields\"&gt;\r\n&lt;h3&gt;{l s='Additionnal fields' mod='contactformfields'}&lt;\/h3&gt;\r\n&lt;div class=\"form-group\"&gt;\r\n&lt;label&gt;{l s='Additionnal field 1' mod='contactformfields'}&lt;\/label&gt;\r\n&lt;input type=\"text\" name=\"additionnal_info1\" data-validate=\"is-required\" class=\"form-control\"&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"form-group\"&gt;\r\n&lt;label&gt;{l s='Additionnal field 2' mod='contactformfields'}&lt;\/label&gt;\r\n&lt;input type=\"text\" name=\"additionnal_info2\" data-validate=\"is-required\" class=\"form-control\"&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Vous pouvez ici rajouter tous les nouveaux champs que vous souhaitez.<br \/>\nCependant les ins\u00e9rer ici ne permettra pas encore de les r\u00e9cup\u00e9rer.<\/p>\n<p><strong>Traitement des nouveaux champs<\/strong><\/p>\n<p>Le traitement des nouveaux champs est r\u00e9alis\u00e9 en surchargeant le controller <em>ContactController.php<\/em> via le fichier contactformfields\/override\/controllers\/front\/ContactController.php<\/p>\n<p>Si votre champ doit \u00eatre obligatoire, vous pouvez adapter le code comme sur les lignes suivantes :<\/p>\n<pre lang=\"php\" escaped=\"true\">\/\/Rajouter ici les v\u00e9rifications php des nouveaux champs requis\r\nelseif ( !Tools::getValue('additionnal_info1')) {\r\n$this-&gt;errors[] = Tools::displayError('Field additionnal_info1 cannot be blank');\r\n}\r\n\/\/Fin du traitement des messages\r\n<\/pre>\n<p>( R\u00e9initialiser le module une fois les changements effectu\u00e9s pour que l&rsquo;override soit mis \u00e0 jour )<\/p>\n<p><strong>Ajout des variables dans l&#8217;email<\/strong><\/p>\n<p>Afin de pouvoir afficher les nouvelles variables, \u00e9diter les mod\u00e8les email : <em>contact.html<\/em> et <em>contact.txt<\/em> de votre site.<br \/>\n( mails\/fr\/contact.html par exemple )\u00a0 et rajoutez le code suivant la ou vous souhaitez afficher les informations<\/p>\n<pre lang=\"html\" escaped=\"true\">{contact_additionnal_fields}\r\n<\/pre>\n<p>Pour l&rsquo;ajout des variables dans l&#8217;email j&rsquo;ai mis en place un nouveau hook<\/p>\n<pre lang=\"php\" escaped=\"true\">\/\/On cr\u00e9e un hook personnalis\u00e9 pour ajouter les nouvelles informations \u00e0 l'email\r\n\/\/Le hook passe la reference de la variable\r\nHookCore::exec('actionAddContactFormFieldsToEmail',array('var_list' =&gt; &amp;$var_list));\r\n<\/pre>\n<p>cela permets de g\u00e9rer ces param\u00e8tres directement dans le module dans le fichier contactformfields\/contactformfields.php dans la fonction <em>hookActionAddContactFormFieldsToEmail<\/em><\/p>\n<pre lang=\"php\" escaped=\"true\">\/**\r\n* Ajout des donn\u00e9es \u00e0 l'email\r\n* @param array $params[var_list] =&gt; pass\u00e9 par r\u00e9f\u00e9rence\r\n*\/\r\npublic function hookActionAddContactFormFieldsToEmail($params) {\r\n\r\n\/\/On mets en forme le contenu qu'on veut rajouter dans l'email\r\n$emailContent = '&lt;span&gt;Additionnal Email fields &lt;br \/&gt;';\r\n\r\nif ( Tools::getValue('additionnal_info1') )\r\n$emailContent.= 'Additionnal Field 1 : '.Tools::getValue('additionnal_info1').'&lt;br \/&gt;';\r\nif ( Tools::getValue('additionnal_info1') )\r\n$emailContent.= 'Additionnal Field 1 : '.Tools::getValue('additionnal_info1');\r\n\r\n\/\/G\u00e9rer ici vos champs de la m\u00eame mani\u00e8re\r\n\r\n$emailContent .= '&lt;\/span&gt;';\r\n\r\n\/\/On le rajoute dans une variable\r\n$params['var_list']['{contact_additionnal_fields}'] = $emailContent;\r\n}\r\n<\/pre>\n<p>Ces donn\u00e9es seront ensuite bien affich\u00e9es dans le formulaire r\u00e9capitulatif comme vous pouvez le voir sur la capture suivante :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1255\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2016\/01\/fields-email.jpg\" alt=\"Champs dans email\" width=\"600\" height=\"325\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2016\/01\/fields-email.jpg 600w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2016\/01\/fields-email-300x163.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Nous en avons fini avec les explications.<br \/>\nSi vous avez compris le principe il vous est donc possible de rajouter ( plus) facilement des nouveaux champs dans votre formulaire de contact ! \ud83d\ude42<\/p>\n<p>Le module sera sans doute amen\u00e9 \u00e0 \u00e9voluer vers plus d&rsquo;automatisation si il y&rsquo;a un int\u00e9r\u00eat \ud83d\ude42<br \/>\nComme d&rsquo;hab, vous pouvez \u00e9galement apporter vos contributions directement sur github.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>C&rsquo;est une demande assez r\u00e9guli\u00e8re , comment ajouter facilement des nouveaux champs sur le formulaire de contact prestashop ? Avec le code de base il n&rsquo;est pas \u00e9vident de rajouter des champs car il n&rsquo;existe aucun hook particulier qui permets d&rsquo;utiliser un module sur cette page. J&rsquo;ai donc r\u00e9alis\u00e9 un nouveau module qui va permettre [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[245],"tags":[415,416,104],"class_list":["post-1248","post","type-post","status-publish","format-standard","hentry","category-prestashop-2","tag-formulaire-contact","tag-nouveaux-champs","tag-prestashop","prestashop-1-5","prestashop-1-6","prestashop-1-7-7","prestashop-1-7-8","prestashop-8-0","prestashop-8-1"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/1248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/comments?post=1248"}],"version-history":[{"count":6,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/1248\/revisions"}],"predecessor-version":[{"id":1256,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/1248\/revisions\/1256"}],"wp:attachment":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/media?parent=1248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/categories?post=1248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/tags?post=1248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}