Section formulaire de contact avec champs personnalisables, image latérale optionnelle et layout flexible pour créer une page de contact professionnelle.
Pourquoi utiliser la section Contact Form
Un formulaire de contact bien conçu est un élément essentiel de toute boutique en ligne. Il rassure les visiteurs en leur montrant qu'une équipe réelle est disponible pour répondre à leurs questions, ce qui renforce la confiance et réduit les freins à l'achat. Les études montrent que la présence d'un moyen de contact visible peut augmenter le taux de conversion de 5 à 10 %.
La section Contact Form de Scale Theme va au-delà d'un simple formulaire. Elle propose un layout flexible avec la possibilité d'ajouter une image latérale, un système de champs personnalisables (nom, email, téléphone, numéro de commande, message), et des blocs de contenu (titre, texte, Liquid personnalisé) pour accompagner le formulaire d'informations utiles.
Le formulaire utilise le système natif d'envoi de messages de Shopify. Aucune configuration technique n'est nécessaire : les messages sont automatiquement envoyés à l'adresse email configurée dans Paramètres > Général > Email du magasin. La protection anti-spam est intégrée nativement par Shopify.
Guide de configuration
Ajouter la section
- Ouvrez l'éditeur de thème Shopify
- Naviguez vers la page où vous souhaitez ajouter le formulaire (généralement la page Contact)
- Cliquez sur Ajouter une section
- Recherchez Contact Form dans la catégorie "Engagement"
- La section apparaît avec un titre et un texte d'introduction par défaut
Configurer les champs du formulaire
Le formulaire dispose de plusieurs champs que vous pouvez activer ou désactiver :
| Champ | Obligatoire | Activable | Personnalisable |
|---|---|---|---|
| Nom | Non | Toujours visible | Label personnalisable |
| Oui | Toujours visible | Label personnalisable | |
| Téléphone | Non | Via checkbox | Label personnalisable |
| Numéro de commande | Non | Via champ label | Label personnalisable |
| Message | Oui | Toujours visible | Label personnalisable |
Pour personnaliser le label d'un champ, renseignez le champ correspondant dans les réglages. Si le champ est laissé vide, le label par défaut (traduit) est utilisé.
Configurer l'image latérale
Pour ajouter une image à côté du formulaire :
- Dans les réglages de la section, activez Enable image
- Sélectionnez une image via le sélecteur d'image
- Choisissez la position de l'image (gauche ou droite)
- Ajustez la largeur de l'image sur desktop (30% à 70%)
- Configurez le ratio et le border radius selon vos besoins
Paramètres de la section
Champs du formulaire
| Paramètre | Type | Description | Défaut |
|---|---|---|---|
| Label nom | Texte | Label personnalisé du champ nom | Traduction par défaut |
| Label email | Texte | Label personnalisé du champ email | Traduction par défaut |
| Show phone field | Checkbox | Afficher le champ téléphone | Oui |
| Label téléphone | Texte | Label personnalisé du champ téléphone (visible si téléphone activé) | Traduction par défaut |
| Order number | Texte | Label du champ numéro de commande (laisser vide pour masquer) | - |
| Label message | Texte | Label personnalisé du champ message | Traduction par défaut |
Alignement du contenu
| Paramètre | Type | Description | Options | Défaut |
|---|---|---|---|---|
| Desktop content alignment | Sélecteur | Alignement du contenu sur desktop | Gauche, Centre, Droite | Centre |
| Mobile content alignment | Sélecteur | Alignement du contenu sur mobile | Gauche, Centre, Droite | Centre |
Image
| Paramètre | Type | Description | Défaut | |
|---|---|---|---|---|
| Enable image | Checkbox | Activer l'image latérale | Non | |
| Mobile image display | Sélecteur | Comportement sur mobile : En premier, En dernier, Masquée | Masquée | |
| Image | Image picker | Image principale (desktop) | - | |
| Mobile image | Image picker | Image alternative pour mobile (optionnelle) | - | |
| Image position | Sélecteur | Côté de l'image : Gauche ou Droite | Droite | |
| Image width desktop | Range | Largeur de l'image sur desktop | 30% - 70% (pas de 5%) | 50% |
| Image ratio | Sélecteur | Ratio de l'image | Adapt, Carré, Portrait, Paysage, Hauteur du formulaire | Adapt |
| Image height ratio | Sélecteur | Hauteur relative de l'image (mode Hauteur formulaire) | 100%, 75%, 50%, 33%, 25% | 100% |
| Border radius | Range | Arrondi des coins de l'image | 0 - 50px (pas de 2) | 0 |
Bouton d'envoi
| Paramètre | Type | Description | Défaut |
|---|---|---|---|
| Button text | Texte | Texte du bouton d'envoi | "Send" (traduction) |
| Button style | Sélecteur | Style du bouton : Primary, Secondary, Tertiary | Secondary |
Réglages globaux
La section hérite des réglages globaux standard de Scale Theme :
| Paramètre | Description |
|---|---|
| Container width | Largeur du conteneur : Narrow, Normal, Full Padded, Full |
| Color palette | Palette de couleurs de la section |
| Padding | Marges internes (top/bottom) pour desktop et mobile |
| Visibility | Masquer sur desktop ou mobile |
| Separators | Séparateurs SVG en haut et en bas de la section |
| Animations | Animation d'entrée pour le contenu et l'image |
| Section ID | Identifiant personnalisé pour les ancres |
Blocs disponibles
La section accepte jusqu'à 10 blocs pour enrichir le contenu autour du formulaire.
Bloc Heading
Affiche un titre principal au-dessus du formulaire. Ce bloc utilise le composant standard block-heading et offre des options avancées :
| Paramètre | Description |
|---|---|
| Sous-titre | Texte court au-dessus du titre (ex: "Contactez-nous") |
| Titre | Titre principal avec support richtext (gras, italique) |
| Style du texte gras | Default / Couleur / Surbrillance |
| Niveau de titre | H1, H2, H3, H4 (pour le SEO) |
| Taille du titre | 50% - 200% |
| Séparateur | Ligne décorative sous le titre |
Bloc Text
Affiche un paragraphe de texte sous le titre. Utile pour donner des instructions ou des informations au visiteur avant qu'il remplisse le formulaire.
| Paramètre | Description |
|---|---|
| Description | Texte riche (paragraphe) avec formatage |
| Taille du texte | Ajustement de la taille relative |
Bloc App
Permet d'intégrer un bloc d'application Shopify directement dans la section. Utile pour ajouter un widget de chat, un formulaire d'application tierce, ou tout autre élément fourni par une app installée.
Bloc Custom Liquid
Permet d'insérer du code Liquid personnalisé dans la section. Utilisez ce bloc pour :
- Afficher des informations de contact dynamiques
- Intégrer un widget externe via du HTML
- Ajouter des éléments visuels personnalisés
Ratios d'image disponibles
Quand l'image latérale est activée, vous disposez de 5 ratios différents :
| Ratio | Comportement | Cas d'usage |
|---|---|---|
| Adapt | L'image conserve ses proportions naturelles | Photo d'équipe au format original |
| Square (1:1) | Recadrage carré | Photo de profil, logo |
| Portrait (3:4) | Format portrait | Photo d'une personne |
| Landscape (4:3) | Format paysage | Photo de bureau, locaux |
| Form height | L'image s'adapte à la hauteur du formulaire | Effet visuel immersif, colonnes alignées |
Mode "Form height"
Le mode Hauteur du formulaire est unique à la section Contact Form. L'image prend la même hauteur que le formulaire, créant un alignement visuel parfait entre les deux colonnes. Vous pouvez ensuite ajuster le ratio de hauteur (100%, 75%, 50%, 33%, 25%) pour contrôler la portion visible de l'image.
Gestion mobile de l'image
Sur mobile, le layout passe automatiquement en une seule colonne. Vous contrôlez le comportement de l'image via le paramètre Mobile image display :
| Option | Comportement |
|---|---|
| En premier (First) | L'image s'affiche au-dessus du formulaire |
| En dernier (Last) | L'image s'affiche sous le formulaire |
| Masquée (Hidden) | L'image est masquée sur mobile |
Image mobile alternative
Vous pouvez définir une image mobile spécifique différente de l'image desktop. C'est utile quand votre image desktop est en format paysage et ne rend pas bien en format portrait sur mobile.
Exemples de configuration
Page Contact classique
La configuration la plus courante pour une page de contact professionnelle :
- Container : Normal
- Alignement : Centre (desktop et mobile)
- Champs : Nom + Email + Téléphone + Message (tous activés)
- Image : Désactivée
- Bloc Heading : Sous-titre "Get in touch", titre "Contactez-nous"
- Bloc Text : "Nous répondons sous 24h à toutes vos demandes."
- Bouton : "Envoyer" (style Primary)
Formulaire avec image d'équipe
Pour humaniser votre page de contact avec une photo de votre équipe :
- Container : Normal
- Image : Activée, position gauche, largeur 45%
- Image ratio : Form height (100%)
- Border radius : 12px
- Mobile image : Masquée
- Champs : Nom + Email + Message (minimaliste)
- Bloc Heading : "Une question ?"
- Bloc Text : "Notre équipe est là pour vous aider."
- Bouton : "Envoyer le message" (style Secondary)
Demande de devis B2B
Pour les boutiques qui proposent des devis personnalisés :
- Container : Narrow
- Alignement : Centre
- Champs : Nom + Email + Téléphone + Numéro de commande ("Référence projet") + Message
- Image : Désactivée
- Bloc Heading : Titre "Demande de devis"
- Bloc Text : "Remplissez le formulaire ci-dessous et nous vous recontacterons sous 48h avec un devis personnalisé."
- Bouton : "Demander un devis" (style Primary)
Support après-vente
Pour centraliser les demandes de support client :
- Container : Normal
- Champs : Nom + Email + Téléphone + Numéro de commande ("N de commande") + Message
- Image : Activée, position droite, largeur 35%
- Image ratio : Adapt
- Bloc Heading : "Besoin d'aide ?"
- Bloc Text : "Notre équipe support est disponible du lundi au vendredi, 9h-18h."
- Bloc Custom Liquid : Informations de contact (adresse, téléphone, email)
- Bouton : "Envoyer ma demande" (style Primary)
Formulaire minimaliste
Pour une intégration discrète dans une page existante :
- Container : Narrow
- Alignement : Gauche
- Champs : Email + Message uniquement (téléphone désactivé, pas de numéro de commande)
- Image : Désactivée
- Bloc Heading : "Un retour ? Une suggestion ?"
- Pas de bloc Text (minimalisme)
- Bouton : "Envoyer" (style Tertiary)
Animations
La section supporte deux types d'animation configurés séparément :
| Animation | Cible | Utilisation |
|---|---|---|
| Content animation | Blocs de contenu et formulaire | Apparition progressive du formulaire |
| Image animation | Image latérale | Apparition de l'image (fade, slide, zoom) |
Les animations sont désactivées automatiquement quand le visiteur a activé prefers-reduced-motion dans son navigateur, conformément aux standards d'accessibilité.
Confirmation d'envoi et erreurs
Message de succès
Après l'envoi réussi du formulaire, un message de confirmation s'affiche avec une icône de succès. Le texte utilise la traduction templates.contact.form.post_success que vous pouvez personnaliser dans les fichiers de traduction de votre thème.
Gestion des erreurs
Si le formulaire contient des erreurs (email invalide, champ obligatoire manquant), un message d'erreur s'affiche en haut du formulaire avec un lien vers le champ concerné. Le champ en erreur est visuellement mis en avant avec les attributs aria-invalid et aria-describedby pour l'accessibilité.
Protection anti-spam
Le formulaire inclut automatiquement la protection anti-spam native de Shopify. Aucun reCAPTCHA externe n'est nécessaire. Cette protection est transparente pour le visiteur et ne nécessite aucune configuration.
Accessibilité
La section Contact Form respecte les bonnes pratiques d'accessibilité :
- Chaque champ possède un label associé via l'attribut
for - Le champ email obligatoire porte l'attribut
aria-required="true" - Les erreurs de validation utilisent
aria-invalidetaria-describedby - Les messages d'erreur et de succès utilisent
role="alert"ettabindex="-1"avecautofocuspour une annonce immédiate aux lecteurs d'écran - L'icône d'erreur est accessible via un texte caché
visually-hidden - La navigation au clavier fonctionne pour tous les champs et le bouton d'envoi
Pré-remplissage des champs
Le formulaire pré-remplit automatiquement certains champs pour les clients connectés :
| Champ | Source de pré-remplissage |
|---|---|
| Nom | customer.name (nom du compte client) |
customer.email (email du compte client) | |
| Téléphone | customer.phone (téléphone du compte client) |
Si le formulaire a été soumis avec des erreurs, les valeurs précédemment saisies (form.name, form.email, form.phone, form.body) sont restaurées pour éviter au visiteur de tout retaper.
Bonnes pratiques
- Utilisez le champ numéro de commande pour le support après-vente. Cela permet de catégoriser et traiter les demandes plus rapidement.
- Rédigez un texte d'introduction clair et rassurant. Mentionnez le délai de réponse ("Nous répondons sous 24h") pour fixer les attentes.
- Adaptez le style du bouton au contexte : Primary pour les pages dédiées au contact, Secondary ou Tertiary pour les formulaires intégrés dans d'autres pages.
- Masquez l'image sur mobile sauf si elle apporte une information essentielle (plan d'accès, horaires).
- Vérifiez l'email de réception : les messages sont envoyés à l'adresse configurée dans Shopify > Paramètres > Général. Assurez-vous que cette adresse est consultée quotidiennement.
- Testez le formulaire vous-même : envoyez un message test pour vérifier la réception et le formatage des données.
- Gardez le formulaire simple : n'activez que les champs réellement utiles. Chaque champ supplémentaire réduit le taux de complétion du formulaire.
- Utilisez le bloc Custom Liquid pour ajouter des informations complémentaires (horaires, adresse, liens vers la FAQ) sans surcharger le formulaire lui-même.
Prochaines étapes
- **Newsletter** — Collectez les emails de vos visiteurs avec une section newsletter dédiée
- **Contenu dépliable** — Créez une FAQ pour répondre aux questions courantes et réduire les messages
- **Rich Text** — Ajoutez du contenu texte riche pour compléter votre page de contact