Intégration de l'application tierce de Forminator et comportement après la soumission

Publié: 2022-02-10

Notre plug-in de création de formulaires, Forminator, vous permet d'envoyer des données personnalisées à plusieurs applications telles que MailChimp, Google Sheets, etc. De plus, vous pouvez choisir ce qui se passe après qu'un utilisateur a soumis ses informations et créé des abonnements.

Il y a certaines fonctionnalités de notre plugin gratuit 5 étoiles Forminator dont vous n'êtes peut-être pas au courant. Cela inclut l'envoi de données à des applications tierces , le contrôle de ce qui se passe lorsqu'un formulaire est soumis et la configuration d'abonnements .

Vous pouvez également personnaliser votre formulaire pour que les utilisateurs accèdent à des zones spécifiquement demandées, déterminent le calendrier des abonnements, et plus encore !

Cet article est un petit Forminator 101 qui couvre la configuration de ces fonctionnalités et montre comment elles fonctionnent.

Image des applications dans Forminator
Il est facile d'envoyer des données aux applications et de choisir ce qui se passe après la soumission.

Nous verrons comment :

  • Envoyer conditionnellement des données aux applications
  • Inclure un comportement après la soumission
  • Inclure un bouton d'abonnement avec MailChimp
  • Laisser l'utilisateur choisir la fréquence d'abonnement
  • Ajouter plusieurs comportements après la soumission en fonction de la sélection

Vérifions ces fonctionnalités ! Nous allons commencer par…

Envoyer conditionnellement des données aux applications

Au cas où vous ne le sauriez pas, Forminator est depuis longtemps capable de s'intégrer à des applications tierces. Cependant, vous pouvez maintenant spécifier où envoyer les données sur les formulaires.

