Formulaire de contact

Liens en vedette

1. Documentation de Company XYZ sur les paramètres d’en-tête
2. Documentation de Company XYZ sur les paramètres d’arrière-plan de section
3. Documentation de Company XYZ sur les paramètres de couleurs
4. Documentation de Company XYZ sur les paramètres de visibilité
5. Documentation Shopify sur les sections et les blocs

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez ce bloc pour collecter les messages des clients dans une mise en page propre et à l’image de votre marque. Vous pouvez présenter le formulaire avec un contenu d’en-tête facultatif, ajuster le style du bouton d’envoi et affiner l’affichage du bloc sur ordinateur et sur mobile. Pour un aperçu plus large du fonctionnement des blocs dans l’éditeur de thème, consultez la documentation Shopify sur les sections et les blocs

Paramètres de base

Les paramètres de base définissent l’appel à l’action principal du formulaire. Commencez ici si vous voulez que le bloc soit plus visible ou plus simple à utiliser sur les petits écrans.

1. Choisissez un style de bouton qui convient à la page. Les styles pleins fonctionnent généralement mieux lorsque l’envoi d’un message est l’action principale, tandis que les styles simples donnent une impression plus légère lorsque le formulaire se trouve à côté d’un autre contenu.
2. Activez un bouton mobile pleine largeur lorsque l’utilisation sur téléphone est importante. Cela rend l’action d’envoi plus facile à repérer et à toucher dans des mises en page plus serrées.

Astuce

Si ce bloc est l’objectif principal de la page, utilisez un style de bouton plus marqué et l’option mobile pleine largeur pour rendre la finalisation plus simple.

Paramètres d’en-tête

Les paramètres d’en-tête vous aident à expliquer l’objectif du formulaire et donnent au bloc une structure plus marquée. Ils sont facultatifs, mais ils peuvent rendre la page plus claire et plus facile à parcourir. Consultez les paramètres d’en-tête pour le modèle d’en-tête partagé.

1. Ajoutez un titre et un sous-titre pour indiquer aux visiteurs à quoi sert le formulaire, sur quoi ils peuvent poser des questions ou à quelle réponse ils doivent s’attendre.
2. Utilisez la légende et l’icône avec soin si vous souhaitez ajouter un peu plus de personnalité ou d’emphase. Dans des mises en page plus formelles, un en-tête simple en texte seul est souvent le choix le plus propre.
3. Définissez le type de titre pour qu’il corresponde à la structure de la page afin que le bloc s’intègre au lieu d’entrer en concurrence avec le titre principal de la page.
4. Alignez le texte selon la mise en page. L’alignement à gauche est généralement le plus facile à lire, tandis qu’un texte centré peut bien fonctionner dans des conceptions plus promotionnelles ou minimalistes.

Évitez d’utiliser ici le niveau de titre supérieur de la page, sauf si ce bloc est censé porter le titre principal de la page.

Paramètres standard de bloc

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

Ces paramètres vous permettent de placer le formulaire sur un arrière-plan de couleur, de dégradé, d’image ou de vidéo. Ils sont utiles lorsque vous souhaitez séparer le bloc du contenu environnant ou en faire une zone plus marquée par votre marque. Consultez les paramètres d’arrière-plan pour le comportement partagé.

1. Utilisez une couleur unie ou un dégradé subtil lorsque la lisibilité est prioritaire. C’est généralement l’option la plus sûre pour les formulaires.
2. Ajoutez un overlay sur les images ou la vidéo afin que la zone de titre reste lisible face à des médias chargés.
3. Définissez des médias spécifiques au mobile uniquement si nécessaire si l’image ou la vidéo pour ordinateur se recadre de manière peu harmonieuse sur les petits écrans.
4. Utilisez les arrière-plans vidéo avec parcimonie afin que le mouvement ne détourne pas l’attention du remplissage du formulaire.

Attention

Après avoir ajouté une image d’arrière-plan, un dégradé ou une vidéo, vérifiez le bloc sur ordinateur et sur mobile pour vous assurer que le texte et les actions ressortent toujours clairement.

Paramètres de couleur

Ces paramètres remplacent les couleurs par défaut de l’icône et du contenu textuel du bloc. Utilisez-les lorsque le formulaire se trouve sur un arrière-plan personnalisé ou doit correspondre à une campagne ou à un style de page précis. Consultez les paramètres de couleur pour le comportement partagé des couleurs.

1. Ajustez ensemble les couleurs du titre et du texte d’accompagnement afin que le bloc reste cohérent.
2. Utilisez la couleur de l’icône comme accent plutôt que comme principale source de mise en valeur.
3. Revérifiez le contraste après tout changement d’arrière-plan pour garder le texte facile à lire.

Paramètres de visibilité

Les paramètres de visibilité contrôlent si le bloc apparaît sur ordinateur, sur mobile ou sur les deux. C’est utile lorsque vous souhaitez une mise en page mobile plus simple ou une expérience de contact propre à un appareil. Consultez les paramètres de visibilité pour le comportement partagé.

1. Masquez le bloc sur un seul appareil uniquement lorsqu’une autre mise en page gère bien ce public.
2. Utilisez volontairement un affichage réservé au mobile ou à l’ordinateur pour réduire l’encombrement, et non pour supprimer un point de contact important.

Conseils d’utilisation

1. Gardez l’objectif évident. Utilisez le titre et le sous-titre pour expliquer à quoi sert le formulaire et ce que les visiteurs doivent envoyer.
2. Rendez l’action facile à repérer. Choisissez un style de bouton qui se distingue suffisamment pour la page, en particulier sur mobile.
3. Protégez la lisibilité. Si vous ajoutez une image d’arrière-plan, un dégradé ou une vidéo, assurez-vous que le texte et les contrôles restent clairs en un coup d’œil.
4. Respectez la hiérarchie de la page. Choisissez un type de titre qui s’intègre au reste de la page afin que le bloc soutienne la mise en page au lieu d’entrer en concurrence avec elle.
5. Utilisez la visibilité de façon intentionnelle. Ne masquez le bloc sur ordinateur ou sur mobile que si les visiteurs disposent toujours d’un moyen clair de vous contacter.
6. Vérifiez les deux zones d’affichage. Examinez le bloc sur ordinateur et sur mobile après avoir modifié la mise en page, l’alignement, la visibilité ou les médias, car les deux vues peuvent se comporter différemment.
7. Conservez un style de secours disponible. Laissez les couleurs et les médias dans leurs valeurs par défaut ou vides lorsque vous souhaitez que le style intégré au thème reste en place ; utilisez des remplacements explicites uniquement lorsque vous voulez que le bloc soit plus indépendant.
8. Choisissez les médias pour la clarté. Si vous utilisez des médias différents pour l’ordinateur et le mobile, vérifiez que le recadrage, le chargement et la lisibilité du texte fonctionnent toujours bien dans les deux vues.
9. Rendez les messages d’état lisibles. Gardez les messages de succès ou d’erreur faciles à parcourir afin que les visiteurs puissent terminer le formulaire sans confusion.