Comment ajouter un formulaire d'abonnement Mailrelay à l'aide de WordPress

Si vous souhaitez attirer de nouveaux abonnés pour augmenter votre liste de diffusion, vous devez proposer des formulaires d'abonnement sur votre site. Si vous travaillez avec WordPress, vous pouvez facilement ajouter ces formulaires à votre blog.

Pourquoi? Essentiellement parce qu'il vous permet de capturer des données de personnes intéressées par les produits ou services que vous proposez afin que vous puissiez les contacter périodiquement.

À ce stade, vous vous demandez peut-être : je suis intéressé, mais que vais-je devoir faire pour créer un formulaire d'abonnement sur mon site WordPress ? Je ne connais pas le code HTML et j'ai besoin de quelque chose de simple et facile.

Ne vous inquiétez pas, dans ce tutoriel ; nous vous montrerons différentes manières d'ajouter le code HTML généré par Mailrelay dans votre site Web créé à l'aide de WordPress avec et sans plugins.

Intéressant, non ?

Clarification importante : pour ce tutoriel, nous allons supposer que vous avez déjà créé un formulaire d'opt-in sur votre compte et que vous avez déjà copié le code HTML. Par conséquent, nous allons nous concentrer sur l'explication de la façon d'ajouter ce code sur WordPress. Si vous n'avez pas encore créé le formulaire, ou si vous n'avez pas copié le code HTML, nous vous conseillons de lire d'abord cet autre article et de suivre les étapes indiquées : Formulaires d'abonnement Mailrelay V3

· Comment intégrer un formulaire d'abonnement Mailrelay sans utiliser de plugin

Nous devons commencer ce tutoriel en disant que nous ne pouvons pas nous tromper ; la plupart d'entre nous essaieront de trouver un plugin pour effectuer toutes les tâches pour nous sur notre site car ils nous simplifient la vie.

Cependant, il est important de garder à l'esprit que l'installation de nombreux plugins sur notre site peut surcharger la page.

Cela, à de nombreuses reprises, implique une augmentation du temps de chargement des pages, affectant directement notre stratégie de référencement et notre expérience utilisateur.

Pour tout cela, si vous souhaitez éviter de surcharger votre site internet ou que vous ne souhaitez tout simplement pas installer plus de plugins sur votre site WP, vous pouvez intégrer le code HTML directement sur votre site internet sans aucun plugin.

Comment?

En suivant ces étapes :

Pour commencer, vous devrez vous connecter à votre WordPress et cliquer sur « Apparence » et sur « Widget ».

Dans la section Widgets, nous devons trouver un widget nommé « HTML personnalisé. ” Une fois que nous l'avons trouvé, nous pouvons le faire glisser vers la zone des widgets où nous voulons ajouter notre formulaire d'inscription.

Par défaut, WordPress a une zone de widget dans la barre latérale de la page.

Nous pouvons l'insérer là ou si notre thème ou modèle a d'autres zones de Widgets activées, nous pouvons changer l'endroit (par exemple, dans le pied de page).

Dans ce cas, nous allons l'ajouter dans la zone la plus courante des widgets, car tous les sites Web WordPress ont cette option par défaut ; Ajoutons le code HTML dans la barre latérale.

Il suffit de faire glisser le widget dans cette zone, d'ajouter un titre et de coller le code généré par Mailrelay. N'oubliez pas que vous avez déjà généré le code HTML avant de commencer à lire ce tutoriel.

Après avoir nommé le widget (dans la section titre) et inséré le code (dans la section contenu), vous devrez cliquer sur le bouton Enregistrer.

Plus tard, pour vérifier si tout fonctionne bien, vous pouvez accéder à votre blog et vous verrez le formulaire d'abonnement dans la barre latérale.

* Il est important de garder à l'esprit que le formulaire aura les styles (couleurs et polices) configurés dans votre modèle ou thème.

Dans ce cas, nous avons vu comment intégrer le formulaire dans la barre latérale. Si une autre zone de widgets est activée sur votre site, vous pouvez suivre les mêmes étapes que celles que nous avons expliquées précédemment, mais vous devez faire glisser le widget vers cette zone.

Le résultat sera le même; la seule différence est que votre formulaire d'inscription sera affiché dans la zone spécifiée et non dans la barre latérale.

· Comment intégrer un formulaire d'abonnement Mailrelay dans WordPress avec Elementor (version gratuite)

Comment intégrer un formulaire d'abonnement Mailrelay dans WordPress avec Elementor (version gratuite)

