Comment inclure une option d'ajout au calendrier à vos formulaires WordPress

Publié: 2018-11-29

Souhaitez-vous inclure une option Ajouter au calendrier à vos formulaires WordPress ?

Donner aux visiteurs du site un moyen facile d'ajouter des dates d'événements à leur calendrier après s'être inscrits sur votre site est une touche personnelle supplémentaire que les gens apprécieront. Si vous préférez, vous pouvez toujours ajouter cette option aux confirmations de votre formulaire ou aux notifications par e-mail.

Dans cet article, nous allons vous montrer comment inclure une option Ajouter au calendrier à vos formulaires WordPress, afin que les visiteurs du site puissent commencer à planifier vos événements à venir dès qu'ils soumettent un formulaire sur votre site Web.

Étape 1 : Créer un formulaire WordPress

La première chose à faire est d'installer et d'activer le plugin WPForms. Pour plus de détails, consultez ce guide étape par étape sur la façon d'installer un plugin dans WordPress.

Dans notre exemple, nous allons créer un simple formulaire RSVP de fête d'anniversaire que les gens peuvent remplir et soumettre. Pour obtenir de l'aide sur cette étape, assurez-vous de consulter ce didacticiel sur la création d'un formulaire RSVP dans WordPress à l'aide du module complémentaire Form Templates Pack.

Voici à quoi ressemble notre formulaire RSVP dans l'éditeur de formulaire :

WPForms est le meilleur plugin WordPress Form Builder. Achetez le gratuitement!

formulaire rsvp de fête d'anniversaire

Pour ajouter un petit message à votre formulaire informant les gens de la date de la fête, faites simplement glisser le champ du formulaire HTML du côté gauche vers le côté droit. Cliquez ensuite sur le champ pour apporter des modifications.

Voici ce que nous avons ajouté à notre formulaire :

personnaliser le formulaire rsvp

Au début de notre site, voici à quoi ressemblera le formulaire RSVP :

formulaire rsvp d'anniversaire final

Il est maintenant temps d'inclure l'option Ajouter au calendrier à votre formulaire.

Étape 2 : Créer un événement dans Google Agenda

La première chose que nous ferons avant d'inclure l'option de calendrier dans notre formulaire est de créer un événement dans Google Agenda.

Pour cela, connectez-vous à votre compte Google et accédez à votre agenda Google. Ensuite, remplissez les détails de l'événement.

création d'événement dans l'agenda google

Cliquez sur Enregistrer pour que votre événement soit enregistré dans votre calendrier.

Ensuite, dans le menu déroulant intitulé Plus d'actions , sélectionnez Publier l'événement .

publier l'événement

Lorsque vous le faites, un modal contextuel apparaîtra avec des liens vers votre événement. Vous voudrez copier le code HTML à utiliser sur votre formulaire WordPress.

Code HTML

Pour que les visiteurs de votre site puissent voir votre événement publié, vous devez vous assurer que votre agenda Google est défini sur "Public".

Pour changer votre calendrier Google en « Public » pour que tous puissent le voir, choisissez d'abord Paramètres dans la liste déroulante de votre calendrier.

paramètres de calendrier google

Ensuite, cliquez sur le calendrier que vous souhaitez rendre public, faites défiler jusqu'à Autorisations d' accès et cochez la case Rendre disponible au public .

rendre le calendrier public

Rendre votre calendrier Google Public rendra tous vos événements de calendrier visibles au monde, même via la recherche Google. Si vous avez des questions privées sur votre calendrier, il est suggéré de créer un calendrier Google distinct pour les événements que vous souhaitez que les visiteurs du site ajoutent à leurs propres calendriers.

Votre événement est maintenant prêt à être ajouté à votre formulaire WordPress.

Étape 3 : Incluez une option Ajouter au calendrier dans votre formulaire WordPress

Il existe plusieurs endroits où vous pouvez inclure votre option Ajouter au calendrier sur vos formulaires :

  1. Sur la forme elle-même
  2. Dans les confirmations de formulaire
  3. Dans les notifications par e-mail

Voyons d'abord comment inclure l'option Ajouter au calendrier dans votre formulaire actuel.

Si vous ne l'avez pas déjà fait, ajoutez un champ de formulaire HTML à votre formulaire d'événement en le faisant glisser du côté gauche vers le panneau latéral droit.

Nous avons ajouté ce champ de formulaire dès le début car nous voulions nous assurer que les gens connaissent un peu notre événement.

Une fois le champ du formulaire HTML ajouté, cliquez dessus pour apporter des modifications. Collez le code de votre agenda Google dans la section Code :

ajouter du code html au formulaire d'événement

Cliquez sur Enregistrer . Voici à quoi ressemble l'option Ajouter au calendrier sur notre formulaire sur le front-end :

option d'ajout final au calendrier

Lorsqu'un visiteur du site clique sur le bouton CTA intitulé Google Calendar , Google s'ouvre et l'invite à se connecter à son compte. Ensuite, l'événement apparaîtra avec tous les détails que vous avez ajoutés afin qu'ils puissent l'enregistrer dans leur propre calendrier s'ils choisissent de le faire.

Maintenant, si vous préférez ne pas avoir d'option Ajouter au calendrier sur votre formulaire WordPress actuel, vous pouvez toujours ajouter le lien vers votre événement sur les confirmations ou les notifications de votre formulaire.

Étape 4 : Incluez une option Ajouter au calendrier dans le message de confirmation de votre formulaire

Les confirmations de formulaire sont des messages qui s'affichent aux visiteurs du site une fois qu'ils soumettent un formulaire sur votre site Web. Ils informent les gens que leur formulaire est passé et vous offrent la possibilité de leur faire savoir quelles sont les prochaines étapes.

