Prends ce contact box dans ton footer !

Crédits Photo Box by Rena Lombardero, on Flickr

Il est toujours int√©ressant de proposer √† nos visiteurs la possibilit√© de nous envoyer un message. C’est l’objectif de ce widget : afficher un mini formulaire de contact et utiliser la fonction wp_mail()ÔĽŅ de WordPress pour l’envoyer.

Rien d’extraordinaire, y’en a plein de similaires sur le WP repository (raison pour laquelle je ne le soumets pas), mais comme je l’ai fait et que j’en suis plut√īt content, je le partage avec vous et sur ce blog en exclusivit√© !

Installation et configuration

Une fois l’archive zip du widget t√©l√©charg√©e, le plus simple est de l’uploader sur votre blog WordPress depuis la page d’ajout d’extensions (lien ¬ę¬†Envoyer¬†¬Ľ ou ¬ę¬†Upload¬†¬Ľ). Une fois install√©, Activez le widget.

Rendez-vous menu ¬ę¬†Apparence/widgets¬†¬Ľ, dans lequel vous retrouverez le widget ¬ę¬†Contact Box¬†¬Ľ √† glisser dans l’une de vos zones ¬ę¬†dynamic sidebar¬†¬Ľ.

Configuration du widget

Il ne vous reste plus qu’√† le param√©trer ! Le Titre sera report√© c√īt√© front comme illustr√© ci-dessus, le champ objet personnalisera le sujet du mail que la valeur du champ Mail de r√©ception recevra.

Affichage / ¬ę¬†styl-age¬†¬Ľ / ¬ę¬†control-age¬†¬Ľ des inputs

Du c√īt√© front, le formulaire ne s’affichera que lorsque le titre du widget (dans notre exemple ¬ę¬†Contact¬†¬Ľ) sera cliqu√©.

Depuis le fichier style.css de votre thème, vous pouvez personnaliser le look and feel du widget comme illustré ci-dessus en utilisant les class suivantes :

.cbw-from input[type=text] {
  /*votre style pour le champ mail*/
}
.cbw-message textarea {
  /*votre style pour la zone de message*/
}
a.cbw-submit {
  /*votre style pour le bouton envoyer*/
}

Le widget contient une v√©rification des champs email (qui doit respecter le format ¬ę¬†text@text.text¬†¬Ľ) et message (qui doit contenir qqchose!)

V√©rification de l’email avant envoi.

Lorsque le mail est valid√©, le widget se replie pour revenir √† son √©tat initial et l’email indiqu√© dans le champ Mail de r√©ception au moment de la configuration du widget re√ßoit le message de l’utilisateur.

Exemple de mail re√ßu par l’admin

Le footer.php de votre thème ne contient pas de zone widgetisable ?

Vous pouvez bien entendu utiliser le widget dans n’importe quelle zone widgetisable de votre blog (g√©n√©ralement au moins la sidebar est dispo). Mais si comme moi vous souhaitez le positionner dans le footer et que votre th√®me n’y pr√©voit pas de zone widgetisable, il suffit de modifier 2 fichiers.

1. footer.php

<!-- Dans le footer.php de votre thème ajouter : --><div id="widgetized-footer">
    <?php dynamic_sidebar( 'footer-widget' ); ?>
    <br style="clear:both"/>
</div>

2. functions.php

<?php
//Dans le functions.php de votre thème ajouter : register_sidebars( 1, array(
      'name' => 'footer-widget',       'before_widget' => '<div id="%1$s" class="widget %2$s">',       'after_widget' => '</div>',       'before_title' => '<h3 class="widgettitle">',       'after_title' => '</h3>'
) );

Voil√† qui conclut un mois d’avril assez prolifique ūüėČ

9 commentaires sur “Prends ce contact box dans ton footer !

  1. Bonjour,

    Sympathique ce plugin, félicitations.
    Existe t-il une solution pour que le formulaire s’affiche d√©pli√© en permanence sans aucun clic ?

    1. Bonjour,

      Je ne suis pas en mesure de v√©rifier pr√©cis√©ment tout de suite, mais je pense qu’il suffit de modifier le display dans le css. Je reviens vers toi d√©s que possible.
      Merci pour ton commentaire.

  2. @ Vincent,

    Apr√®s v√©rif, il s’agit d’√©diter les deux fichiers du plugin :
    1/ contact-box-widget.php à la ligne 44 retirer :

    style="display:none"

    2/ cb-js.js : commenter les lignes 2 à 5.

    A+

  3. Salut et merci pour ce plugin. Je cherche √† changer la couleur du texte ¬ę¬†votre email¬†¬Ľ ¬ę¬†votre message¬†¬Ľ. Peux tu me donner la marche √† suivre s’il te plait? merci

  4. √áa ne marche pas du tout je viens de l’installer et de l’activer la seule chose qui s’affiche c’est contact et on appuyant dessus √ßa ne fait rien du tout

Les commentaires sont fermés.