Il est facile à mettre en œuvre et à configurer. Vous pouvez le faire avec un nouveau formulaire ou un ancien. (Si vous avez besoin d'aide pour configurer un formulaire, consultez cet article.)

Synchronisation des applications tierces

Tout d'abord, vous devez vérifier quelles applications tierces vous souhaitez connecter à Forminator. Cela peut être fait à tout moment pendant le processus ; cependant, abordons cela tout de suite.

Rendez-vous simplement sur Intégrations dans le tableau de bord de Forminator. Cela affichera toutes les applications tierces disponibles et vous montrera ce que vous avez actuellement connecté.

Une vue de toutes les intégrations disponibles.
Dans cet exemple, nous avons connecté Zapier et Google Sheets.

Vous pouvez également voir ce que vous avez connecté à Forminator à partir de la section Modifier le formulaire et Intégrations . Cela vous montrera uniquement vos intégrations connectées.

Les applications connectées.
Vous pouvez également voir que Zapier et Google Sheets sont connectés ici.

Quel que soit l'endroit où vous connectez les applications tierces, c'est simple à faire. Et si vous avez besoin d'aide, nous avons une documentation détaillée qui couvre toutes les applications tierces (il y en a plusieurs !) et comment les intégrer à Forminator.

Envoi de données de formulaire conditionnel

Maintenant que votre extension tierce est configurée, connectons-la à un formulaire afin que lorsqu'un utilisateur soumet des informations, elles soient dirigées vers une application spécifique.

Nous allons simplement configurer un formulaire de base avec les champs Nom , E- mail , Téléphone et Adresse .

Une vue des champs du formulaire.
Ce formulaire ne contiendra que les informations de base pour les besoins de cet exemple.

Maintenant, nous allons passer aux intégrations pour déterminer à quelle application tierce nous voulons que les données de soumission soient envoyées.

En accédant à cette section de l'éditeur de formulaires, vous verrez les intégrations que j'ai configurées, appelées Applications . Dans cet exemple, j'ai Google Sheets et Zapier comme applications connectées.

Zone d'applications dans Forminator.
Vous pouvez voir Google Sheets et Zapier comme options, avec un lien ci-dessous vers la page Intégrations pour connecter plus d'applications, si nécessaire.

Disons que nous voulons UNIQUEMENT que les données des soumissions de formulaires soient transmises à Google Sheets. Dans ce cas, il vous suffit de cliquer sur le signe plus (+) de Google Sheets.

Le signe plus pour Google Sheets.
Le signe plus vous permet de démarrer.

Il vous invitera ensuite à créer un nom de configuration pour identifier rapidement l'intégration.

Où vous configurez le nom Google Sheets.
Ajoutez n'importe quel nom que vous voudriez.

Puisqu'il s'agit de Google Sheets, j'ai configuré une feuille de calcul en fournissant l' ID du dossier Drive et en lui donnant un nom. Vous pouvez également laisser l'ID de dossier Drive vide et une nouvelle feuille de calcul sera créée dans votre dossier racine Google Drive.

Où vous créez une feuille de calcul.
Il vous explique également comment obtenir les informations.

Une fois connecté, il sera désormais dans la catégorie des applications actives .

Vue des applications connectées.
Vous pouvez voir que Zapier est toujours là aussi, mais uniquement en tant qu'application connectée.

Cliquez sur l' icône d'engrenage à côté de l'application. Forminator ouvrira alors une fenêtre contextuelle où vous pourrez le configurer.

Sur quoi vous cliquez pour ouvrir la feuille de calcul actuelle.
Cliquer ICI ouvrira la feuille de calcul.

Un nouvel onglet (dans cet exemple, votre feuille de calcul Google) s'ouvrira.

Ajout de conditions

Vous souhaitez que des informations soient transmises à votre application tierce si des critères spécifiques ne sont pas remplis ? Vous avez un contrôle total sur ce qui franchit les portes en ajoutant des conditions .

Accédez-y facilement en cliquant, vous l'avez deviné – Conditions .

Le bouton Conditions.
Un clic vous amènera à une zone pour modifier les conditions.

Ajoutez des conditions pour déterminer si les données seront envoyées à l'application lorsque certaines conditions ne sont pas remplies. Cela commence comme une table rase…

Où vous ajoutez des conditions.
Ajoutez toutes les conditions dont vous avez besoin.

… et ajoutez maintenant toutes les conditions que vous souhaitez. Ils sont tous basés sur les champs que vous avez implémentés sur le formulaire.

Où vous configurez les conditions dans Forminator.
Dans cet exemple, le nom et l'e-mail sont nuls.

La personnalisation de ce qui se retrouve sur l'application tierce dépend entièrement de vous.

Pour plus d'informations sur les conditions, assurez-vous de consulter notre documentation et continuez à lire ci-dessous.

Une fois que les conditions de vos formulaires sont définies, modifiées et prêtes à l'emploi, appuyez simplement sur Publier - et c'est tout ! Vous pouvez revenir en arrière et modifier les conditions, ajouter une nouvelle application tierce et bien plus encore à tout moment.

Le formulaire en action

Maintenant que notre formulaire est configuré, vérifions-le !

Voici le formulaire créé dans Forminator :

Une image d'un exemple de formulaire.
Celui-ci présente un personnage fictif nommé Bob.

Après avoir saisi les informations, j'ai cliqué sur Envoyer un message. Et comme vous pouvez le voir, les informations exactes sont maintenant sur ma feuille Google.

Informations dans la feuille de calcul de Forminator.
Toutes les informations sont là instantanément !

Encore une fois, cet exemple utilise Google Sheets, alors gardez à l'esprit que les autres applications seront différentes. Cependant, cela vous donne un aperçu de la façon dont cela fonctionne pour déterminer ce qui se retrouve sur vos applications tierces synchronisées avec Forminator.

Comportement après la soumission

Ah tiens toi bien ! En fait, Forminator se comporte plutôt bien, grâce à After Submission Behavior .

Décider ce qui se passe lorsqu'un utilisateur soumet un formulaire peut être configuré en quelques clics.

Tout se trouve sous l'onglet Comportement lorsque vous modifiez un formulaire. Le comportement de soumission commence par un message en ligne que vous pouvez personnaliser. C'est ce qui apparaît aux utilisateurs après avoir soumis un formulaire avec succès.

La zone Comportement de soumission.
Vous pouvez ajouter n'importe quel message que vous souhaitez.

Lorsque vous cliquez sur l'icône d'engrenage - ou n'importe où - dans la barre de message en ligne, vous pouvez apporter des modifications détaillées au comportement dans la zone Après la soumission .

Un message de remerciement pour après la soumission.
Un bon message de remerciement est généralement approprié.

Étiquetez le comportement afin que vous sachiez exactement de quoi il s'agit. Vos utilisateurs ne le verront pas.

Un exemple d'étiquette
Nous l'appellerons simplement "exemple d'étiquette".

Il existe maintenant des options pour choisir ce qui se passe. Si vous souhaitez conserver votre message en ligne, ajoutez le message de votre choix dans l'onglet Message en ligne. De plus, décidez combien de secondes le message reste jusqu'à ce qu'il disparaisse.

Un exemple de message en ligne.
Ce message restera affiché pendant cinq secondes.

Si vous souhaitez rediriger l'utilisateur vers un lien, cela se fait à partir de l'onglet Rediriger l'utilisateur vers une URL .

Vous avez des options pour rediriger sur le même onglet, rediriger sur un nouvel onglet et afficher un message de remerciement sur la page de formulaire, et rediriger sur le nouvel onglet et masquer le formulaire sur la page de formulaire.

URL de redirection
Toutes les options de redirection sont dans la liste déroulante.

Le formulaire se cachera après les soumissions avec Hide Form , et un message personnalisé apparaîtra pour l'utilisateur.

Le message de masque de formulaire.
Là encore, vous pouvez personnaliser le message.

Décidez quelle méthode d'envoi de ce formulaire vous souhaitez utiliser, entre Ajax (sans recharger la page) ou Page Reload .

La sélection de la méthode Ajax.
Comme vous pouvez le voir, nous avons sélectionné Ajax ici.

De plus, choisissez votre méthode de validation . Vous décidez du comportement de la validation en sélectionnant Lors de la soumission ou Côté serveur.

Zone de validation dans Forminator.
La façon dont les champs sont validés dépend de vous !

Et enfin, avec l' indicateur de soumission , vous choisissez ce que vous voulez que la copie soit jusqu'à ce que le formulaire soit soumis. Ou, vous pouvez opter pour Aucun si vous ne souhaitez pas recevoir de message.

Indicateur de soumission.
L'ajout de "soumettre" est une valeur sûre lorsqu'un formulaire est soumis.

Il y a plus de réglages et d'options de personnalisation pour la soumission de formulaire (par exemple, remplissage automatique, sécurité, etc.). Vous pouvez en savoir plus sur ce que tout cela inclut dans notre documentation.

Inclure un bouton d'abonnement

Vous souhaitez qu'un utilisateur s'abonne à une newsletter hebdomadaire ? Avec Conditions, vous pouvez inclure une case d'abonnement qui peut être cochée pour ajouter un abonnement à Mailchimp.

Dans un formulaire, ajoutez le champ Consentement .

Le champ de consentement.
L'ajout du consentement vous aidera à démarrer.

Changez le texte en celui que vous voudriez dans la section d' étiquette . Dans ce cas, je mettrai Rejoignez notre newsletter hebdomadaire. Je vais également laisser les termes et conditions tels quels.

La section de la newsletter hebdomadaire.
Modifiez le texte comme vous le souhaitez. Assurez-vous simplement de cliquer sur Appliquer lorsque vous avez terminé.

Vous voudrez être sûr d'avoir Mailchimp comme intégration. Pour ce faire, ajoutez simplement la clé API de votre compte Mailchimp (si vous avez besoin d'aide pour le faire, assurez-vous de lire notre documentation).

