• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil » Tutoriels » Ajouter un formulaire d’inscription FeedBurner sous vos articles

Ajouter un formulaire d’inscription FeedBurner sous vos articles

Màj le 24 mars 2015

J’ai déjà publié un article sur comment Ajouter un beau formulaire d’inscription FeedBurner à votre blog, aujourd’hui on va savoir comment ajouter un large formulaire d’inscription à la Newsletter sous vos articles dans Wordpress. On sait bien que le formulaire d’inscription est très important pour garder vos visiteurs liés à votre blog.

Ajouter un formulaire d’inscription à votre ‘Newletter’ sous vos articles

ajouter-sidebar-optin-form-single-page-wordpress

Pour installer ce formulaire c’est très simple, il suffit de suivre les étapes suivantes:

  1. Connectez-vous à votre tableau de bord de Wordpress, puis cliquez sur Apparence.
  2. Éditez le fichier single.php de votre thème.
  3. À la fin de single.php, ajouter le code ci-dessous  et cliquez sur le bouton « Mise à jour du fichier ».
  4. Vous venez d’ajouter du code HTML au fichier single.php.
<div id="optin-single">
<h4>Like this Article ? Subscribe to Our Feeds</h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wpcours', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" name="uri" value="wpcours"><input type="hidden" value="en_US" name="loc">
<input type="text" id="name" name="name" onfocus="this.value=''" value="Enter Your Name" placeholder="Enter Your Name">
<input type="text" id="email" name="email" onfocus="this.value=''" value="Enter Your Email Address" placeholder="Enter Your Email Address">
<input type="submit" value="Sign Up" id="submit" name="submit">
</form>
</div>

 NB : Remplacez « wpcours » par par l’ID de votre Feedburner.

Maintenant passant à l’étape suivante:

  1. Aller à Apparence > Éditeur et éditez le fichier Style.css.
  2. Ajouter le code ci-dessous puis cliquez sur le bouton « Mise à jour du fichier ».
  3. Vous avez maintenant ajouté une CSS nécessaire à votre fichier style.css.

Maintenant il reste à télécharger les deux images ci-dessous et les mettre dans le dossier images de votre thème.

Nom – http://i.imgur.com/XrHTe.png

Email – http://i.imgur.com/2BCD0.png

 

#optin-single {
background: none repeat scroll 0 0 #F7F7F7;
border-color: #DDDDDD;
border-style: solid;
border-width: 1px;
padding: 10px 10px 15px 20px;
width:95%;
margin:15px 0;
}
#optin-single h4 {
font-weight: bold;
margin: 0 0 10px 0;
font-size:16px;
}
#optin-single input[type="text"] {
box-shadow: 0 2px 2px #DDDDDD;
-moz-box-shadow: 0 2px 2px #DDDDDD;
-webkit-box-shadow: 0 2px 2px #DDDDDD;
border: 1px solid #CCCCCC;
font-size: 13px;
margin: 0 0 10px 0;
padding: 10px;
width: 35%;
color:#888;
}
#optin-single input.name {
background: url(http://i.imgur.com/XrHTe.png) no-repeat scroll right center #FFFFFF;
margin-right: 5px;
}
#optin-single input.email {
background: url(http://i.imgur.com/2BCD0.png) no-repeat scroll right center #FFFFFF;
margin-right: 5px;
}
#optin-single input[type="submit"] {
background: #DF6001;
border: 1px solid #B63C00;
color: #FFFFFF;
cursor: pointer;
font-family: arial;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
padding: 8px 0;
text-shadow: -1px -1px #B63C00;
text-transform: capitalize;
width:17%;
}
#optin-single input[type="submit"]:hover{
background: none repeat scroll 0 0 #B63C00;
}

Maintenant il vous reste de jeter un coup d’œil sur votre formulaire.


Plus de cours et exercices corrigés :

  • Corriger l’erreur “are you sure you want to do this” dans Wordpress
  • Ajouter Google Optimize dans WordPress manuellement (étape par étape)
  • Comment Déplacer les codes JavaScript dans le footer
  • 4 méthodes pour changer la taille de police dans Wordpress
  • Ajouter l’attribut nofollow aux liens externe de votre site

Interactions du lecteur

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Barre latérale principale

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des cours et exercices corrigés Gratuitement.

Articles récents

  • Limiter la longueur minimale et maximale ‎de vos commentaires sous Wordpress
  • Antispam Bee : meilleure configuration à faire
  • 7 outils numériques pour organiser votre travail
  • Top 4 meilleurs plugins RSVP gratuits pour WordPress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site

© 2022 ·Wpcours.com · Mentions · Contact