Créer un formulaire standard

Ce guide passe en revue l’ensemble du formulaire, dans l’ordre où l’éditeur le présente.

1. Ouvrir l’éditeur Customize

   Accédez à Quote settings. Sur la page Request a Quote, repérez la carte Customize et cliquez sur Customize. L’éditeur s’ouvre en plein écran.

2. Ouvrir l’onglet Quote form

   L’éditeur comporte quatre onglets : Button & widget, Quote form, Quote cart page et Success message. Ouvrez Quote form.

3. Partir d’un modèle

   Form template affiche le modèle sur lequel repose votre formulaire, avec une courte description des activités auxquelles il convient.

   Cliquez sur Change. Une fenêtre de sélection s’ouvre, intitulée Choose a form template, avec la note « Select a starting point. The form fields will change only after you confirm. » Il y en a trois :

   Modèle	Description donnée par l'application	Étiquettes
   Simple quote form	« Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload. »	Fast setup · 7 fields
   Detailed quote form	« For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance. »	More details · 14 fields
   B2B customer form	« For wholesale or business buyers who need company, shipping, billing, and payment term information »	B2B

   Choisissez celui dont la description correspond aux devis que vous établissez, puis cliquez sur Use this template pour confirmer. Cancel laisse votre formulaire actuel intact. Faites-le maintenant, avant de commencer à modifier les champs.

   

   Partez d’un modèle plutôt que d’un formulaire vide.

   Attention

   Choisir un autre modèle remplace la liste de champs actuelle. Les sections et les champs affichés à l’écran sont remplacés par ceux du nouveau modèle : toute section ajoutée, tout champ renommé et tout élément supprimé disparaissent avec eux. Choisissez d’abord le modèle, personnalisez ensuite.

4. Décider si le formulaire s’affiche sur les pages produit

   Sous Product page form display (« Show the quote form directly on product pages »), cochez Enable product page form display si vous voulez que vos clients remplissent le formulaire sans quitter le produit.

   Cocher cette case fait apparaître Form position on product page, une liste déroulante à trois choix :

   Position	Emplacement du formulaire
   Below Add to Cart button	Haut de la page, juste sous les boutons d'achat : l'option la plus visible.
   Below product description	Après le texte de vente, pour un acheteur qui l'a lu.
   Below product information	À la fin du bloc d'informations produit.

   

   Désactivez ce paramètre si vous préférez que vos clients constituent d’abord un panier de devis.

5. Parcourir le Form builder

   Le Form builder (« Manage sections, rows, fields, and validation with the visual form builder ») contient vos questions, regroupées en sections. Les sections présentes dépendent du modèle que vous venez de choisir :

   Modèle	Sections dans le builder
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Vous pouvez faire trois choses avec une section :

   • L’activer ou la désactiver. Ouvrez les paramètres de la section et cochez ou décochez Enable. Une section désactivée n’est pas affichée au client, quel que soit le nombre de champs qu’elle contient.
   • La renommer. Le même panneau de paramètres contient un Label : remplacez-le par le nom que vos acheteurs lui donneraient.
   • La déplacer. Faites glisser la section par sa poignée pour réorganiser le formulaire.

   Développez une section avec son chevron pour voir les champs qu’elle contient, et utilisez Add element pour ajouter un autre champ à cette section.

   Les champs de contact et d’adresse sont détaillés dans Champs d’informations client ; l’entreprise, la facturation et les conditions de paiement dans Créer un formulaire B2B.

   Note

   Des contrôles grisés dans le builder, accompagnés d’une ligne avec un cadenas indiquant « 🔐 This feature is available on … », signifient que la fonctionnalité fait partie d’un forfait supérieur. Rien n’est cassé : ouvrez Pricing plans dans l’application pour voir ce que comprend le vôtre.

6. Modifier un champ

   Cliquez sur un champ du builder pour ouvrir ses propres paramètres, intitulés du nom du champ et de la mention « Customize how this field appears on the form. »

   Paramètre	Ce qu'il fait
   Label	Le texte que lit le client. C'est le paramètre que les marchands modifient le plus.
   Hide label	Conserve le champ mais supprime le libellé au-dessus.
   Placeholder	Le texte d'exemple grisé à l'intérieur de la zone vide. Servez-vous-en pour indiquer le format attendu : « e.g. 500 units » vaut mieux qu'une zone vide.
   Help text	Une ligne sous le champ, pour tout ce qui est trop long pour un texte d'exemple.
   Type	Le type de champ, et ce que le client peut y saisir.
   Required	Le formulaire ne s'envoie pas sans ce champ. Demandez le moins de champs obligatoires possible.
   Options / Add option	Les choix d'une liste de sélection, d'un groupe de boutons radio ou d'un groupe de cases à cocher.
   Choose default value	La valeur avec laquelle le champ démarre au chargement du formulaire.
   Limit characters	Active Min characters et Max characters.
   Column width	La part de la ligne que prend le champ, pour que deux champs courts puissent se placer côte à côte.
   Custom HTML class	Un nom de classe pour votre propre CSS : consultez Ajouter du CSS personnalisé.
   Remove	Supprime le champ. Disponible uniquement pour vos propres champs : les champs de contact et d'adresse intégrés sont protégés et n'ont pas de Remove.

   

   Cliquez sur chaque élément et configurez-le davantage (si nécessaire)

   Terminez avec Save changes dans le panneau du champ, ou Cancel pour abandonner la modification.

   Attention

   Limit characters est validé pendant la saisie : Min characters et Max characters doivent chacun être un nombre entier supérieur ou égal à 0, et le minimum ne peut pas dépasser le maximum. En cas d’erreur, l’éditeur bloque l’enregistrement.

