Comment intégrer son formulaire d’abonnement dans 1 boîte d’action ?

13 5170

Article invité rédigé par Bruno TRITSCH, du Blog sur la communication Web. Bruno vous aide à créer un blog qui rapporte

Intégrer une boîte d’action pour son formulaire.

Tout d’abord, je te remercie Rodrigue pour ton invitation et te fais donc l’honneur de publier sur ton blog mon premier article invité.

Comme c’est suite à 1 commentaire que j’ai laissé sur ton article ayant pour sujet 1 plugin gratuit de newsletter que tu m’as gentiment invité, j’ai pensé qu’il serait intéressant que le sujet soit en rapport.

J’ai moi-même depuis publié 1 tutoriel sur ce sujet, mais portant sur 1 autre extension gratuite de WordPress ayant la même utilité, et j’ai volontairement omis d’aborder la façon dont j’ai intégré mon formulaire d’abonnement à mes articles.

En effet avec WordPress, vous avez la possibilité d’intégrer vos formulaires d’abonnement à différents endroits (side-bar, pied-de-page, article(s), page(s), voire même en header ou presque) et de différentes manières.

Lorsque vous utilisez le plugin Wysija Newsletters comme moi et que vous souhaitez intégrer votre formulaire d’abonnement à l’intérieur de vos articles et/ou de vos pages, vous avez 2 solutions:

  1. vous suivez la méthode que j’ai proposée dan mon article, mais vous ne pourrez pas créer votre propre graphisme.
  2. vous utiliser 1 « Boîte d’action« 

Dans cet article, nous allons donc aborder la deuxième.

Qu’est-ce qu’une boîte d’action ?

C’est 1 élément qui appelle à l’action, invite vos lecteurs à agir et que vous allez pouvoir intégrer dans un ou plusieurs article(s), et/ou dans une ou plusieurs page(s) après l’avoir pré-configuré.

C’est souvent ce dont se servent les blogueurs qui font autorité pour afficher leur formulaire d’abonnement, or c’est bien ce qui nous intéresse ici.

Pourquoi utiliser 1 boîte d’action ?

Je vous vois venir: comme Wysija permet d’intégrer le fameux formulaire d’inscription à peu prêt n’importe où sur son blog, pourquoi encombrer ce dernier d’1 plugin supplémentaire et perdre son temps à le paramétrer et à apprendre à s’en servir allez-vous me dire!

Simplement pour les raisons suivantes:

  1. vous n’allez pas perdre votre temps, mais l’investir! En effet, 1 fois votre boîte d’action paramétrée, vous n’aurez plus qu’à cocher 1 case dans l’administration de votre page ou article si vous souhaitez la faire apparaître dessus. Intégrer le formulaire Wysija prend 1 peu plus de temps.
  2. vous aurez plus de latitude au niveau graphique: Wysija ne vous en laisse aucune!
  3. vous allez pouvoir mettre 1 titre, 1 sous-titre et 1 commentaire.
  4. vous prendrez moins de risque d’oublier d’intégrer le formulaire sur vos pages/articles: par expérience, je peux vous dire qu’avec la méthode traditionnelle, on a tendance à l’oublier!
  5. votre formulaire sera automatiquement centré: c’est bien plus esthétique.
  6. vous pourrez même intégrer 1 image à votre formulaire: imaginez toutes les possibilités!
  7. …etc… je vous laisse trouver les autres!

Comment fait-on ?

Il existe plusieurs plugins (gratuits ou non) pour intégrer 1 boîte d’action sur votre blog WordPress. Celui que j’utilise s’appelle: Magic Action Box

Comment installer Magic Action Box ?

  • Dans votre administration, allez à « Extensions« , puis « Ajouter« 
  • Recherchez « Magic Action Box« 
  • Trouvez « Magic Action Box Pro » et cliquez sur « Installer maintenant« 
  • Cliquez sur « Activer l’extension« 
  • 2 nouveaux onglets apparaissent dans la barre de menu sur la gauche de votre administration

Comment paramétrer MAGIC ACTION BOX ?

  • Dans la barre de menu de votre administration, cliquez sur « Magic Action Box Settings« 
  • Laissez de côté les paramètres principaux
  • Cliquez sur « Styles et boutons » afin de paramétrer le style de votre boîte (vous pouvez en créer plusieurs)
  • Cliquez sur « Créer 1 nouveau style« 
  • Il ne vous reste plus qu’à faire les modifications souhaitées (si besoin est) pour obtenir 1 style personnalisé (couleur et/ou image de fond, police et taille de caractère des différents messages à inclure, marges …). Vous pouvez même importer votre propre CSS.
  • remarque: pour insérer 1 image comme sur ma boîte d’action, ça se passe ailleurs (lire la suite).
  • Si vous souhaitez créer vos propres boutons, faites de même après avoir cliqué sur « Ajouter un bouton« .

