Comment créer un formulaire de commande de t-shirts en ligne dans WordPress [Easy & Simple Way]

Publié: 2022-07-06

Envisagez-vous d'ouvrir une entreprise de t-shirts en ligne? Ou essayez de faire un T-shirt personnalisé pour vos amis proches ou peut-être pour votre organisation. Il est fastidieux d'obtenir le design ou la préférence de couleur de chacun individuellement. De plus, il n'est pas efficace de demander à chacun sa taille de t-shirt.

Alors, de quoi avez-vous besoin ? Vous devez créer un formulaire de t-shirt en ligne où tout le monde peut sélectionner le motif, choisir la couleur et la taille du t-shirt, choisir l'adresse à laquelle vous souhaitez que votre t-shirt soit livré, les options de paiement, etc.

Fluent Forms est le créateur de formulaires le plus convivial pour les débutants. Téléchargez maintenant et commencez à créer de belles formes GRATUITEMENT !!!

Vous pouvez trouver des modèles de formulaire de commande de t-shirts en ligne, mais tous ne vous satisferont pas pleinement. Les modèles sont excellents, mais il y a aussi un revers majeur, vous ne trouverez peut-être pas tous les champs nécessaires que vous vouliez en premier lieu. De plus, vous devez le concevoir et l'intégrer en fonction de vos besoins.

Alors, pourquoi ne pas créer un formulaire de commande de t-shirt sans aucun modèle, personnaliser et organiser les champs, concevoir les mises en page, ajouter des fonctionnalités et en faire votre propre modèle de formulaire de t-shirt. Et la meilleure chose est que vous pouvez le faire sans aucun codage manuel.

Un constructeur de formulaires pour créer un formulaire de commande de t-shirts en ligne

Si vous avez besoin de créer des formulaires de commande de t-shirts créatifs et magnifiques, vous avez sûrement besoin d'un puissant plugin de création de formulaires. Et lorsqu'il s'agit de créer des formulaires en ligne sans codage, rien ne vaut Fluent Forms. Avant de vous lancer dans la création de formulaires, quels sont les avantages de choisir Fluent Forms pour créer le formulaire de commande de t-shirts en ligne souhaité, vous pourriez vous demander ?

Voici -

Gérer la soumission groupée : Le formulaire de commande de t-shirts est très exigeant sur le marché. Comme tout le monde veut un T-shirt personnalisé pour son gang. Les entreprises de vêtements utilisent également ces générateurs de formulaires pour obtenir des commandes de leurs clients. Ils ont donc besoin d'un outil capable de gérer la soumission groupée, de disposer de tous les champs et fonctionnalités nécessaires, d'un générateur de facture pdf, etc.

Une multitude de champs de saisie : Champs obligatoires pour créer un formulaire de commande de t-shirts en ligne-

  1. Champ de nom
  2. Champ d'adresse (avec saisie semi-automatique et intégration de Google Map)
  3. Champ e-mail
  4. Case à cocher et choix multiple
  5. Champs de paiement
  6. Téléchargement de fichiers
  7. Liste déroulante pour sélectionner les couleurs, le design, la taille, etc.
  8. Champ répéteur

De plus, vous obtiendrez plus de 40 champs de saisie, à l'exclusion de ceux-ci, pour créer tous les types de formulaires en ligne que vous souhaitez. Découvrez comment créer un formulaire de demande de chèque avec Fluent Forms.

Champs de saisie Fluent Forms
Champs de saisie Fluent Forms

Fonctionnalités et intégrations importantes : Vous devrez peut-être inclure une logique conditionnelle à votre formulaire, ou peut-être une calculatrice pour aider votre client à suivre son budget, ou peut-être un visuel du T-shirt, tout peut être fait avec Fluent Forms.

De plus, le téléchargement de la version PDF des entrées soumises est une fonctionnalité intéressante de tout formulaire de commande en ligne. Les utilisateurs peuvent avoir besoin de la facture en main, vous pouvez expédier la facture avec le T-shirt qu'ils ont commandé.

