Le formulaire de contact est une des pierres angulaires d’une boutique en ligne. Il permet de recueillir des messages, de gérer les demandes clients, ou encore d’établir un premier lien de confiance. Cependant, PrestaShop propose par défaut un formulaire de contact standard, qui peut ne pas correspondre aux besoins spécifiques de votre activité.
Difficulté : Facile | Temps : 60 minutes | Coût : Gratuit
Réponse directe : comment personnaliser le formulaire
Pour personnaliser le formulaire de contact PrestaShop : rendez-vous dans Back-office → Vendre → Service clients → Contacts. Vous pouvez modifier les objets disponibles, ajouter des champs via override ou utiliser un module dédié. Ce guide couvre les 3 méthodes.
Pourquoi personnaliser le formulaire de contact dans PrestaShop ?
Chaque entreprise a ses particularités. Selon votre activité, il peut être essentiel de demander des informations spécifiques à vos clients pour mieux traiter leurs demandes :
- Collecter des détails techniques : Numéro de commande, produit concerné, ou type de demande
- Faciliter le tri des requêtes : Catégoriser les messages pour orienter automatiquement les demandes
- Améliorer l’expérience utilisateur : Ajouter un champ de commentaire ou des instructions précises pour guider vos clients
- Augmenter les conversions : Un formulaire clair et court réduit l’abandon
Avec un formulaire bien adapté, vous pouvez gagner du temps et offrir une meilleure expérience à vos utilisateurs.
Personnaliser le formulaire de contact PrestaShop (sans module)
Si vous ne voulez pas payer pour un module, vous pouvez personnaliser le formulaire natif gratuitement en modifiant les fichiers de votre thème.
Avant de modifier : sauvegardez tout
Étapes essentielles :
- Sauvegardez complètement votre boutique (fichiers + base de données)
- Créez une copie de votre thème (ou de PrestaShop en local)
- Testez les modifications avant de les mettre en live
Modifier les objets disponibles (méthode simple)
La méthode la plus simple sans coder :
- Allez dans Back-office → Vendre → Service clients → Contacts
- Vous voyez les “Objets disponibles” (ex: “Commande” = #123)
- Éditez ces objets pour mieux décrire les catégories de demandes
- Sauvegardez
Exemple :
- Au lieu de “Commande”, mettez “Problème de commande”
- Au lieu de “Produit”, mettez “Question sur un produit”
Ajouter des champs personnalisés via override (méthode avancée)
Pour ajouter des champs au-delà des objets existants, vous devez modifier les fichiers du thème.
1. Localisez le formulaire de contact
Le formulaire se trouve dans : /themes/votre_theme/templates/contact.tpl
2. Ajoutez un champ personnalisé
Insérez ce code HTML à l’endroit approprié dans le formulaire :
<div class="form-group">
<label for="custom_field">Numéro de commande (facultatif)</label>
<input type="text" id="custom_field" name="custom_field" placeholder="Entrez votre numéro de commande" class="form-control">
</div>3. Traitez le champ côté serveur
Modifiez également /controllers/front/ContactController.php pour traiter ce nouveau champ :
$custom_field = Tools::getValue('custom_field');
if (!empty($custom_field)) {
// Validez le champ si nécessaire
$message .= 'Numéro de commande : ' . pSQL($custom_field) . "\n";
}4. Testez votre formulaire
- Testez en front-office : le champ apparaît-il ?
- Envoyez un message : les données sont-elles bien reçues ?
- Vérifiez dans le back-office : le message apparaît-il avec votre champ personnalisé ?
Modifier les champs du formulaire de contact
Au-delà des objets, vous pouvez aussi modifier les champs standards (nom, email, message).
Les champs natifs de PrestaShop
Champs obligatoires par défaut :
- Email (validation mail)
- Sujet / Objet (texte court)
- Message (texte long)
- Sélection d’objet (Commande, Produit, etc.)
Ajouter la validation de champs
Vous pouvez rendre certains champs obligatoires ou facultatifs en modifiant le contrôleur :
if (!isset($_POST['custom_field']) || $_POST['custom_field'] === '') {
$this->errors[] = 'Le numéro de commande est obligatoire';
}Modifier le design du formulaire
Pour changer l’apparence, éditez le fichier contact.tpl et ajustez les classes CSS :
<form method="post" action="{$contact_form_url}" id="contact-form">
<!-- Champs avec classes Bootstrap 5 -->
<div class="mb-3">
<label for="email" class="form-label">Email *</label>
<input type="email" id="email" name="from" class="form-control" required>
</div>
</form>Les meilleurs modules de formulaire de contact PrestaShop
Si vous préférez une solution clé en main sans coder, les modules spécialisés offrent une meilleure flexibilité.
Modules recommandés
| Module | Prix | Fonctionnalités | Difficulté |
|---|---|---|---|
| Advanced Contact Form | €€ | Champs personnalisés avancés, validations, conditions | Facile |
| Custom Contact Form Fields | € | Ajouter/supprimer des champs rapidement | Très facile |
| Form Builder for PrestaShop | €€€ | Formulaires illimités, logique conditionnelle, webhooks | Moyenne |
| Contact Form Pro | € | Notifications custom, redirection, intégration CRM | Facile |
Natif vs Module : quand choisir quoi ?
Choisir le formulaire natif + override si :
- Vous ne voulez rien payer
- Vous avez quelques champs seulement à ajouter
- Vous êtes à l’aise avec un peu de code PHP/HTML
- Votre besoin est simple (5-6 champs max)
Choisir un module si :
- Vous voulez une interface visuelle (no-code)
- Vous avez besoin de nombreux champs personnalisés
- Vous voulez des validations avancées
- Vous manquez de temps ou de compétences techniques
- Vous avez besoin de notifications custom ou d’intégrations (Zapier, CRM, etc.)
Personnaliser la page contact PrestaShop 8 et 9
Les versions 8 et 9 de PrestaShop ont simplifié la gestion des formulaires avec une meilleure interface.
PrestaShop 8
Localisation des settings :
- Back-office → Vendre → Clients → Contacts
- Modification plus intuitive des objets
- Support Twig (plus flexible que Smarty)
PrestaShop 9
Améliorations :
- Interface plus moderne pour créer des champs
- Meilleure gestion de la validation côté navigateur
- Support natif des webhooks pour intégration externe
- Performance améliorée sur formulaires complexes
Étapes pour PrestaShop 8/9 :
- Back-office → Vendre → Clients → Contacts
- Éditez les “Catégories de contact” (anciennement “Objets”)
- Testez le formulaire en front-office
Différences clés par version
| Aspect | PrestaShop 1.7 | PrestaShop 8/9 |
|---|---|---|
| Interface | Classique | Moderne (Symfony) |
| Langage template | Smarty | Twig |
| Performance | Bonne | Excellente |
| Flexibilité champs | Basique | Avancée |
| Intégrations | Webhooks limités | Webhooks complets |
Bonnes pratiques pour un formulaire efficace
1. Évitez les formulaires trop longs
- Demandez uniquement les informations essentielles
- Les formulaires courts ont 5-10x plus de taux de complétion
- Groupez les champs logiquement
Champs essentiels :
- Email (pour répondre)
- Objet/Catégorie (pour orienter)
- Message (pour comprendre le problème)
2. Ajoutez des validations claires
<label for="phone">Téléphone (11 chiffres)</label>
<input type="tel" pattern="[0-9]{11}" required>Indicateurs visuels :
- Champs obligatoires marqués avec un
* - Messages d’erreur clairs
- Validation HTML5 native
3. Soyez conforme au RGPD
- Informez les utilisateurs de l’usage de leurs données
- Proposez une case à cocher “J’accepte la politique de confidentialité”
- Stockez les données de manière sécurisée
Exemple mention RGPD :
<div class="form-check">
<input class="form-check-input" type="checkbox" id="privacy" name="privacy" required>
<label class="form-check-label" for="privacy">
J'accepte la <a href="/politique-de-confidentialite/">politique de confidentialité</a>
</label>
</div>4. Testez sur mobile
- 50%+ du trafic est mobile
- Les formulaires doivent être fluides sur petit écran
- Testez les touches et les validations mobiles
Cas d’usage courants
Ajouter un champ “Numéro de commande”
Utile pour les demandes SAV. Les clients saisissent leur numéro et vous trouvez vite leur commande.
Ajouter un champ “Type de produit”
Pour les boutiques avec plusieurs catégories (mode, électronique, services). Orientez les messages directement au bon service.
Ajouter un champ “Budget”
Pour les prestataires de services (agence, conseil). Vous sauvez du temps en ignorant les demandes hors budget dès le départ.
Ajouter un champ “Priorité”
Laissez les clients signaler si c’est urgent. Traitez d’abord les demandes “Critique”.
Conclusion
Personnaliser le formulaire de contact dans PrestaShop est une solution simple pour améliorer la gestion des demandes et l’expérience client. Que vous choisissiez une modification manuelle gratuite ou un module dédié, ces ajustements vous permettront d’optimiser votre service client en l’adaptant aux besoins spécifiques de votre entreprise.
N’attendez plus, adaptez votre formulaire et facilitez vos échanges avec vos clients dès aujourd’hui !
À lire aussi :