WPForms propose trois types de confirmation :

  1. Un message. Il s'agit du type de confirmation par défaut dans WPForms. Lorsqu'un visiteur du site soumet votre formulaire RSVP, un simple message de confirmation apparaîtra pour lui faire savoir que son formulaire a été rempli.
  2. Afficher la page. Ce type de confirmation dirigera les visiteurs du site vers une page Web spécifique de votre site en les remerciant pour leur RSVP. Pour obtenir de l'aide, consultez notre tutoriel sur la redirection des clients vers une page de remerciement.
  3. Accédez à l'URL (Redirection). Cette option est utilisée lorsque vous souhaitez envoyer les visiteurs du site vers un autre site Web.

Pour notre formulaire d'événement, nous créerons un message de confirmation, avec l'option Ajouter au calendrier afin que les visiteurs du site puissent immédiatement ajouter notre événement à venir à leur calendrier Google.

Pour commencer, cliquez sur l'onglet Confirmation dans l'éditeur de formulaire sous Paramètres .

Ensuite, sélectionnez le type de type de confirmation que vous souhaitez créer. Pour cet exemple, nous sélectionnerons Message .

Message de confirmation

Étant donné que nous ajoutons la possibilité d'ajouter votre événement à un calendrier dans le formulaire de confirmation, nous avons deux options :

  1. Créez un message simple, en ajoutant l'option Ajouter au calendrier dans le message, que les personnes y participent ou non
  2. Créez plusieurs confirmations de formulaire et activez la logique conditionnelle intelligente afin que seuls ceux qui participeront ou pourraient y assister voient le message de confirmation avec l'option Ajouter au calendrier

Pour plus de simplicité, nous allons créer un message de confirmation qui s'affichera pour tous les visiteurs du site, qu'ils prévoient ou non d'assister à l'événement. Assurez-vous simplement de cliquer sur l'onglet Texte lorsque vous ajoutez le code HTML de votre agenda Google à votre message de confirmation.

message de confirmation de formulaire

Voici à quoi ressemble la confirmation de formulaire lorsque quelqu'un soumet un formulaire RSVP :

exemple de confirmation de formulaire

Encore une fois, tout ce que le visiteur de votre site a à faire est de cliquer sur le bouton Google Agenda et d'ajouter votre événement à son propre calendrier.

Si vous souhaitez créer plusieurs confirmations de formulaire et utiliser une logique conditionnelle pour afficher différents messages aux personnes en fonction de leurs réponses RSVP, consultez ce didacticiel sur la création de confirmations de formulaire conditionnelles.

Étape 5 : Incluez une option Ajouter au calendrier dans les notifications par e-mail de votre formulaire

Le dernier endroit où vous pouvez inclure une option Ajouter au calendrier sur vos formulaires WordPress est dans la notification par e-mail que les gens reçoivent lorsqu'ils soumettent un formulaire sur votre site Web.

Mais avant d'aborder la procédure à suivre, vous devez vous assurer d'avoir un champ de formulaire de courrier électronique sur votre formulaire RSVP, ce que nous n'avons pas fait dans notre exemple. C'est la seule façon dont WPForms saura envoyer une notification par e-mail aux visiteurs de votre site.

Après avoir ajouté un champ de formulaire d'e-mail à votre formulaire d'événement, accédez à Paramètres » Notifications dans l'éditeur de formulaire.

Paramètres de notification WPForms

Par défaut, vous recevrez toujours une notification par e-mail lorsqu'une personne soumet un formulaire sur votre site.

Cependant, pour vous assurer que les visiteurs du site reçoivent également une notification, vous devrez utiliser des balises actives pour ajouter l'e-mail du visiteur de votre site à la notification par e-mail.

Pour ce faire, cliquez sur Afficher les balises actives .

Balises actives de notification de formulaire

Ensuite, sélectionnez l'option E - mail dans le menu déroulant afin que WPForms sache envoyer une notification par e-mail à l'e-mail que votre visiteur du site a saisi sur votre formulaire RSVP.

balises actives de notification

Il est maintenant temps de personnaliser le message avec l'option Ajouter au calendrier.

Faites défiler jusqu'à Message et ajoutez le message que vous souhaitez que les gens voient dans leur e-mail. Ici, vous pouvez coller le code HTML de votre calendrier Google pour l'option Ajouter au calendrier.

message de notification

Désormais, chaque fois que quelqu'un remplit votre formulaire d'événement, il reçoit une notification contenant le même bouton Google Agenda que nous avons vu dans toutes les autres étapes.

Dernières pensées

Et voila! Vous savez maintenant comment inclure une option Ajouter au calendrier à vos formulaires WordPress afin que les visiteurs du site puissent facilement ajouter votre événement à venir à leur propre calendrier Google.

Si vous créez des formulaires pour des événements ou des réservations, vous aimerez également ce guide sur la création d'un formulaire WordPress avec un sélecteur de date.

Saviez-vous que vous pouvez laisser vos visiteurs ajouter des événements de calendrier à un calendrier WordPress partagé ? Voici notre guide simple pour ajouter un formulaire pour les événements soumis par les utilisateurs.

Si vous craignez que tous les visiteurs du site voient et remplissent votre formulaire d'événement, sachez que WPForms vous permet d'activer des autorisations de formulaire spécifiques afin que seuls ceux qui ont un mot de passe puissent remplir et soumettre votre formulaire d'événement. Pour obtenir de l'aide sur cette étape, consultez ce didacticiel facile à suivre sur la façon de protéger par mot de passe vos formulaires WordPress.

Alors qu'est-ce que tu attends? Commencez dès aujourd'hui avec le plugin de formulaires WordPress le plus puissant.

Et n'oubliez pas, si vous aimez cet article, alors suivez-nous sur Facebook et Twitter.