Si vous souhaitez transformer vos prospects ou vos clients ponctuels en clients fidèles permanents, vous aurez peut-être besoin d'une sorte d'outil de gestion de la relation client ou de CRM pour votre créateur de formulaires, et oui, Fluent Forms propose un tas d'intégrations natives pour nourrir les prospects.

De plus, vous obtiendrez plus de 45 intégrations, de l'automatisation aux outils de partage de fichiers, de l'adhésion aux outils de notification, etc.

Assez bavardé, passons à la création de formulaires.

Comment créer un formulaire de commande de t-shirts en ligne (à partir de zéro)

Voici les étapes pour créer un formulaire de commande de t-shirts simple et complet. Il vous suffit de suivre pour que votre entreprise de t-shirts en ligne soit opérationnelle de manière fluide !

Étape 1 : créer un formulaire de commande de t-shirts en ligne

Pour créer un formulaire de commande de t-shirts en ligne sans aucun codage, la toute première chose à faire est d'installer un générateur de formulaires sur votre site WordPress. L'installation de Fluent Forms est assez simple.

Après l'installation et l'activation du plugin, survolez Fluent Forms à gauche et sélectionnez Ajouter nouveau pour créer votre formulaire. Maintenant, une fenêtre contextuelle apparaîtra, sélectionnez l'option Nouveau formulaire vierge pour initialiser votre nouveau formulaire.

Vous verrez une fenêtre contextuelle de félicitations et serez redirigé vers la page de l'éditeur de formulaire. Sur cette page, vous pouvez ajouter, supprimer et personnaliser vos champs de formulaire comme vous le souhaitez.

C'est là que vous devez vous décider sur la structure du formulaire. Certains aiment sauter directement dans la section de conception de t-shirts, et certains aiment d'abord obtenir les informations de base des utilisateurs.

Avec ce dernier, nous allons ajouter les champs nom, adresse, e-mail et numéro de téléphone un par un. C'est assez basique, il suffit de rechercher le champ sur le côté droit de la page de l'éditeur et de cliquer pour l'ajouter à votre formulaire. Vous pouvez également faire glisser le champ pour les mélanger.

En ce qui concerne le nom, nous n'ajouterons que le prénom et le nom, vous pouvez activer l'option du deuxième prénom à partir de la personnalisation de l'entrée. Que pouvez-vous personnaliser d'autre ? Pour le champ d'adresse, vous pouvez ajouter ou supprimer une adresse secondaire, exclure les informations inutiles déposées ou ajouter Google Map Autocomplete si vous le souhaitez.

Formulaire de commande de t-shirts

Étape 2 : créez une section pour la personnalisation du style de t-shirt

Maintenant, pour votre t-shirt personnalisé, vous devez sélectionner la taille, la couleur et la quantité de votre chemise souhaitée. Nous allons donc ajouter un conteneur à trois colonnes et ajouter un champ de paiement avec une option radio activée, un mappage du champ de quantité d'articles avec le champ de paiement et un champ déroulant nommé sélectionner la couleur (où nous avons créé les options pour Couleurs différentes).

Conception de formulaire de commande de t-shirt en ligne

Maintenant, que se passe-t-il si quelqu'un veut commander un autre T-shirt de taille et de couleur différentes ? Oui, nous pouvons le faire aussi. Avec une simple astuce de logique conditionnelle, vous pouvez ajouter un autre conteneur avec les mêmes champs qui leur sont attribués.

Section de personnalisation de t-shirt pour votre formulaire de commande de t-shirt en ligne

Ajoutez une case à cocher et nommez-la Ajouter un t-shirt, puis copiez le conteneur précédent et renommez-le en T-shirt 2. Définissez la logique conditionnelle selon la capture d'écran. Désormais, chaque fois qu'un utilisateur vérifie ce champ, un nouveau conteneur apparaît et il peut ajouter une autre exigence de T-shirt à sa commande.