La zone d'intégration Mailchimp.
Vous verrez que MailChimp est ajouté à vos intégrations lorsqu'il apparaît dans vos applications.

Une fois ajouté, sur le formulaire, lorsque vous cliquez sur Intégrations, vous verrez que Mailchimp est ajouté et un bouton Conditions . En cliquant dessus, vous commencerez.

Le bouton des conditions.
Toutes vos applications actives seront affichées ici.

Une nouvelle boîte apparaîtra où vous pourrez ajouter une condition . C'est ici que vous définissez les conditions d'envoi des données à l'application Mailchimp.

Le bouton ajouter des conditions.
La boîte Ajouter des conditions est prête à recevoir des informations ajoutées !

Vous aurez alors la possibilité de choisir parmi tous vos champs dans la liste déroulante. Cliquez sur le champ Consentement et assurez-vous que Condition est défini sur "Est" et que Statut est "Vérifié".

Configuration des conditions mailchimp.
Une fois que vous l'avez, cliquez sur Appliquer et mettre à jour le formulaire.

Une fois implémenté, votre formulaire aura la case à cocher ajoutée et les utilisateurs seront ajoutés à votre liste Mailchimp !

Une vue de la case à cocher sur le formulaire.
Il suffit de cocher la case pour qu'un utilisateur soit ajouté à votre liste.