Elementor est l'un des concepteurs de mise en page WordPress les plus célèbres du moment, en fait, c'est l'un des plugins les plus utilisés pour éditer les formulaires opt-in.

Parmi ses principales fonctionnalités, nous pouvons trouver : une version gratuite avec de nombreuses fonctionnalités, qui permet à tout utilisateur de créer des sections attrayantes et personnalisées sans avoir à investir de l'argent.

Elementor est un plugin actuellement disponible gratuitement avec des fonctionnalités plus limitées et avec une version payante/Premium avec quelques options supplémentaires.

Cependant, peu importe que vous utilisiez la version gratuite ou payante, vous pourrez intégrer votre formulaire Mailrelay dans la section et l'emplacement souhaités. Vous apprendrez à le faire en quelques étapes :

La première exigence est d'avoir le plugin Elementor installé sur notre site. Si vous ne l'avez pas encore installé, vous devez aller dans l'onglet plugins et cliquer sur « ajouter un nouveau ».

Recherchez « Elementor page builder » dans le référentiel WordPress et cliquez sur Installer.

Une fois installé, n'oubliez pas de l'activer, et nous serons prêts à intégrer notre code.

Pour démarrer l'intégration, vous devez ouvrir la page ou la section où vous souhaitez saisir votre formulaire d'abonnement. Après avoir accédé à cette section, vous devrez rechercher le module de code HTML.

Une fois localisé, ajoutez le module dans la colonne ou la section de la page où vous souhaitez que votre formulaire s'affiche. Après l'avoir fait glisser dans la zone en question, nous devrons coller le code HTML que nous avons enregistré précédemment.

Une fois le code HTML saisi, vous verrez comment le formulaire sera disponible dans le formulaire d'abonnement dans la section ou la colonne choisie. Assurez-vous que tout est correct et publiez les modifications. Le résultat sera visible sur votre site :

Comme nous l'avons mentionné précédemment, dans ce cas comme dans le précédent, il est important de garder à l'esprit que le formulaire aura les styles définis dans votre modèle ou thème.

Pour apporter des changements ou des modifications de style, vous devrez éditer le HTML ou utiliser des plugins spécifiques qui nous permettent de personnaliser nos formulaires d'abonnement (Bloom, par exemple).

· Comment intégrer un formulaire d'abonnement Mailrelay dans WordPress avec Bloom

Bloom est l'un des plugins les plus complets que nous puissions trouver pour créer des formulaires d'abonnement. Si vous avez déjà installé ce plugin dans votre WordPress ou si vous envisagez d'acheter une licence, nous vous expliquerons comment vous pouvez l'intégrer à votre compte Mailrelay.

Après avoir accédé au panneau d'administration, la première chose à faire est de cliquer sur les formulaires Bloom / Opt-in. Dans cet onglet, vous pouvez retrouver tous les formulaires d'abonnement que vous avez déjà créés. Dans ce cas, nous allons créer un nouveau formulaire de toutes pièces pour apprendre à l'intégrer facilement avec Mailrelay.

Pour créer un nouveau formulaire, il suffit de cliquer sur le bouton bleu en haut de l'écran « nouvel opt-in. " ou une nouvelle forme.

Le système ouvrira une liste déroulante où vous devrez choisir le type de formulaire que vous souhaitez créer. Choisissons l'option « en ligne », car elle vous permettra de l'implémenter plus tard dans la section ou la page que vous souhaitez.

Dans la fenêtre suivante, vous devrez commencer à configurer notre nouveau formulaire. La première chose à faire est de le nommer pour pouvoir l'identifier en interne (ce nom ne sera visible que par vous, il ne sera pas montré aux visiteurs.)

Après cela, nous devrons sélectionner un fournisseur de messagerie. Dans ce cas, comme nous avons notre code HTML de Mailrelay, nous pouvons aller directement en bas de la liste déroulante et sélectionner l'option « Formulaire HTML personnalisé » .

Immédiatement après avoir choisi cette option, le système affichera une boîte grise où nous pourrons insérer le code extrait du formulaire. Dans ce cas, vous devez coller le code HTML généré par Mailrelay et cliquer sur le bouton « Next design your opt-in ».

Ci-dessous, nous examinerons différentes formes, avec différentes couleurs et styles. Vous devez sélectionner la meilleure option en fonction de la mise en page de votre site pour s'adapter au schéma de couleurs de la page. Il est important de comprendre que puisque nous avons déjà introduit le code, le style ne sera pas le même que celui affiché par le plugin, mais le résultat final est généralement assez bon.