Étape 3 : Personnalisez la section de paiement de votre formulaire de commande de t-shirts

La définition de l'option de paiement pour le formulaire de commande de t-shirts est très simple dans Fluent Forms. Ajoutez les champs Mode de paiement et Résumé du paiement à votre formulaire de commande. C'est tout, il récupèrera dynamiquement la quantité et le montant, et affichera le sous-total et les autres informations dans le récapitulatif des paiements.

Pour pimenter le tout, nous ajouterons un champ personnalisé à afficher comme message de confirmation dans le formulaire de commande de t-shirts. Tout d'abord, ajoutez un champ personnalisé et ajoutez votre message de confirmation. Ensuite, la récupération des données dynamiques est assez simple. Tapez {dynamic.Name_Attribute} pour obtenir les données de ce champ particulier.

ajoutez du code HTML personnalisé à votre formulaire de commande de t-shirts

Pour les méthodes de paiement, Fluent Forms vous propose les intégrations de paiement les plus populaires. Vous pouvez utiliser Stripe, PayPal, Mollie, RazorPay, etc. pour le paiement de votre formulaire de commande de T-shirt. La configuration de votre méthode de paiement est comme n'importe quel autre paramètre de paiement. Vous devez l'intégrer via des clés API.

Étape 4 : Faites-en un formulaire en plusieurs étapes si vous le souhaitez

Maintenant, il peut être accablant si un utilisateur voit autant de champs sur une page, vous pouvez diviser votre formulaire en formulaires à plusieurs étapes et créer plusieurs sections pour les informations de contact et l'adresse de facturation de l'utilisateur, les informations de base, la section de paiement et la section de confirmation pour le formulaire.

Recherchez l'étape de formulaire dans les champs de saisie, puis ajoutez-les au début et à la fin de la page, ajoutez-en également une après les informations de facturation et ajoutez-en une après la sélection de t-shirts.

Étape 5 : Paramètres de notification et d'e-mail pour le formulaire de commande de t-shirts

Maintenant, que se passe-t-il une fois la commande passée ? Si vous souhaitez envoyer une notification par e-mail à votre utilisateur et recevoir une notification par e-mail pour vous-même après l'envoi d'un formulaire de commande de t-shirts, vous devez activer la notification par e-mail. Pour cela, activez les notifications par e-mail à partir de l'onglet Paramètres et intégrations. Cliquez sur Ajouter une notification en haut et remplissez les champs selon vos besoins. Nous vous recommandons de suivre les meilleures pratiques pour les notifications par e-mail afin d'éviter les problèmes de délivrabilité des e-mails.

Vous avez peut-être vu les autres options disponibles sur le côté gauche de l'écran. Oui, vous pouvez intégrer votre formulaire à différents outils tels que les logiciels d'adhésion, de notification, de CRM, etc. si vous le souhaitez.

Étape 6 : stylisez votre formulaire de commande de t-shirts

Si vous avez suivi tout ce que nous vous avons dit jusqu'à présent, vous avez vous-même un bon de commande de T-shirt fonctionnel. Vous pouvez l'utiliser n'importe où, comme sur un blog ou une page si vous le souhaitez. En outre, vous pouvez créer une page de destination pour ce formulaire qui peut être partagée via des liens directs ou des boutons.

Mais qu'en est-il de donner du style à cette forme ? Oui, vous pouvez le faire aussi, ajouter des images en vedette à votre formulaire via un champ HTML personnalisé est assez basique. Si vous utilisez des constructeurs de pages comme Elementor et Oxygen, vous obtiendrez des widgets supplémentaires pour le formulaire Fluent. Il peut être très pratique de rendre votre formulaire si riche que les utilisateurs ne peuvent généralement pas faire défiler sans y jeter un deuxième coup d'œil.

Voici un formulaire de commande de t-shirt de base sans aucun codage ni l'aide d'un constructeur de page fantaisiste -