Ensuite, vous pouvez ajouter des balises et organiser les nouveaux contacts en conséquence dans Mailchimp.

Très bien, il est temps de passer au niveau supérieur et…

Laisser l'utilisateur choisir la fréquence d'abonnement

Parfois, les utilisateurs peuvent ne pas vouloir une tonne d'e-mails. Alors, laissez-les décider de la fréquence d'abonnement !

Pour ce faire, incluez une liste déroulante qui permet à votre utilisateur de décider à quelle fréquence il souhaite recevoir son abonnement par e-mail.

Nous utiliserons l'exemple ci-dessus d'un bulletin d'information pour vous montrer comment c'est fait.

Tout d'abord, vous souhaiterez créer un nouveau champ pour votre formulaire que l'utilisateur pourra sélectionner. Utilisez le champ Sélectionner et ajoutez-le sous le champ de la case à cocher.

Vous pouvez voir que je l'ai étiqueté À quelle fréquence souhaitez-vous recevoir la newsletter ?

Le champ select-2.
Comme j'ai déjà une boîte de sélection, celle-ci s'appelle Select-2.

Il est important que votre audience soit configurée dans Mailchimp. Dans cette audience, nous allons créer deux nouveaux Tags . Dans ce cas, nous aurons Mensuel et Hebdomadaire. Voici à quoi cela ressemble dans le tableau de bord de Mailchimp…

Le public de Mailchimp.
Vous pouvez voir que j'ai configuré les balises mensuelles et hebdomadaires.

Nous ajouterons ensuite une autre intégration Mailchimp à partir du tableau de bord de Forminator.

Avec Forminator, vous pouvez ajouter plusieurs intégrations Mailchimp. De plus, gardez à l'esprit que vous n'avez besoin que d'UN SEUL compte Mailchimp pour ce faire !

J'en ai ajouté un appelé Forminator Test, et l'autre est Forminator Test 2.

Zone d'applications dans Mailchimp.
Nous avons maintenant deux comptes Mailchimp actifs configurés.

Maintenant que ces comptes sont configurés, il est temps de configurer chaque application Mailchimp, afin que nous puissions choisir sous quelle balise ils seront.

Ceci est rapidement accessible en cliquant sur l' icône d'engrenage à côté de chaque compte.

Les icônes d'engrenage dans Forminator.
Chaque compte a sa propre icône d'engrenage.

Une fois cliqué, choisissez l' audience de l'e-mail dans la liste déroulante. La liste déroulante contiendra toutes les audiences d'e-mail de votre compte Mailchimp.

Dans cet exemple, mon audience s'appelle Forminator .

Où vous choisissez une audience Mailchimp.
Une fois que vous avez choisi votre public, vous cliquerez sur "Suivant".

Lorsque vous cliquez sur "Suivant", vous avez la possibilité d'ajouter des balises. Tout comme avec votre audience, tous les tags que vous avez dans Mailchimp pour un compte apparaîtront dans la liste déroulante.

Balises Mailchimp.
Dans ce cas, j'ai Hebdomadaire et Mensuel.

Faites correspondre les champs de votre formulaire avec les champs de votre campagne pour vous assurer que les données sont envoyées au bon endroit.

Associez simplement les champs et vous serez prêt.