La prochaine étape sera de personnaliser les champs que nous voulons utiliser dans le formulaire. Dans "titre opt-in", nous devons écrire le titre qui sera affiché en évidence dans l'en-tête du formulaire. Si vous ne souhaitez pas saisir de titre, vous pouvez laisser ce champ vide.

Après cela, nous devrons remplir le texte du formulaire. Si vous envisagez d'expliquer pourquoi vos visiteurs doivent s'abonner à votre newsletter, ou ce que vous proposez à vos abonnés en échange de l'abonnement, c'est le champ que vous devez utiliser pour ajouter toutes ces informations.

Nous pouvons donc ajuster l'image. La plupart des modèles standards de Bloom incluent une image en haut, mais si vous souhaitez la modifier et/ou la remplacer par votre logo, par exemple, vous devrez le faire dans cette section.

Nous sommes arrivés à la section des styles. Si vous souhaitez personnaliser davantage votre formulaire d'abonnement, changer les polices, les couleurs, les arrière-plans ou tout autre aspect esthétique, c'est l'endroit qu'il vous faut. Dans Opt-in Styling et Form Styling, vous pouvez choisir parmi de nombreuses options et alternatives.

Après cela, nous trouverons d'autres options pour personnaliser le formulaire. Nous pouvons ajouter du texte dans le pied de page (idéal pour des éclaircissements ou des commentaires rapides) et le message de confirmation, qui est le texte qui sera affiché après que le visiteur s'est inscrit avec succès à la newsletter.

Après avoir défini tous les champs, nous pouvons cliquer sur « Enregistrer » pour enregistrer notre travail. Lorsque nous cliquons sur Enregistrer, le plugin nous retire de l'écran et affiche tous les formulaires d'inscription actifs.

Eh bien, nous avons déjà créé et configuré notre formulaire Bloom. L'étape suivante consiste à l'intégrer correctement dans notre site.

Pour cela, dans les formulaires Bloom/opt-in, on cherchera le formulaire que l'on vient de créer et, à gauche, on retrouvera ce symbole « [].

Lorsque nous cliquons dessus, nous verrons une nouvelle fenêtre avec le shortcode pour ce formulaire. Copiez ou enregistrez ce code quelque part car vous aurez besoin de l'utiliser plus tard.

Après avoir copié le shortcode, nous devrons l'ajouter à notre site Web où nous voulons afficher ce formulaire. Si nous avons une mise en page visuelle comme Elementor ou Divi, nous pouvons l'intégrer où nous voulons avec le module de code ou le shortcode.

Si, au contraire, nous travaillons déjà avec Gutenberg, le nouveau système créé par WordPress, nous pouvons intégrer notre Shortcode en utilisant le widget embarqué spécialement à cet effet.

Nous devons donc ouvrir la page ou la section pour la modifier. Après y avoir accédé, nous allons cliquer sur le bouton "+", et dans les widgets, nous allons sélectionner le bloc "Shortcode". Après cela, nous devons entrer le code ou le shortcode que nous avons enregistré précédemment. Ici, il vous suffit de coller le contenu et d'enregistrer les modifications.

Après avoir suivi ces étapes, votre nouveau formulaire sera disponible sur votre site. Le processus est beaucoup plus facile que vous ne le pensiez, n'est-ce pas ?

· Conclusion

Comme nous l'avons vu tout au long de l'article, il existe de nombreuses options pour intégrer un formulaire HTML Mailrelay à l'aide de WordPress. Dans cet article, nous voulions nous concentrer sur les méthodes que nous considérons comme faciles afin que vous perdiez la peur de manipuler du code.

Comme nous l'avons vu, vous pouvez intégrer Mailrelay à WordPress sans plugins, via la section widgets ou encore en utilisant Gutenberg, la nouvelle fonctionnalité proposée par WordPress.

Cependant, si vous disposez déjà d'éditeurs visuels comme Divi, Elementor ou tout autre plugin opt-in, vous pouvez également les utiliser pour ajouter votre formulaire où vous le souhaitez. Dans le cas de Bloom, le principal avantage que nous avons est que le plugin nous permet de modifier facilement les styles de formulaires, de leur donner une touche plus personnelle et d'adapter le code à la mise en page de notre site.

Cependant, si vous êtes déjà familiarisé avec le HTML et que vous souhaitez apporter quelques modifications au code, ajouter des styles ou des couleurs, c'est également possible. Bien sûr, n'oubliez pas d'être prudent car si votre formulaire d'inscription ne fonctionne pas correctement, cela affectera votre stratégie d'email marketing.

Et maintenant, vous souhaitez intégrer votre formulaire Mailrelay à votre site WordPress ?