Dans l'option Aperçu et conception , vous aurez quelques options pour modifier la couleur d'arrière-plan, la couleur de la police, la conception du conteneur, etc. Il propose même un modèle de style de formulaire pour votre formulaire de commande de t-shirts - Style moderne, classique, bootstrap, etc.

Cependant, si vous souhaitez ajouter du CSS et du JS personnalisés à votre formulaire, c'est également possible. Il n'est pas obligatoire de coder manuellement le style de votre formulaire. Vous pouvez créer de superbes formulaires sans CSS ni constructeur de page sophistiqué en un tournemain.

Vous souvenez-vous de la récupération dynamique des données sur la page de confirmation pour vous rassurer ?
Tapez simplement {dynamic.Name_Attribute} pour récupérer les données de ce champ particulier, pour notre formulaire de commande, nous mettons simplement un champ HTML personnalisé et mettons un texte de confirmation avec les balises {dynamic.names} et {dynamic.phone} . Voila ! Voici à quoi cela ressemblera dans votre formulaire.

Nous avons également ajouté des motifs de t-shirts aux champs radio pour un choix visuel.

Publier votre bon de commande de T-shirt

Publier votre bon de commande de t-shirt n'est pas sorcier. Fluent Forms attribue toujours un identifiant unique à chaque formulaire. Il vous suffit de copier-coller le shortcode sur la page ou l'article de blog sur lequel vous souhaitez publier votre formulaire.

De plus, si vous utilisez la fonctionnalité Landing Page, vous pouvez ajouter une couleur d'arrière-plan, une image d'arrière-plan, un logo de formulaire, une image de fonctionnalité, un en-tête de page, etc. pour créer un formulaire élégant.

Vous pouvez également avoir la possibilité de voir à quoi ressemblera votre formulaire sur mobile ou sur ordinateur. Le partage avec la page de destination est aussi simple que bonjour et il a une poignée d'options comme vous pouvez partager via un lien direct ou un bouton pour partager sur les réseaux sociaux .

Le look final du bon de commande de T-shirt sans aucun codage

Encore confus? Non, vous ne manquez rien

Avec Typeform, vous pouvez créer des formulaires interactifs pour rendre votre formulaire semblable à une conversation.

Vous pouvez également créer des formulaires conversationnels interactifs avec Fluent Forms. Et il a un tas d'options comme l'accès complet au clavier, l'ajout d'images/mises en page différentes, même une animation/vidéo au formulaire, un clic pour transformer votre formulaire non interactif en un formulaire conversationnel, etc.

Si vous souhaitez créer un formulaire de commande de t-shirts en tant que Typeform, vous pouvez le faire avec Fluent Forms Conversational Form.

Préparez dès maintenant des formulaires de commande de t-shirts scolaires pour votre classe ou votre club. Si vous avez besoin d'un coup de main, découvrez comment fonctionnent les formulaires conversationnels dans cette vidéo.

Formulaire de commande de t-shirts Canva

Voici un autre exemple de formulaire de commande de T-shirt en ligne.

Formulaire de commande en ligne de t-shirts pour l'équipe Mustang BaseBall

Vous voyez, vous ne manquez de rien. En fait, avec Fluent Forms, vous obtenez plus que tout autre constructeur de formulaires pour créer de superbes formulaires de commande de t-shirts.

Obtenir Fluent Forms Pro

Emballer

Et voilà, un moyen simple et facile de créer un formulaire de commande de t-shirts en ligne sans aucune connaissance en codage. Vous pouvez désormais créer n'importe quel type de formulaire de commande si vous le souhaitez, ajoutez simplement les champs requis et concevez un formulaire centré sur l'utilisateur avec Fluent Forms en quelques minutes.

Si vous rencontrez des problèmes avec les notifications par e-mail ou si vos e-mails sont envoyés au spam, vous pouvez installer un plugin gratuit FluentSMTP. De plus, si vous avez des questions concernant un formulaire de commande, commentez ci-dessous. Suivez-nous sur les réseaux sociaux pour obtenir les dernières mises à jour et tutoriels.