Nous leur ajouterons ensuite une Condition . Cela se fait comme nous l'avons fait avec l'option de case à cocher, où vous cliquez sur Conditions pour chacune et ajoutez ce qui doit se passer pour implémenter la balise.

Appliquez-en un pour Hebdomadaire et un pour Mensuel sous chaque application Mailchimp active pour Select-2 (il peut s'agir de Select-1 ou d'un autre numéro - selon le nombre de champs Select que vous utilisez dans votre formulaire) dans la zone Champ .

Possibilité de fréquence.
L'option Hebdomadaire et Mensuel apparaîtra dans cette liste déroulante.

Mettez à jour votre formulaire – et le tour est joué !

Vous pouvez voir qu'il existe maintenant une option permettant à l'utilisateur de déterminer la fréquence de cette newsletter.

Où un utilisateur peut choisir la fréquence de la newsletter.
L'utilisateur aura l'option dans cette liste déroulante.

Bien sûr, ce n'est qu'un exemple. Vous pouvez ajouter la fréquence de votre choix (par exemple, quotidienne, bimensuelle, etc.).

Ajouter des contacts aux groupes

Dans Mailchimp, vous pouvez créer des groupes . Les groupes sont utilisés pour trier vos contacts abonnés en fonction de leurs intérêts et préférences. Ils fonctionnent de la même manière que les catégories et permettent de gérer divers contacts au sein d'un même public.

Lorsqu'un utilisateur s'inscrit sur un formulaire Forminator, vous pouvez automatiquement ajouter cet utilisateur à un groupe. C'est simple et facile à faire !

Créez (ou utilisez un groupe existant) dans Mailchimp à partir de votre section Audience pour commencer . Vous pouvez voir un aperçu plus détaillé de la façon de procéder avec leur documentation ici.

J'ai créé un groupe appelé Forminator Form .

La zone des groupes de Mailchimp.
Tous vos groupes seront répertoriés dans votre zone d'audience.

Dans ce groupe appelé Forminator Form, vous pouvez ajouter des cases à cocher . Il s'agit de séparer les catégories. Ainsi, dans cet exemple, j'ai créé des cases à cocher pour Mobile et Laptops . C'est ainsi que je peux séparer les utilisateurs dans la catégorie qui les intéresse.

Espace groupes à Forminator.
Vous pouvez afficher les cases à cocher directement sous le nom de votre groupe.

Maintenant que nous sommes tous installés dans Mailchimp, nous pouvons retourner dans Forminator.

Tout d'abord, voici ce que j'ai sur mon formulaire :

Êtes-vous intéressé à voir nos 10 ordinateurs portables les plus vendus ?

Êtes-vous intéressé à voir notre top 10 des mobiles les plus vendus ?

Chacun a une option de OUI ou NON. J'ai aussi la case à cocher toujours là pour rejoindre la newsletter.

L'intérêt de l'utilisateur.
L'intérêt appartient à l'utilisateur.

Dans le backend de Forminator, nous pouvons configurer cela pour qu'un utilisateur soit placé dans le groupe qui l'intéresse, et il sera ajouté à ce groupe Mailchimp et à cette case à cocher.

Accédez à Intégrations dans Forminator, puis cliquez sur Configurer l'application (icône d'engrenage) sur la première application Mailchimp active. De là, vous cliquerez sur Groupes Mailchimp . C'est ici que vous sélectionnez la catégorie de groupe que vous souhaitez utiliser.

Section Groupes Mailchimp.
Dans cet exemple, j'ai deux groupes différents à sélectionner.

Vous vérifiez également quel (s) intérêt(s) vous voulez que ce soit. Dans ce cas, c'est un choix entre les ordinateurs portables et mobiles.

Case à cocher indiquant l'intérêt pour les ordinateurs portables.
Incluez autant d'intérêts que vous le souhaitez !

Effectuez cette étape pour chaque application Mailchimp active. Ensuite, cliquez sur Suivant, attribuez des champs, puis vous n'avez plus qu'à vous assurer que vos conditions sont correctement configurées.