7. Mettre les champs dans l’ordre voulu

   Les champs se réorganisent par glisser-déposer. Saisissez un champ par la poignée située à l’extrémité gauche de sa ligne et déposez-le où vous le souhaitez. Les sections ont leur propre poignée et se déplacent de la même façon.

   L’ordre compte plus qu’il n’y paraît : un formulaire qui demande un code postal de livraison avant de demander un nom ressemble à une base de données, pas à une conversation.

   

   Faites glisser l’élément pour modifier sa position ou son ordre dans le formulaire de devis

8. Ajouter vos propres questions

   Extra info commence avec ce que votre modèle y place, et cela diffère selon le modèle. Simple quote form arrive avec Quantity et Upload files ; Detailed quote form avec Project detail et Delivery service ; B2B customer form avec Message.

   Utilisez Add element pour ajouter tout ce dont vous avez besoin : délai de fabrication, date de livraison, référence de projet.

   Si un groupe de questions va ensemble et ne rentre dans aucune section existante, utilisez Add section pour en créer une nouvelle.

   Danger

   Un champ n’est pas facultatif : le formulaire doit contenir un élément dont le nom contient le mot email. L’application bloque l’enregistrement et vous en informe : Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Sans lui, aucun de vos devis n’arrive jamais jusqu’au client.

   

   Cliquez sur Add element pour ajouter d’autres champs personnalisés au formulaire de devis

   

9. Personnaliser le style du formulaire

   Style affiche le préréglage utilisé par votre formulaire, avec un bouton Change qui ouvre les autres. Les préréglages sont Material filled, Classic, Flat, Flat round, Classic round, Line, Line round et Material outlined, chacun présenté sous la forme d’une petite image du champ de saisie : choisissez donc à l’œil plutôt qu’au nom.

   À côté se trouve Match theme styling if possible. Cochez-la et le formulaire emprunte les polices et les champs de votre thème, ce qui est généralement le chemin le plus court vers un formulaire qui ne paraît pas greffé après coup. L’application précise que « Theme styling applies on your storefront and is not shown in this preview » : jugez donc ce réglage sur la vitrine, pas ici.

   Customize text définit Font style, Title bar font size et Title bar font weight. Customize form color définit chaque couleur : Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border et Quote popup primary color.

   

   Détails complets : Adapter le style à votre thème.

10. Relire le formulaire dans Preview

    Le panneau Preview se trouve à côté de l’éditeur et se met à jour au fil de votre travail. Deux contrôles de sa barre d’outils méritent d’être utilisés avant d’enregistrer :

    • Le bouton d’état du client, qui bascule l’aperçu entre Guest et Logged-in : ces deux profils voient des formulaires différents.
    • Le bouton bureau / mobile, car un long formulaire n’a pas le même rendu sur téléphone.

11. Enregistrer et tester par vous-même

    Dès que vous modifiez quelque chose, la barre d’enregistrement de Shopify apparaît avec Save et Discard changes. Cliquez sur Save. Si un champ présente encore une erreur de validation, l’éditeur refuse et affiche « Please resolve validation errors before saving. » : corrigez le champ indiqué et enregistrez de nouveau.

    Rendez-vous ensuite sur votre vitrine et envoyez une vraie demande de test. Vérifiez qu’elle arrive dans Quote list avec tout ce que vous attendiez.

    

    Le formulaire sur la vitrine, avec Quote form appearance réglé sur Multiple step.

Note

Le modèle définit votre point de départ, pas votre plafond. Tout ce que le modèle apporte peut être modifié ou supprimé, et tout ce qu’il omet peut être ajouté avec Add element ou Add section. N’oubliez pas simplement que changer de modèle par la suite revient à repartir de zéro plutôt qu’à modifier : cela remplace la liste de champs que vous avez créée.

Attention

Envoyez toujours vous-même une demande de test avant la mise en ligne. C’est le seul moyen de vérifier que les champs, l’e-mail et l’enregistrement du devis concordent.

Où se trouvent les autres paramètres

L’onglet Quote form ne contient que les questions. Plusieurs éléments que les marchands cherchent ici se trouvent dans les autres onglets du même éditeur :

Ce que vous voulez	Onglet	Ce que vous y trouverez
Le formulaire en une seule page ou en étapes	Quote cart page	Quote form appearance (« Controls how the quote form looks on the quote cart page »), réglé sur Multiple step ou Single page.
Ce qu'affichent les lignes de produits	Quote cart page	Product list columns (« The product details shown as columns in the customer's quote cart ») : consultez Groupe de produits du devis.
Permettre aux clients de regrouper des produits	Quote cart page	Enable Quote Sections (« Lets customers group the products in their quote cart into named sections ») : consultez Groupe de produits du devis.
Le texte et l'emplacement du bouton	Button & widget	Texte du bouton, action au clic, position du bouton et qui peut le voir.
Ce qui se passe après l'envoi	Success message	Le message de remerciement et Redirect to custom URL.

Note

L’éditeur vous en avertit lui-même si vous tentez de changer d’onglet en cours de modification : « Save your changes before switching tabs to avoid losing them. »

Étapes suivantes

• Champs d’informations client : affinez ce que vous demandez
• Groupe de produits du devis : colonnes de produits et sections de devis sur la page du panier de devis
• Ajouter reCAPTCHA : protégez le formulaire contre le spam
• Créer un formulaire B2B : le modèle destiné aux acheteurs professionnels