imath

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 ».

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!)

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.

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 😉