Cliquez sur le bouton Conditions à côté de l'application active Mailchimp. Définissez ensuite les conditions sur Envoyer si toutes les conditions sont remplies. Vous aurez alors le champ défini sur Select-1 - ou dans ce cas, Intéressé par.

Par exemple, vous allez configurer une condition pour les ordinateurs portables, puis une autre pour les mobiles. Vous pouvez voir ci-dessous que la condition est définie sur "Est" et "Mobile".

Les deux intérêts dans Forminator.
Une fois que vous êtes prêt, cliquez sur "Terminé" et vous serez prêt.

Et c'est tout! Désormais, lorsqu'un utilisateur s'inscrit et est intéressé par une fonctionnalité spécifique, il sera ajouté au groupe dans Mailchimp.

Une chose à garder à l'esprit est de vous assurer que vos groupes sont configurés dans Mailchimp AVANT de configurer la fonctionnalité de groupes dans Forminator. Si tu le fais après, c'est bon. Il vous suffira de désactiver le formulaire, puis de le réactiver pour que Forminator sache que vous avez ajouté des groupes à votre audience.

Ajouter plusieurs comportements après la soumission en fonction de la sélection

Nous avons déjà couvert le comportement après la soumission. Cependant, nous allons pousser les choses un peu plus loin.

Que se passe-t-il si vous souhaitez qu'un utilisateur soit redirigé vers un site Web spécifique lors de la soumission - en fonction de sa sélection ? C'est possible de le faire.

Nous utiliserons notre formulaire ci-dessus avec des ordinateurs portables et des appareils mobiles comme exemple. De cette façon, si un utilisateur est plus intéressé par les mobiles, il peut le rediriger vers un site mobile après soumission. De même, s'ils sont intéressés par les ordinateurs portables, il peut les rediriger vers une URL d'ordinateur portable.

Dirigez-vous vers Comportement dans Forminator et, pour cet exemple, ajoutez des comportements pour les meilleurs ordinateurs portables et les meilleurs mobiles.

Après les comportements de soumission.
Tout comportement après soumission que vous avez configuré apparaîtra ici.

Ensuite, sous chaque comportement (par exemple Top ordinateurs portables), sélectionnez Rediriger l'utilisateur vers une URL et ajoutez un lien. Choisissez également une option de redirection (par exemple, nouvel onglet).

Le lien vers lequel rediriger.
Celui-ci est configuré pour rediriger sur le même onglet.

Accédez à l'onglet Conditions du comportement et définissez-le pour le champ Radio (avec votre texte personnalisé), et la condition est "EST" et "OUI" (voir ci-dessous).

Rendre la condition "oui".
Cliquez sur "Terminé" lorsque vous avez tout configuré.

Faites la même chose pour la catégorie suivante (dans ce cas, Top Mobiles) - et c'est tout ! L'utilisateur sera redirigé vers sa sélection une fois qu'il aura soumis le formulaire.

Évidemment, vous pouvez étiqueter les catégories comme vous le souhaitez, au lieu de mobiles et d'ordinateurs portables. Appliquez simplement les étapes que nous avons couvertes et vous êtes en affaires.

Préparez-vous à la (3e) fête

Comme vous pouvez le voir, l'implémentation tierce de Forminator et les paramètres de comportement après la soumission peuvent être extrêmement utiles pour collecter des informations, décider de ce que vos utilisateurs voient et gérer les formulaires.

De plus, cela facilite la gestion et l'organisation des soumissions de vos utilisateurs dans des applications comme Mailchimp, avec des groupes personnalisés, des options d'abonnement, etc.

Si vous souhaitez en savoir plus sur Forminator, n'oubliez pas de consulter notre article Tirer le meilleur parti de Forminator. Et si vous n'avez pas Forminator, essayez-le aujourd'hui. C'est gratuit !

L'intégration d'applications tierces à vos spécifications vaut la peine d'être célébrée ! Commencez à utiliser des applications avec Forminator dès aujourd'hui.

Avez-vous intégré Mailchimp ou toute autre application tierce avec Forminator ? Dites-nous ce que vous pensez de cette fonctionnalité dans les commentaires !