Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

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.


Vous aimerez également...

  • Accélérer Wordpress en nettoyant le Header de votre thème
  • Comment réparer l’écran blanc de la mort WordPress (étape par étape)
  • Ajouter des liens d’ancrage dans WordPress manuellement et facilement
  • Comment créer des menus parents non cliquable dans WordPress
  • Corriger l’erreur HTTP de téléchargement d’image dans WordPress
  • Quels fichiers WordPress devez-vous sauvegarder?

Classé sous :Tutoriels Balisé avec :wordpress guide

Accueil / Tutoriels / Ajouter un formulaire d’inscription FeedBurner sous vos articles

Laisser un commentaire

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

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact