Formulaire de contact

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur le bloc d’informations de contact
3. Documentation Company XYZ sur le bloc de formulaire de contact
4. Documentation Company XYZ sur les paramètres d’en-tête
5. Documentation Company XYZ sur les paramètres d’arrière-plan de section
6. Documentation Company XYZ sur les paramètres d’espacement de section
7. Documentation Company XYZ sur les paramètres de séparateur
8. Documentation Company XYZ sur les paramètres de visibilité
9. Documentation Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo Shopify Academy : Personnaliser votre boutique

Vidéo Shopify Academy : Personnaliser votre boutique

Utilisez cette section pour recueillir des messages et afficher les coordonnées dont les personnes peuvent avoir besoin avant de vous contacter. Vous pouvez inclure un formulaire, un panneau de coordonnées, ou les deux, puis réorganiser les blocs pour modifier l’ordre d’affichage du contenu.

Configuration de base de la section

Cette section est plus efficace lorsque vous définissez d’abord l’objectif principal de la page. Si vous souhaitez que les visiteurs envoient rapidement un message, placez d’abord le bloc de formulaire. Si les visiteurs ont généralement besoin d’un numéro de téléphone, d’une adresse e-mail, d’une adresse ou d’horaires avant de vous contacter, placez d’abord le bloc d’informations de contact.

Pour un aperçu plus large du fonctionnement des blocs dans l’éditeur, consultez documentation Shopify sur les sections et les blocs

1. Utilisez les deux blocs pour une page de contact complète.
2. Utilisez uniquement le bloc de formulaire pour une mise en page plus simple et orientée action.
3. Utilisez le bloc d’informations de contact pour compléter le formulaire avec des options de contact directes.

Réorganiser les blocs modifie la mise en page et le flux de lecture. Après avoir déplacé des blocs, prévisualisez la page sur ordinateur et sur mobile pour vous assurer que la méthode de contact la plus importante apparaît en premier.

Paramètres de couleur

Ces paramètres remplacent les couleurs par défaut du thème pour l’icône de la section, le texte principal et le texte du sous-titre. Ils sont particulièrement utiles lorsque vous souhaitez faire ressortir la zone de contact ou lorsque vous la placez sur un arrière-plan personnalisé.

Laisser les valeurs de couleur vides ou proches de la valeur par défaut conserve généralement le style de repli du thème. Des choix plus explicites de couleur, de dégradé ou de média rendent la section plus indépendante, alors vérifiez que toute la zone de contact fonctionne toujours comme un ensemble cohérent.

Si vous ajoutez également des arrière-plans stylisés aux blocs, veillez à ce que les couleurs de la section et des blocs fonctionnent ensemble plutôt que de traiter chaque zone séparément. Un contraste marqué est important ici, car les visiteurs doivent parcourir les informations et remplir le formulaire sans effort.

Types de blocs pris en charge

1. Informations de contact
2. Formulaire de contact

Informations de contact

Utilisez ce bloc pour afficher des détails pratiques à côté du formulaire, comme le téléphone, l’e-mail, l’adresse, les horaires d’ouverture et des icônes de réseaux sociaux. Il comprend également sa propre zone de titre facultative, ce qui vous permet d’étiqueter clairement ce contenu lorsque la page contient les deux blocs.

1. Gardez des détails courts et faciles à parcourir.
2. Affichez les icônes sociales uniquement si ces profils sont actifs et entretenus.
3. Utilisez les paramètres d’arrière-plan du bloc si vous souhaitez que les coordonnées ressemblent à un panneau distinct.

En savoir plus dans documentation Company XYZ sur le bloc Informations de contact.

Formulaire de contact

Utilisez ce bloc pour afficher le formulaire de message lui-même. Vous pouvez styliser le bouton d’envoi, le définir en pleine largeur sur mobile et, éventuellement, ajouter une petite zone de titre à l’intérieur du bloc.

1. Ajoutez un titre ou sous-titre court si les visiteurs ont besoin d’indications sur l’usage de ce formulaire.
2. Utilisez un bouton mobile en pleine largeur lorsque vous souhaitez que le formulaire soit plus facile à remplir sur les petits écrans.
3. Gardez la zone du formulaire visuellement simple si le bloc d’informations de contact utilise déjà un traitement d’arrière-plan plus marqué.
4. Vérifiez les états vides, de succès et d’erreur après la publication afin que les messages de confirmation et de validation restent faciles à lire.

En savoir plus dans documentation Company XYZ sur le bloc Formulaire de contact.

Paramètres standard de section

Paramètres d’en-tête

Paramètres d’en-tête contrôlent le contenu d’introduction au-dessus des blocs, notamment l’alignement, l’icône, la légende, le titre, le texte d’accompagnement et un bouton facultatif. Utilisez cette zone pour présenter la page, ajouter de la structure ou inclure une action secondaire comme des itinéraires, une réservation ou du contenu d’aide.

Choisissez soigneusement le type de titre pour que la page conserve une hiérarchie de contenu claire. Si vous ajoutez le bouton facultatif, vérifiez sa position sur ordinateur et sur mobile afin qu’il n’interrompe pas le flux principal de contact.

Paramètres d’arrière-plan de section

Paramètres d’arrière-plan de section vous permettent d’ajouter une couleur, un dégradé, une image ou une vidéo derrière l’ensemble de la section. Cela fonctionne bien lorsque vous souhaitez que la zone de contact soit plus visible ou visuellement séparée du contenu environnant.

Le média d’arrière-plan peut affecter la lisibilité et l’équilibre de la mise en page, surtout lorsque les deux blocs sont affichés. Si vous utilisez une image ou une vidéo, vérifiez ensemble les couleurs de superposition et de texte pour que le contenu reste clair.

Paramètres d’espacement

Paramètres d’espacement contrôlent l’espace au-dessus et en dessous de la section. Utilisez-les pour donner plus d’air à la zone de contact ou pour resserrer la mise en page si la page contient déjà plusieurs sections.

Définissez intentionnellement l’espacement sur ordinateur et sur mobile. Les mises en page de contact ont souvent besoin d’un peu plus d’espace sur les petits écrans pour ne pas paraître trop serrées.

Paramètres de séparateur

Paramètres de séparateur ajoutent une ligne facultative en haut ou en bas de la section. C’est une manière simple de séparer la zone de contact du contenu voisin sans ajouter un arrière-plan complet.

Utilisez une couleur de séparateur personnalisée uniquement lorsque le style de bordure par défaut est trop discret. Dans de nombreuses mises en page, un séparateur léger suffit.

Paramètres de visibilité

Paramètres de visibilité contrôlent si la section apparaît sur ordinateur, sur mobile, ou sur les deux. C’est utile lorsque vous souhaitez une expérience de contact différente sur les petits écrans.

Masquez la section sur un seul appareil uniquement si les visiteurs disposent toujours d’un moyen clair de vous contacter sur celui-ci. Évitez de créer une mise en page où la méthode de contact principale disparaît de façon inattendue.

Paramètres de largeur

Paramètres de largeur contrôlent la largeur du contenu à l’intérieur de la section et la largeur du conteneur de la section lui-même. Utilisez-les pour rendre le formulaire plus facile à lire ou pour laisser l’arrière-plan s’étendre davantage que le contenu.

La largeur du contenu a généralement le plus grand impact sur le confort et la lisibilité. Vérifiez les modifications de largeur sur la page en direct ainsi que dans l’éditeur, car la vue de l’éditeur peut donner l’impression que les différences de mise en page sont plus faibles qu’elles ne le sont en réalité.

Notes d’utilisation

1. Mettez l’action principale en premier. Placez le formulaire en premier lorsque les demandes rapides sont les plus importantes, et placez d’abord les coordonnées lorsque les visiteurs ont généralement besoin d’informations de référence avant d’envoyer un message.
2. Gardez les coordonnées à jour. Vérifiez régulièrement les numéros de téléphone, les adresses e-mail, le contenu de l’adresse, les horaires d’ouverture et les liens sociaux afin que la section reste fiable.
3. Préservez la lisibilité. Lorsque vous utilisez des arrière-plans personnalisés, des superpositions ou des remplacements de couleur, assurez-vous que le texte et le contenu du formulaire restent faciles à lire d’un coup d’œil.
4. Optimisez la lecture sur mobile. Utilisez la largeur du bouton mobile, l’ordre des blocs et les paramètres de visibilité pour que la section reste facile à utiliser sur les petits écrans.
5. Utilisez la largeur avec retenue. Des largeurs de contenu modérées rendent généralement les formulaires de contact et les coordonnées plus faciles à parcourir que des mises en page très larges.
6. Vérifiez les deux configurations de viewport. Si vous utilisez différents médias ou choix de mise en page sur ordinateur et sur mobile, confirmez que le recadrage, le comportement de repli et la lisibilité du texte fonctionnent toujours bien sur chaque appareil.