Construire un formulaire WordPress en plusieurs étapes avec un bouton PayPal à la fin

1. Introduction: Bienvenue dans un autre cours de Skillshare génial avec moi. C'est toujours un plaisir de vous accueillir ici. Dans cette classe. Je veux vous montrer comment créer un formulaire en plusieurs étapes génial pour votre site Web WordPress. Et pas seulement n'importe quel formulaire en plusieurs étapes, mais un formulaire en plusieurs étapes avec un bouton de paiement à la fin ou à la dernière étape. Pour que vous puissiez trouver des personnes à travers ces différentes étapes où ils peuvent sélectionner différentes entrées et configurations pour le service que vous proposez. Et à la fin, ils recevront le montant qu'ils sont censés simuler et sont un bouton de paiement très stratégique placé à la dernière étape afin qu'ils puissent passer leur commande. vais examiner cela en détail, et je vais vous montrer comment faire tout cela avec des outils gratuits. Vous ne paierez aucun plug-in ou service que ce soit. Juste au cas où c'est la première fois que vous me verrez. J'enseigne ici même sur Skillshare depuis 1,5 ans. Mais j'utilise WordPress depuis quatre ans à partir de la cinquième année maintenant, encore une fois, une certaine expérience de l'utilisation des différents outils que WordPress a à offrir. La seule partie dans laquelle j'ai aimé me spécialiser est de rechercher les meilleurs outils, les plus abordables et de préférence gratuits à utiliser pour créer des sites Web. Donc, si vous cherchez un moyen de créer un formulaire en plusieurs étapes qui accepte le paiement à la toute dernière étape. C'est le cours qu'il vous faut. Donc, sans perdre plus de temps, commençons. Très bien. 2. Installer le plugin: Nous y voilà. Il s'agit d'une toute nouvelle installation de WordPress. Bien sûr, la première chose que nous devons faire est d'ajouter le plugin qui nous aidera à créer le formulaire. Et nous allons utiliser un plugin de formulaire génial appelé formulator car il est gratuit et possède des fonctionnalités très puissantes. Allons donc à l'intérieur. Connexions, Ajouter un nouveau. Ensuite, nous ne chargeons pas de plugin. Nous l'installons à partir du référentiel des plugins. Je vais donc chercher ici le formulateur. Ici, il est créé par WPA AMU dev. Comme vous pouvez le constater en ce moment, il compte plus de 200 000 installations actives. Je vais cliquer sur Installer maintenant. Il est maintenant installé, je vais donc l'activer. Ici, il est maintenant actif. Ce sont les deux plugins qui sont fournis par défaut à chaque nouvelle installation de WordPress. Je vais donc sélectionner les deux, puis je les supprimerai sélectivement dans le menu déroulant, puis je les appliquerai. Maintenant, ils sont partis. Nous n'avons que le formulateur comme seule installation, le plug-in. La prochaine chose que nous voulons faire est maintenant d'entrer dans le formulateur. Vous le trouverez presque en bas de ce menu latéral de gauche. Je cliquerai donc plus tard. là que nous l'avons. Il s'agit donc du tableau de bord du formulateur dans votre tableau de bord WordPress. En d'autres termes, c'est ici que vous verrez des résumés de la performance de vos formulaires. Et vous disposez également de raccourcis pour créer de nouveaux formulaires, sondages et essentiellement des éléments d'administration. Voici comment installer le plug-in. Dans la leçon suivante, Voyons comment créer les forums. Je vous verrai bientôt. 3. Ajouter une entrée de formulaire: Bienvenue de retour. Donc, pour créer un formulaire, nous devons aller ici même lorsque nous sommes encore dans le tableau de bord, faites défiler pour créer des formulaires. Et nous pouvons cliquer dessus et nous serons amenés à créer un nouveau formulaire, ou nous pourrions accéder à Forms, aurons également la possibilité de créer ou d'importer un formulaire. d'abord Laissez-moi d'abord fermer ça. Nous n'avons pas besoin de cela. Je clique sur Créer un formulaire. Parce qu'il s'agit d'un formulaire en plusieurs étapes et très personnalisé que nous créons. n'existe pas de modèle préfabriqué que nous puissions utiliser à cette fin. Allons-y avec du blanc. À partir d'une ardoise vierge. Donnons-lui un nom. Je vais appeler ça l'étape exécutée. Cliquez maintenant sur Créer. Notre formulaire est maintenant prêt à être rempli de champs. C'est donc ici que nous allons insérer des champs. Vous remarquerez que le nom apparaît ici et que nous pouvons le modifier à partir d'ici. Maintenant que nous l'appelons étape performance, nous pouvons le changer pour le nom reste automatiquement sous forme à plusieurs étapes. Allons donc insérer des champs. Le premier champ aura besoin d'un menu déroulant car nous avons besoin que quelqu'un puisse sélectionner et c'est ce qu'on appelle sélectionner. Je vais donc cliquer dessus , puis insérer des champs. Et cela affichera les paramètres de ce type d'entrée spécifique. Nous pouvons donc ajouter une étiquette pour ce champ. Disons donc le type de site Web. Supposons que nous gérons une entreprise de conception Web. Supposons également que nous créions ce type de formulaire pour permettre aux utilisateurs choisir différents paramètres et configurations dont ils ont besoin pour leur site Web. Et obtenez ensuite un prix en fonction des fonctionnalités qu'ils choisissent pour leur site Web, puis payez ce montant. Site Web. Supposons que nous voulions ajouter un espace réservé pour leur demander quel type de site Web. Ensuite. Maintenant, nous avons déjà deux options pré-remplies. Permettez-moi de l'appliquer une seconde avant d'apporter des modifications à cette application. C'est notre domaine. Comme vous pouvez le voir, il se lit maintenant sur le site Web. Et si nous le prévisualisons, c' est l'espace réservé que nous venons d'ajouter quel type de site Web et notre étiquette YS. Si nous cliquons sur le menu déroulant, il comporte l'option 1 et la deuxième option. Permettez-moi de terminer ça. Si nous l'ouvrons à nouveau. Vous comprenez maintenant pourquoi nous avons ces deux options. Nous pouvons également changer cela. Parce que ce sera les différents types de sites Web parmi lesquels quelqu'un peut choisir. E-commerce, peut-être un blog personnel. Et nous pouvons ajouter autant d'options que nécessaire en cliquant dessus. Je vais en ajouter un troisième. Site Web du magazine. Permettez-moi d'ajouter une autre option. Quel type de site Web ? École en ligne. Très bien. Maintenant que nous avons ces différentes options, permettez-moi de l'appliquer rapidement. Si nous le prévisualisons maintenant. Maintenant, nous avons ces différents types de sites Web dans le menu déroulant et quelqu'un peut le sélectionner ou bien, Permettez-moi de fermer cela, de l' ouvrir à nouveau. Nous devons maintenant donner un prix à chacune de ces options, car chaque type de site Web peut coûter un montant différent, sera inclus dans les calculs. Ensuite, nous dirons activer, choisir si ces champs seront utilisés dans les calculs ou non. La valeur des calculs est la même que la valeur en entrée de ce champ. Activons donc cela. Et comme vous pouvez le constater, nos différentes options apparaissent ici, attendant que nous saisissons le coût spécifique de la création de chaque option. Supposons que nous facturons 80$ pour une boutique en ligne. Disons 15$. Pour un site web de blog et de magazine personnel, disons 53$ pour une école en ligne. Disons 45$. Maintenant, ce que nous devons faire, c'est passer dans les paramètres. Si nous entrons dans le style, c'est juste un endroit pour ajouter du CSS supplémentaire, mais vous n'avez pas vraiment besoin d'ajouter de CSS ici car nous verrons comment modifier l'apparence des formulaires dans la prochaine leçon. revenir à l'intérieur des paramètres, c'est ici que vous définissez des éléments tels que s'il s'agit d'un champ obligatoire ou non. Et bien sûr, il s'agit d'un champ obligatoire. Ils doivent choisir le type de site Web dont ils ont besoin. Si nous sélectionnons obligatoire, nous saisirons un message d'erreur qui apparaîtra au cas où ils ne le sentent pas. Disons donc, par exemple, ce champ est obligatoire. Nous n'avons pas vraiment besoin de ces autres options ici, mais vous pouvez aller de l'avant et jouer avec eux et voir ce qu'elles font. Maintenant que nous avons cela, je vais aller de l'avant et postuler. 4. Créer les étapes de pagination des formes: Ce que nous devons faire ensuite, c'est ajouter des champs supplémentaires pour notre formulaire. Laissez-moi donc dupliquer cela au lieu d'en ajouter un nouveau. Il peut s'agir savoir si le client a besoin d'hébergement ou non. Donc, Hosting. Avez-vous besoin d'hébergement ? Bien sûr, les options ne seront que deux options, oui ou non. Supprimons donc ces deux-là pour les calculs maintenant s'ils en ont besoin s'ils le choisissent, oui, j'ai besoin d'hébergement. Bien sûr, mettons le prix de l'hébergement. Disons 2424$. Sachez, bien sûr que cela devrait être 0. Nous ne les facturerons pas s'ils disent ne pas vouloir être hébergés. Revenons ici. Je pense que nous sommes bons, alors appliquez-le. Et maintenant, nous avons ces deux domaines. Prévisualisez que vous devez héberger oui ou non. Je vais y ajouter deux autres champs ici. Notre domaine reste un champ sélectionné. Je veux dire insérer des champs. L'étiquette peut ressembler au nombre de pages. Combien de pages avez-vous besoin sur votre site Web ? 510. Ajoutons-en un de plus, 1515 ans et plus. Très bien, nous allons activer les calculs ici pour cinq pages qui facturent peut-être une formation de dix pages, 3038 pour 15 plus 45. Et appliquons cela. Nous avons maintenant ces trois domaines. Prévisualiser ce qui est juste, ça semble bien. Ces trois champs constitueront la première étape du formulaire. Maintenant, créons, insérons maintenant des champs qui vont passer à la deuxième étape du formulaire. Je vais insérer un champ. Peut-être pourrions-nous ajouter quelque chose comme une zone de texte. Puis insérez un champ. Nous avons maintenant une zone de texte InputField. Changeons l'étiquette en remarques pour qu'au cas où elles aient quelque chose à ajouter en tant que commentaire. Ajoutez votre message ou vos commentaires ici. Appliquez cela. Et maintenant, nous l'avons ici. Remarques. Si nous prévisualisons cela, vous remarquerez que nous n'avons pas encore d'étapes. Nous n'avons pas créé la deuxième étape du formulaire. Pour ce faire, nous devons insérer un champ. Nous pouvons l'insérer à partir d'ici ou d'ici. Nous avons besoin d'un saut de page. Je vais donc cliquer dessus , puis insérer des champs. Je vais faire glisser ce saut de page juste au-dessus remarques jusqu'à ce que cette ligne bleue apparaisse au-dessus. Maintenant, le saut de page est juste avant les remarques, ce qui signifie que la deuxième étape commence à partir d'ici. Si nous prévisualisons cela, vous remarquerez maintenant que nous avons deux étapes. Et si nous cliquons sur Maxed, tout d'abord, parce que nous avons dit que ces champs devraient être obligatoires, c'est le message que nous avons tapé en tant que message d'erreur. Cela signifie que nous devons sélectionner au moins une option, un blog personnel. Oui, j'ai besoin d'être hébergé. Et maintenant, nous pouvons cliquer sur Suivant. Et c'est la zone de texte de nos remarques. Mais je veux en faire une forme en trois étapes. Nous pourrions peut-être insérer quelques autres champs. Cliquez donc sur Insérer des champs. Je vais aller de l'avant et le sélectionner, sélectionner une entrée car c'est logique pour moi. Bien sûr, nous n'avons pas abordé ces autres champs de saisie. Nous en aborderons quelques autres. Mais le devoir ou projet pour vous consistera à déterminer comment ces autres types de champs de saisie sont utilisés et où ils peuvent s'appliquer à votre formulaire. Donc, pour l'instant, allons-y et sélectionnons ce type de champ de sélection. Et donnons une étiquette. Paiements activés. Ensuite. Avez-vous besoin d' options de paiement sur votre site Web ? Non, bien sûr. Saisissons maintenant deux options comme PayPal et ajoutons Stripe. rayure. C'est là que nous l'avons. Et maintenant, si nous passons à l'intérieur des calculs et que nous l'activons, NON sera de 0$ PayPal, ils devront payer une bande supplémentaire de 13$, peut-être 17$ supplémentaires. Appliquons cela. L' option Paiements activés se trouve sur la deuxième page car nous avons un saut de page. Mais je veux ajouter un autre saut de page. Et au lieu d'en ajouter un nouveau à partir de là, je vais juste dupliquer celui-ci. Et maintenant, nous en avons deux. Et je vais faire glisser ça jusqu' au bout, vers le bas. Je voudrais ensuite apporter des remarques juste après le saut de page. Parce que nous avons ces trois sites Web hébergeant un nombre de pages, puis nous avons un saut de page, puis les paiements sont activés. Oui ou non. Permettez-moi d'apporter ce nombre de pages. La deuxième étape. Laissez-moi le mettre juste en dessous parce qu'il y a quelque chose que je veux vous montrer. Nous avons maintenant l' hébergement de site Web, puis le saut de page, nombre de pages, les paiements activés, et un autre saut de page puis des remarques. Voyons cela en action. Donc, la première page a, quel type de site Web avons-nous besoin d'un hébergement personnel de blog ? Oui, nous avons besoin d'hébergement. Deuxième étape : nombre de pages. Combien de pages avez-vous besoin ? Peut-être dix. Les paiements sont activés sur le site Web ? Oui, vous devez activer PayPal sur le site Web. Ensuite, nous avons le champ des remarques. Enfin, ce que nous devons faire est ajouter le paiement à la dernière étape. Voyons donc comment le faire. 5. Ajouter le bouton PayPal de la forme: Allons de l'avant et ajoutons d'autres champs. Et bien sûr, sur la page de paiement, nous avons besoin du nom et de l'e-mail. Nom, e-mail et PayPal. Je vais y insérer des champs, les trois champs. Bien sûr, cela vient maintenant après les remarques. Nous avons un nom, des documents électroniques, ce qui signifie que nous avons besoin d'un saut de page ici. Je vais dupliquer ça. Maintenant, nous en avons deux, donc je vais le faire glisser juste après remarques que c'est maintenant le nom, l'e-mail et PayPal. Après ça. Prévisualisons les modifications. Maintenant, c'est ce que nous avons. Laissez-moi choisir cela. Non, maximum, nombre de pages, cinq papiers. Ensuite, nous avons nos remarques ici. Ensuite, nous avons un nom, adresse e-mail et j'ai remarqué que PayPal ne s'affiche pas. Allons donc à l'intérieur de notre journal. Et maintenant, vous remarquerez que la raison pour laquelle il ne s'affiche pas est parce que nous ne nous sommes pas connectés à notre compte PayPal avec formulateur connecte le compte PayPal ici. Et c'est ce que nous faisons dans la prochaine leçon. Avant d'y aller, récapitulatif rapide. Tout ce que nous devons faire pour remplir facilement notre formulaire avec des champs, insérez en cliquant sur ce bouton ici ou sur ce bouton ici, puis en sélectionnant un champ de saisie, en l'insérant. Laissez-moi fermer ça. Une autre chose que je n'ai pas mentionnée est vous pouvez réorganiser et placer ces champs côte à côte comme ça pour que lorsque vous les prévisualisez côte à côte. Laissez-moi fermer ça. Permettez-moi également de mettre ce nom côte à côte sur le laissez-moi également mettre ce nom et adresse e-mail côte à côte. Et si nous les prévisualisons, blog personnel côte à côte. Le nom et l'adresse e-mail sont côte à côte. Voyons comment nous allons ajouter paiements à cette dernière étape ici que quelqu'un puisse simplement cliquer sur payer maintenant et payer. Mais avant de le faire, veillons à ce que nous publions le formulaire. Sinon, si nous nous éloignons de cette page sans enregistrer les modifications, sans publier, nous perdrons tout et devrons commencer par le début. Allons de l'avant et cliquez sur Publier. Le formulaire est maintenant publié avec succès. Le formulaire est maintenant prêt à être intégré une page, à un modèle ou à notre choix. Je vais donc fermer ça. Voyons maintenant comment connecter PayPal à notre formulaire. 6. Se connecter à PayPal: Et bon retour. Il est donc temps de se connecter à PayPal pour que nous puissions afficher le bouton de peinture ici lors des dernières étapes. Alors, laissez-moi fermer ça. Et si nous ouvrons PayPal, vous ne vous êtes pas connecté au compte PayPal, connectez-vous au compte PayPal ici. Allez-y et cliquez ici. Et il s'ouvrira dans un nouvel onglet. Elle sera redirigée vers la zone Paramètres du formulateur, elle sera directement dirigée vers l'onglet Paiements. Nous avons donc deux options : Stripe et PayPal. Connectons-nous au papier. En cliquant sur ce bouton, cette fenêtre contextuelle s' ouvrira. Et comme vous pouvez le constater, entrez vos clés d'API Rest PayPal pour vous connecter à votre compte. Vous pouvez créer une application API Rest. Ici, comme vous pouvez le constater, formulé nous facilite vraiment les choses en tant qu'utilisateurs. Et c'est une bonne chose. Allez-y et cliquez ici pour récupérer les informations d'identification seront redirigées vers un nouvel onglet. Cela signifie donc que vous devez disposer d'un compte PayPal. Nous y voilà. C'est ici que nous obtiendrons nos informations d'identification. Je dois me connecter à mon tableau de bord. Je vais donc cliquer sur Connexion au tableau de bord. Si vous n'avez pas de compte développeur PayPal, vous devez en créer un. Je n'ai pas mis mon identifiant de mot de passe. Et il a juste besoin de vérifier si c'est moi. Bien sûr, je vais cliquer sur Oui. Et c'est pour des questions de sécurité. Vous pouvez donc obtenir cette invite ou non si vous fournissez ce qui est nécessaire. Remplace. Nous sommes déjà à l'intérieur. Comme vous pouvez le constater, mes applications et mes informations d'identification. Nous avons un bac à sable et nous avons un live. Et si je peux revenir à l'intérieur de cette zone, dans mon tableau de bord sur l'onglet WordPress, nous avons l' ID client sandbox et le secret sandbox. Ensuite, nous avons l' ID client en direct et le secret en direct. Donc, en entrant ici, nous avons le bac à sable et nous vivons. Commençons donc par les informations d'identification de sandbox. Ce que je dois faire, c'est simplement cliquer sur Créer une application, lui donner un nom. Par exemple, une nouvelle application. Ensuite, nous avons ces deux types ici. À choisir parmi. Acceptez les paiements en tant que marchand, vendeur, déplacez les paiements pour nous vendre en tant que plateforme, bien sûr, nous devons accepter les paiements en tant que vendeur. Comptes commerciaux Sandbox. Je vais donc créer une application. identification vous seront présentées . Maintenant, ce dont nous avons besoin, c'est de saisir cet ID client. Et maintenant, parce que cette nouvelle application que j'ai créée, ce n'est pas une vraie entreprise, je ne me connecterai pas à cela. Je vais simplement cliquer sur mes abdos et mes identifiants car je veux utiliser cette application que j' ai créée appelée Ken Visa. Mais vous pouvez utiliser l'application que vous venez de créer. Et je vais me connecter à ça avec mon papier sorti. Nous avons donc maintenant la carte d'identité de mon client. Je vais donc sélectionner mon identifiant client ici. Je vais le coller là-dedans. Ensuite, je montrerai mon secret. Vous pouvez générer un nouveau secret, mais j'utiliserai celui que nous avons déjà généré. Je vais le mettre dans leur bac à sable secret. Et la prochaine chose que nous devons faire est de cliquer à nouveau sur Mes applications et les informations d'identification. Il suffit de cliquer sur Précédent pour revenir en arrière pour sélectionner le mode live. Je vais donc sélectionner en direct parce que nous venons de choisir un bac à sable. Et je vais sélectionner à nouveau le visa Ken car c'est l' entreprise que je voulais connecter PayPal pour sélectionner mon identifiant client. C'est le Live ID maintenant. Nous allons donc le placer dans l'ID client en direct. Et le secret. Assurez-vous de ne le montrer à personne. Collez-le là-dedans, puis cliquez sur Connecter. Maintenant, nous sommes connectés comme vous pouvez le voir. Et si vous souhaitez vous déconnecter, vous pouvez toujours vous déconnecter ici. Par conséquent, enregistrez les paramètres. Les paramètres de paiement ont maintenant été enregistrés avec succès. Et en gros, c'est comment connecter le formulateur au papier. Dans la leçon suivante, Voyons comment configurer le champ de paiement PayPal sur notre formulaire de formulateur. Je vous verrai bientôt. 7. Configurer le champ de formulaire PayPal: Et bon retour. Dans la leçon précédente, nous venons de voir comment se connecter à PayPal. Voyons comment configurer le champ du formulaire de paiement PayPal sur notre formulaire formulé. Je retourne à l'intérieur des formulaires. La première chose que vous remarquerez est que nom de notre formulaire n'a pas été mis à jour avec le nouveau nom. Nous avons changé les deux lors de la modification du formulaire et c'est parce que nous avons publié le formulaire avec les nouvelles modifications. Allons donc à l'intérieur et modifions. Et bien sûr, c'est ici que nous avons changé le nom du formulaire, mais maintenant en faisant défiler vers le bas, rappelez-vous que nous avons ajouté le bouton PayPal et lorsque nous avons cliqué dessus, nous avons eu un message d'erreur avant de nous connecté au papier. Maintenant, ce message n'est nulle part où être vu ici. La première chose à faire est donc de définir une devise. Alors, allez-y et dites votre devise, je laisserai ça en dollars. Notre montant n'est donc pas fixe. Il est variable, cela dépend des champs sélectionnés par l' utilisateur. Nous devrons donc sélectionner une variable, mais maintenant nous n' avons pas encore de variable. Nous devons sélectionner un champ qui affichera le montant total d' argent qu'ils utilisent une maison pour payer en fonction des champs sélectionnés. Et je vais vous montrer comment ajouter ce champ. Tout d'abord, fermons cela et prévisualisons notre bouton PayPal. Je vais donc sélectionner ce commerce électronique. Que se passe-t-il ? Laissez-moi choisir ce blog personnel. Non, ensuite. Laisse-moi juste y aller. Prochaine. Nous avons maintenant un bouton PayPal Checkout ici. Et quelqu'un peut également payer avec une carte de débit. Mais maintenant, allons de l'avant et insérons le champ qui montrera combien d'argent le client doit payer. Et c'est ce qu'on appelle les entrées de calcul. Je vais donc sélectionner les calculs, insérer des champs. Alors, bien sûr, donnons peut-être une étiquette différente. Le montant total de la facilité. Passons à l'intérieur des calculs et c'est ici que nous allons créer une formule simple pour calculer le montant total. Et bien sûr, la formule simple consiste à ajouter l' option choisie par la personne sur chaque champ. Ce que nous devons donc faire, c'est sélectionner les différents domaines dont nous avons besoin ici. Par exemple, le premier champ, site Web YS, c'est là que nous avons une option. Permettez-moi de fermer ça une seconde. Nous avons le site Web et nous les hébergeons. Ils ont une option là-bas. Partout où il existe une option qui implique de l'argent. Nous aurons la possibilité de sélectionner ce sélecteur. Nous avons donc un nombre de pages, paiements activés et tout cela. En revenant à l'intérieur des calculs, des calculs, nous avons un site Web. Ensuite, quelle que soit l'option choisie dans le champ du site Web elle doit être ajoutée à la sélection d'hébergement qu'ils effectuent. Et cela devrait être ajouté au nombre de pages qu'ils sélectionnent. Et cela devrait être ajouté à l' option de paiement activée qu'ils sélectionneront. Voici donc notre formule. Choix des sites Web. Le dernier choix d'hébergement, le nombre de pages et les paiements activés. Et ensuite, appliquons cela. Maintenant que nous avons ces calculs, placez-les au-dessus du bouton PayPal, juste en dessous du nom et de l'e-mail. Maintenant, en passant à l'intérieur de la variable papier, sélectionnons les calculs et appliquons là. Ces deux-là sont connectés. Maintenant, PayPal acceptera le paiement du montant que le film de calcul montrera. Donc, si nous passons à l'intérieur de la revue, par exemple, sélectionnez une boutique de commerce électronique. Disons que nous n'avons pas besoin d'hébergement. Supposons ensuite que nous ayons besoin de dix pages. Est-ce que nous avons besoin d'une option de paiement ? Oui. Disons PayPal. Vous n'avez pas de remarques. Et puis les calculs montrent que nous devons payer 131$, disons PayPal Checkout. Et il commence à ouvrir notre journal. Si vous possédez un compte PayPal, si un client possède un compte PayPal, il peut se connecter et effectuer le paiement. Ils peuvent cliquer sur carte de débit ou de crédit. Maintenant, ils peuvent entrer tous leurs détails ici et payer maintenant sur papier, ce message d'erreur s'est affiché parce que j'ai conseillé la fenêtre contextuelle papier qui s'affichait. C'est simplement pour nous dire que le processus de paiement n' a pas été terminé. L'utilisateur a interrompu le processus de paiement PayPal. Alors, laissez-moi fermer ça. Maintenant que cette configuration, je clique sur mettre à jour. Notre formulaire est maintenant prêt à être affiché sur le frontal de notre site Web. En d'autres termes, sur notre page Web. Alors, comment afficher ces formulaires en frontal ? Je vais le faire dans la prochaine leçon. Je vous verrai bientôt. 8. Afficher le formulaire sur la page Web: Et bon retour. Maintenant que notre formulaire est prêt à être affiché en première ligne sur une page Web. Comment pouvons-nous le faire ? Je voulais vous montrer deux méthodes. L'un d'eux utilise la méthode de code court WordPress par défaut, et l'autre utilise un constructeur de pages comme Elementor. Commençons par une méthode WordPress intégrée. allons donc à l'intérieur des pages parce que nous l'affichons sur une page Web. Parce que j'ai mentionné qu'il s'agit d'une toute nouvelle installation de WordPress. Ce sont les deux pages par défaut qui viennent avec chaque nouvelle installation de WordPress, je veux créer une nouvelle page, donc en ajouter une nouvelle. Bien, donnons-lui un nom. Supposons donc qu'il s'agisse de la page de service ou quelque chose de ce genre. Et parce que nous utilisons les outils WordPress intégrés, je clique sur Ajouter pour ajouter un bloc. Et ici, je vais taper court. code court apparaîtra ici. Je vais donc simplement sélectionner un code court. Et maintenant, nous devons écrire un court code ici. Je cliquerai donc avec le bouton droit de la souris pour ouvrir ce lien dans un nouvel onglet afin de ne pas fermer cette page. Nous devons récupérer un code court dans le formulaire de formulation que nous avons créé. Allons dans ce nouvel onglet. Je vais entrer dans les formulaires de formulation. Bien sûr, c'est notre forme. Ce que je dois faire, c'est cliquer sur cette roue dentée ici. La deuxième et la deuxième option seront copiées en code court. Je l'ai copié juste au cas où vous seriez déjà dans le formulaire. Vous pouvez également accéder à cette roue dentée et copier le code court. Maintenant, permettez-moi de revenir à notre onglet où nous avons le bloc de code court et le coller là-dedans. C'est ça. Ensuite, publions la page. Publiez-le. Voyons la page. Il y a notre page et notre formulaire s'affiche correctement ici. Cela fonctionne comme d'habitude. Nos contrôles fonctionnent car, comme vous pouvez le constater, avant que nous puissions passer à l'étape suivante, le formulaire effectue les vérifications et s'il y a quelque chose de mal, il nous en informe. Laissez-moi simplement choisir ça. Non. Ensuite, ils n'ont pas de chèques. Il y a notre bouton papier. Nous allons choisir le papier. Maintenant, quelqu'un peut se connecter et terminer son paiement de 15$. N'oubliez pas que j'ai mentionné que ce message d'erreur s'affiche parce que nous avons fermé ce processus de paiement avant de le terminer, avant qu'il ne soit terminé. Nous pouvons également cliquer sur la méthode de carte de débit ou de crédit. Les détails apparaîtront ici et nous pourrons terminer notre paiement. C'est la première méthode. En revenant dans notre tableau de bord, je veux vous montrer la deuxième méthode utilisant Elementor. Donc, en gros, c'est similaire car nous allons toujours utiliser un élément de code court. Mais bien sûr, je ne veux pas supposer que tous ceux qui regardent ce cours ont déjà utilisé le mentor. Je voulais juste m' assurer que tout le monde soit couvert. Allez donc à l'intérieur des plugins. Je veux en ajouter un nouveau. Nous devons ajouter Elementor, créateur de site Web Elementor, et l'installer maintenant. Très bien, laissez-moi l'activer. Il s'agit de la configuration, c'est le nouvel assistant de configuration Elementor, donc nous devons le parcourir. Je veux juste que nous gardions ça. Sautez ça. Je ne veux pas sélectionner de thème. Je ne veux pas donner de nom au site pour l'instant, car c'est à titre d' illustration. Je ne veux pas ajouter le logo. J'ai sauté tout ça. Très bien, nous pouvons donc choisir de modifier un canevas vierge avec Elementor Editor. Je vais donc cliquer dessus. Ici, nous sommes en train de modifier notre page. Donc tout ce que je dois faire pendant que je suis sur cette page ici avec cette édition avec Elementor Editor disponible. Je vais entrer dans ce widget de recherche et chercher brièvement. Dans automatiquement, un élément de code court apparaît, mais nous devons ajouter une section, donc je clique dessus. Ensuite, j'ajouterai peut-être une section à deux colonnes. Non, peut-être ajoutons une section à colonne unique, une seule colonne. Et là, nous l'avons. Maintenant, dès que nous l'ajoutons, il affiche les paramètres de la section. Mais ce n'est pas ce que nous voulons. Nous voulons ajouter le code abrégé. Je clique sur cette icône Eléments pour faire apparaître les éléments. Une fois encore. Je vais taper des éléments de code court et court seront l'une des options. Je vais le déposer là-dedans. Et maintenant, nous avons un champ pour entrer notre code abrégé. Je reviendrai donc à notre formulaire de l'autre. Sur cet autre onglet, je vais cliquer sur ce code court de carpe à crémaillère. Retournez ici, et je vais le coller ici. Ensuite, je publierai la page. Le post est en direct. Prévisualisons. Nous l'avons là. Deuxième méthode sur la façon d'afficher juste au cas où vous utiliseriez Elementor Is your page builder. Voici donc comment afficher le formulaire dans le front-end. Et maintenant, je suis presque sûr que vous vous demandez, et si je veux changer les couleurs ? Que se passe-t-il si je ne veux pas cette bordure sur les champs d'entrée ? Que se passe-t-il si je veux changer le nom de cette page 1, la page deux, de la page trois. Comment puis-je faire cela ? Dans la prochaine leçon, nous verrons comment modifier l'apparence ou le formulaire en fonction des couleurs de votre marque. Alors, à bientôt. 9. Personnalisez la pagination de la forme: Nous sommes donc de retour dans notre tableau de bord. Nous voulons maintenant modifier l' apparence de notre formulaire. Et pour ce faire, nous devons aller dans l'onglet Apparence. Et vous remarquerez en faisant défiler, c'est la prochaine étape après avoir ajouté tous les champs dont nous avons besoin. Nous pouvons donc cliquer sur ce bouton ou sur ce bouton ici, et nous allons accéder à l'onglet Apparence. Mais avant de le faire, je veux modifier ces titres ici pour lire quelque chose de différent, comme la deuxième étape ou tout ce que vous voulez qu'ils disent au lieu de la première page, de la deuxième page, de la page trois. Nous changeons donc cela en entrant dans la pagination ici. Cliquez donc sur ça. Et lorsque nous ouvrons cette fenêtre contextuelle, vous remarquerez en premier lieu les quatre étapes de notre forum. Nous pouvons donc modifier ces deux étapes. Première étape, deuxième étape, troisième étape. Et puis complétez ou tout autre chose que vous vouliez sauver. Voyons à quoi ça ressemble. Appliquer. Et prévisualisons les modifications. Maintenant, il passe à la première étape, deuxième étape, à la troisième étape et à la fin. Fermons ça. Voyons ce que nous pouvons faire d'autre concernant notre formulaire. Aller à l'intérieur des paramètres. Nous pouvons passer des étapes à une barre de progression. Cela signifie que nous n' aurons pas la première étape, deuxième étape, la troisième ou la quatre, en sélectionnant la barre de progression, elle continuera simplement à remplir jusqu'à la fin. Appliquons cela et voyons à quoi cela ressemble. Cliquez sur Aperçu. Maintenant, c'est à quoi cela ressemble et il ne cesse de se remplir nulle part à vingt-cinq pour cent. Si nous passons à l'étape suivante, nous sommes à 5075, 100 %. Je retourne à l'intérieur. Voyons ce que nous avons d'autre au pied de page. Nous pouvons modifier ce que disent les boutons des étapes de nos formulaires. instant, nous avons Suivant à la première page, nous avons le bouton Suivant. Sur la page deux, nous avons le bouton Précédent et Suivant, la page trois, les boutons Précédent et Suivant. À la page quatre, nous n'avons le bouton précédent car nous n'avons pas de bouton suivant, nous n'avons que le bouton PayPal. Vous pouvez changer ce que vous voulez dire. Je fermerai ça, je mettrai à jour le formulaire parce que nous l'avons mis à jour. Allons au front end et rafraîchissons la page. Je vais donc toucher Control R ou simplement recharger. Notre formulaire a maintenant été mis à jour. Très bien, c'est donc comment modifier les étapes du formulaire. Voyons ensuite comment modifier l' apparence réelle du formulaire, comment modifier les couleurs des différentes entrées et de ces barres de progression ici et les boutons Voir dans la prochaine leçon. 10. Personnalisez l'apparence de la forme: Air, bienvenue. Il est maintenant temps de travailler sur l'apparence des forums. Allons donc inciter directement à l'apparence. Je vais cliquer dessus. Et comme vous pouvez le constater, nous sommes à l'intérieur de l'apparence. Le premier changement que vous pouvez apporter ici est le style de design. Et nous avons ici quelques styles de design parmi lesquels choisir. La valeur par défaut comporte une bordure. Ensuite, nous avons un plat qui n'a pas de frontière. C'est celui que j'aime bien. Mais regardons le tableau des autres et ensuite aucun. Vous les sélectionnez donc si vous souhaitez utiliser un CSS personnalisé. Donc, si vous savez coder vos propres styles de formulaire, vous pouvez simplement l'activer et commencer à le coiffer vous-même. Mais parce que je veux supposer que tout le monde ne suivra pas ce cours et sait comment travailler avec, voir comment écrire code CSS n' ira pas dans cette direction. Nous reviendrons à plat parce que je l'aime bien sans ce quartier. Et ensuite, la partie suivante est celle des couleurs. ce moment, nous utilisons les couleurs par défaut, mais nous pouvons passer aux couleurs des costumes. C'est ici que nous pouvons modifier tous les aspects de notre formulaire. En entrant ici, nous avons des couleurs de bordure, nous avons les couleurs des boutons. Allez à la précédente, précédente. Allons-y. Vous remarquerez que nous avons le conteneur de formulaires. Il s'agit du conteneur qui contient le formulaire lui-même. le moment, c'est invisible, mais nous n'avons pas besoin d'y toucher. En ce moment. J'aimerais me concentrer sur les pièces dont nous avons réellement besoin. Par exemple, le bouton Suivant, le bouton Suivant, ce bouton ici. Nous allons donc choisir une nouvelle couleur pour cela. Disons, par exemple, un peu de couleur aqua ou disons vert. Disons une couleur verte en survol. Nous voulons y arriver. Je dirais, disons cette orange. Copions ça. Parce que non concentré, nous voulons aussi en faire cette couleur. Généralement, les couleurs de survol et de mise au point sont généralement les mêmes que cela. Maintenant, si nous mettons à jour cela et accédons à notre formulaire et actualisez la page. Maintenant, il y a un vert et en vol stationnaire, c'est orange. Ensuite, nous voulons modifier le bouton Précédent. En d'autres termes, les boutons précédents. Donc, si nous passons à la page suivante, nous voulons maintenant modifier le bouton précédent. Nous pouvons donc simplement copier ces valeurs. Copiez cela, allez dans le bouton Précédent, cliquez dessus, collez-le là-dedans. s'est effondré qui élargit ça. Retournez la boîte de couleurs ici. Copiez ça. Laissez-moi faire défiler ici. Et survolez. Je voulais être orange et non concentré. Nous voulons aussi que ce soit orange. Mettez à jour cela. Maintenant, si nous actualisons cette page, sélectionnez puis passez à la page suivante. Les deux sont maintenant cohérents. Donc, si ce sont les couleurs de votre marque, vos boutons de formulaire correspondent maintenant aux couleurs de votre marque. Alors, comment modifier la couleur de cette barre de progression ? En revenant ici, réduisons le bouton Retour et le bouton suivant. Ensuite, nous avons une barre de progression. Voyons la page barre de progression de la nation. Ici, nous pouvons changer la couleur. Disons que c'est vert. Je veux revenir ici et enregistrer le bouton ensuite. Cliquez dessus. Copions ça. Rampons ensuite jusqu'à la barre de pagination. Collez-le là-dedans. Entrez. Mettons-le à jour. Rafraîchissons ça. Maintenant, notre barre de progression correspond à la couleur verte de la marque de notre site Web. Non, blog personnel. Suivant. Suivant. Suivant. Nous ne pouvons pas modifier la couleur du bouton PayPal car elle provient directement du papier, pas de quatre minutes. Revenons ici et nous allons écrouler cette date. Nous l'avons déjà mis à jour, mais pas de problème, il suffit de le mettre à jour. Voyons ce que nous devons changer d'autre ? Passons à l'étape précédente. Pour l'instant. Ce sont les éléments que nous devions modifier sur notre formulaire. Mais bien sûr, comme vous pouvez le constater, nous avons différentes parties du formulaire que vous pouvez personnaliser jusqu'à ce que vous soyez satisfait de votre formulaire. Je vais quitter ces endroits. Vous jouez avec toutes ces parties ? Modifiez un paramètre ici, puis accédez à la première page et actualisez la page pour voir quelle partie a été affectée. Mais je suis très curieux de voir ce que vous pourrez trouver. Il s'agit de savoir à quel point vous serez créatif avec toutes ces parties. Vous pouvez également modifier les polices sur les différentes parties de votre formulaire en activant la modification personnalisée de vos polices. Et bien sûr, ouvrez chaque champ ou élément dans lequel vous souhaitez modifier les textes. Mais nous n'allons pas le faire car nous aimons déjà la police que nous utilisons car le formulaire hérite actuellement de la police définie sur le site Web. C'est comment personnaliser l' apparence de notre formulaire. 11. Définir le comportement de la forme: Bienvenue avec l'apparence de nos formulaires maintenant mise à jour pour correspondre aux couleurs de notre marque. Il est maintenant temps d' examiner le comportement après l'envoi du formulaire. Nous pouvons donc cliquer sur ce comportement ici ou faire défiler jusqu'en bas ici. N'importe lequel d'entre eux peut le faire, laissez-moi simplement cliquer dessus. Et bien sûr, vous remarquerez qu'il est automatiquement passé dans cet onglet. Et maintenant, le comportement de soumission permet de configurer ce qui doit se produire lorsqu'un utilisateur envoie ce formulaire. Après la soumission, nous pouvons sélectionner les comportements que nous voulons que le formulaire ait ici. Donc, si j'ouvre celui-ci qui vient par défaut, vous remarquerez que nous avons trois options ici. Comportement Nous pouvons avoir un message en ligne qui se trouve juste en dessous ou au-dessus du formulaire une fois l'utilisateur a envoyé le formulaire avec succès. Et je vais vous montrer à quoi ça ressemble. Nous pouvons également les rediriger vers une URL. Par conséquent, https, une fois qu'ils auront cliqué sur Soumettre et que le formulaire est correctement envoyé, ils seront redirigés vers Google. Nous pouvons également masquer le formulaire immédiatement après l'avoir envoyé et leur montrer un message, là où se trouvait le formulaire. Revenons donc à Inline Message. Et ici, nous avons une étiquette. Cette étiquette est uniquement visible ici même dans le tableau de bord pour nous permettre d' identifier le comportement spécifique. Parce qu'il peut avoir des paramètres différents d' un comportement différent. Disons donc, par exemple, le forum de conception de sites Web. Et appliquons cela. Et le message se ferme automatiquement au bout de cinq secondes. N'oubliez pas que nous avons sélectionné Message en ligne. Merci de nous contacter, sera le message en ligne qui apparaîtra ci-dessus, sous notre formulaire. Et c'est l' étiquette que nous allons faire, nous allons l'identifier. Permettez-moi d'appliquer cela. Et maintenant, vous voyez que c'est ici. Seuls nous, comme les administrateurs peuvent le constater, que c'est ce qu'on appelle une entreprise de conception de sites Web. Donc, en revenant un instant dans notre domaine, je veux supprimer PayPal. Je veux supprimer les entrées papier pour qu'il nous reste un bouton d'envoi de message. Vous pouvez donc voir à quoi ressemble ce message de formulaire en ligne. avons donc mis à jour. Allons au front-end et rafraîchissons la page. Rechargez. Nous allons maintenant sélectionner ce blog personnel. Non. papier. Commentaire ici, max. Nous avons donc ce bouton d'envoi de message. Si nous ajoutons également un nom sur gmail.com et que nous payons 66$. Donc, si nous envoyons un message, c'est le comportement que nous avons sélectionné ici même dans notre comportement. Si nous ouvrons cela, merci de nous avoir contactés, nous vous contacterons sous peu. C'est le même message. Il a disparu au bout de cinq secondes parce que c'est ce que nous avons ici. Parce qu'il s'agit d'une vente, mais il s'agit d'un formulaire de vente. Nous pouvons avoir quelque chose comme merci pour votre achat et appliquer cela. Mettons à jour le formulaire. Allons-y. Allons au front end. Rafraîchissez la page. Maintenant, si je les sélectionne ici. Prochaine. Ensuite, Mike arrive et envoie un message. Nous vous remercions maintenant de votre achat. Et nous pouvons modifier cette couleur d' arrière-plan de la réponse en allant dans l'onglet Apparence. Succès de réponse. Changez-le pour peut-être ces oranges qui riment avec notre site Web ou peut-être disons ces couleurs verdâtres ici. Ensuite, mettons à jour cela. Maintenant, si nous revenons ici et rafraîchissons la page, rechargez-la. Prochaine. Si vous avez besoin d'un nom. Comme vous pouvez le constater, l'arrière-plan du message a changé. Le message a disparu au bout de cinq secondes. En gros, revenons à l'intérieur du comportement. Et il y a plus de paramètres ici comme méthode, voulons-nous utiliser des compléments pour envoyer ce formulaire sans recharger la page ou utiliser la méthode plus traditionnelle de rechargement de la page. Maintenant, je ne vais pas approfondir tous ces paramètres ici, mais je vous recommande de consulter la chaîne YouTube officielle de l'équipe de formulateurs. Il s'appelle WPA MU Dev. Voici le lien vers la chaîne. Découvrez-les et apprenez le plus possible sur les différentes façons dont vous pouvez travailler avec les formules. Il s'agissait uniquement de vous montrer comment créer ce formulaire et en faire un formulaire à plusieurs étapes. Nous ne pouvons donc pas entrer dans tous ces détails car cela signifierait que ce cours deviendrait trop long et ce n'est pas ce que nous voulons. Donc, en gros, c'est comment créer un formulaire. Laissez-moi juste aller au front-end. Voici donc à quoi ressemble le formulaire. Ce que nous avons fait, c'est comprendre comment créer les différents champs et comment créer plusieurs étapes permettant à l'utilisateur sélectionner différentes options en fonction de ce qu'il veut faire. Puis, enfin, faites leur achat. Bien sûr, ce n'est que le début du voyage. Pour en savoir plus, vous devez interagir davantage avec ce plugin. Et vous devez regarder autant de vidéos que possible sur les autres paramètres que nous n'avons pas étudiés. Au moins, vous avez appris à créer un formulaire à plusieurs étapes à l'aide du formulaire de formulation. Et comme vous pouvez le constater, nous avons ici plus d'options que nous n'avons pas explorées. Et la raison est que nous ne voulons pas nous écarter de l' objectif principal de la classe. Une fois que vous avez appris à créer ce formulaire, vous devez comprendre comment le placer sur une page Web magnifiquement conçue. Et j'ai plusieurs cours ici sur Skillshare qui vous montrent comment concevoir de belles pages de destination à l'aide d'Elementor. Vous pouvez donc utiliser ces compétences pour créer belles pages Web , puis utiliser les compétences que vous avez apprises dans cette classe pour ajouter formulaire à plusieurs étapes directement sur cette page. Je vous recommande donc de consulter mon profil et de voir les différents cours que j'ai eus là-bas et voir si vous pouvez en apprendre quelque chose sur Elementor et si vous avez des questions ou des commentaires, s'il vous plaît tapez juste en dessous cette vidéo dans l'onglet Discussions. Et je ne manquerai pas de vous répondre dès que possible. J'ai hâte de vous entendre jusqu'à la prochaine fois. La paix. 12. Outro: Et tout ça vient de moi aujourd'hui. C'est tout ce que j'ai pour vous dans cette classe. J'espère que vous avez appris à créer un formulaire en plusieurs étapes pour votre site Web WordPress. Et surtout, j'espère que vous avez appris comment les appliquer à votre site Web actuel. Et comme je l'ai mentionné plus tôt, vous pouvez aller de l'avant et vérifier tous les cours publiés ici sur Skillshare, ouvrir mon profil et voir quelle classe vous intéresse. Je vais vous apprendre à créer pages de destination impressionnantes et un site Web entièrement fonctionnel à l'aide de WordPress et Elementor. Sinon, pour l' instant, je dois dire au revoir et je vous verrai dans la prochaine pièce.