Comment créer 1 boîte d’action ?

  • Dans la barre de menu de votre administration, cliquez sur « Boîtes d’action » et « Ajouter un nouveau« 
  • Vous pouvez voir que vous pouvez créer différentes boîtes pour différentes utilisations
  • Cliquez sur « Optin formulaire » et saisissez 1 titre (il sert à vous repérer si vous avez plusieurs boîte et il ne sera pas affiché sur votre site).
  • Choisissez le style que vous souhaitez utiliser: vous avez le choix entre 1 des styles par défaut ou 1 des vôtres. Dans ce dernier cas cliquez sur « Styles utilisateurs » et choisissez celui qui vous convient.
  • Choisissez « Wysija Newsletters » dans la section « Sélectionnez Fournisseur liste de diffusion« .
  • Cochez les cases adéquates dans « Sélectionnez Liste » et « Les champs pour demander« .
  • Modifiez à votre guise les textes dans « Envoyer étiquette de touche » et « Success Message« .
  • Paramétrez les textes que vous voulez voir s’afficher dans votre boîte d’action dans la section « Opt In Copier« , en sachant que les champs ne sont pas obligatoires et qu’ils correspondent à:
    • « Principal Cap » sera le titre qui s’affichera côté visiteurs
    • « Sous rubrique » équivaut à 1 sous-titre ou slogan
    • « Dans principal Opt Copier » correspond au texte qui va s’afficher avant les champs d’inscription
    • « Opt secondaire Dans copie » correspond au texte qui va s’afficher après les champs d’inscription
  • Si vous souhaitez insérer 1 image dans votre boîte d’action, c’est dans la section suivante que ça se passe: « Action Box: Contenu Slide« 
  • Cliquez sur « Publier » en haut et droite de votre administration, comme pour publier 1 article ou 1 page.

Comment afficher votre boîte d’action sur 1 ou plusieurs article(s) et/ou page(s) ?

Vous devez activer votre boîte d’action dans chaque page et/ou article sur lesquels vous souhaitez qu’elle apparaisse.

Pour ce faire, allez dans l’administration de votre page ou article et suivez les instructions de la diapo suivante:

Intégrer 1 boîte d'action à 1 article ou à 1 page sous WordPress

Si vous ne trouvez pas l’onglet « Boîte Action Magique » dans votre administration, c’est qu’il faut cocher la case adéquate dans « Options de l’écran » (en haut à droite de votre administration).

N’oubliez pas de cliquez sur « Mettre à jour » pour les pages/articles déjà publiés.

Autres utilisations :

Vous avez pu remarquer que cette extension vous permet de créer et paramétrer plusieurs boîtes d’actions pour différentes utilisations, elle peut donc être extrêmement utile à plus d’1 titre.

Elle est également valable pour ceux qui utilisent MailChimp ou Aweber en lieu et place de Wysija.

Conclusion :

Voilà, c’est maintenant à vous de jouer et de commenter. Donnez-nous vos impressions et n’hésitez pas à demander si vous avez besoin d’aide.

13 Commentaires

    • Salut,

      De rien.

      Tu peux faire plein de choses avec et lorsqu’il y a 1 élément que tu es susceptible d’ajouter à la plupart de tes pages ou de tes articles, tu n’as qu’1 case à cocher, au lieu d’avoir à chercher ton code et à le coller à chaque fois.

  1. Bonjour Bruno,

    Je ne savais pas qu’on pouvait appeler ça ainsi.

    Pour intégrer « ma boite d’action » sous mes articles, j’ai édité le fichier single.php (qui est celui qui sert pour les articles) et j’ai mis le code html dedans.

    Ca semble compliqué dit comme ça, mais si on sait au moins lire un peu le code, on s’en sort très bien aussi.

    Et on a complètement la main sur la personnalisation du design, j’ai fait un tuto vidéo sur le sujet: http://lesdoigtsdanslenet.com/personnaliser-css-formulaire-sg-autorepondeur/

    Mais bien sûr, chacun fait comme il le sent, parce que modifier un fichier de code, ça peut être très impressionnant quand on n’a pas l’habitude! ;)

    A+

    • C’est pratique en effet de modifier le single de son thème, c’est ce que j’ai fait aussi, attention juste en cas de mise à jour de ton thème de ne rien perdre.

      Bon point en tout cas car ça évite l’installation d’un plugin ^^ je part voir ton article.

    • Bonjour Marie-Eve,

      Je suis allé voir ton tutoriel, mais je pense qu’il s’adresse plutôt à des initiés.

      Et tu peux également avoir complètement la main sur la personnalisation du design avec la boîte d’action, puisque tu peux intégrer 1 fichier image en arrière plan. Donc tu peux également personnaliser avec Photoshop ou n’importe quel autre logiciel de ce type.

      C’est vrai que sur le mien je ne me suis pas cassé la tête, mais ce n’est pas ma priorité. J’aurais très bien pu ne pas remplir les champs titre, sous-titre …etc… et tout mettre à ma sauce en utilisant 1 fichier image.

      Maintenant je comprends que les techniciens comme Rodrigue ou toi puissiez avoir 1 préférence pour le code à 1 plugin supplémentaire.

  2. bonsoir
    je sais que le sujet date un peut,mais j’ai une petite question un peut bête :), asque en peut mètre ce formulaire dans la sidebar ?,pour avoir un jolie formulaire d’inscription …
    voila j’espère que ma question est claire et merci d’avance.

  3. Bonjour Rodrigue,

    Sais-tu s’il est possible de mettre ce plugin en Français. Quand Bruno en parle, il n’utilise que des termes français, mais de mon côté tout est en anglais.

    Je n’ai d’ailleurs pas trouvé de traduction.

    Par ailleurs, ton blog est très intéressant et très bien référencé lors de mes recherches Google.

    Merci

Réagis