Un formulaire de contact pour son blog

Publié le 22 février 2011 par Leblogdelise

Depuis la création du Bog de Lise, j'utilisais, comme formulaire de contact Dagon Design Form Mailer. Ce plugin tout simple fonctionnait bien, à ceci près que les messages reçus ne prenaient pas bien en compte les caractères accentués.

Curieusement, bien que les fichiers de traduction soient bien installés, sur un nouveau blog que je viens de créer, l'affichage du formulaire de contact restait en anglais. Je suis donc partie à la recherche d'un nouveau formulaire de contact ; le blog de Fran6art proposait notamment cforms. Je l'ai testé mais l'ai trouvé trop compliqué.

Sur le site de WordPress, j'ai trouvé un plugin plus simple que le précédent, à peu près traduit en français, mais très configurable, Fast Secure Contact Form ; il permet de spécifier les champs requis, de créer de nouveaux champs, modifier l'apparence,... Il dispose d'une captcha, qui fonctionne sur Le Blog de Lise, mais pas sur l'autre blog, alors que les deux sont hébergés au même endroit !

[Diaporama]

On remarque sur les dernières images qu'une adresse mail "bidon" fonctionne !

Installation de Fast Secure Contact Form

Comme tous les plugins, après l'avoir téléchargé et décompressé, il faut télécharger le répertoire si-contact-form dans le répertoire wp-content.

Ensuite, il faut comme toutes les extensions, l'activer depuis le panneau d'administration du blog, puis depuis cette page, cliquer sur le lien "Paramètres".

On arrive alors sur la page de configuration.

[Diaporama]

Configuration

On peut également accéder à la page de configuration depuis Extension > FS Contact Form Option.

Ce plugin permet de configurer plusieurs formulaires. Chaque formulaire est alors numéroté ; pour afficher le formulaire dans une page, il faut saisir le code :

[si-contact-form form='x']

le numéro x étant celui du formulaire.

Pour la plupart des paramètres, un texte d'aide est accessible en cliquant sur le lien "aide".

On peut saisir un texte d'introduction qui s'affichera avant le formulaire de contact. On peut laisser ce champ vide.

Les champs suivants parlent d'eux-mêmes :

  • destinataire du message envoyé par les lecteurs (plusieurs destinataires peuvent être indiqués),
  • réponse automatique dès réception d'un message,
  • utilisation d'Akismet pour prévenir le spam,
  • captcha : ce formulaire dispose de fichiers d'aide très bien faits,
[Diaporama]

La configuration des champs du formulaire

Il est possible de modifier les paramètres par défaut et ne pas rendre certains champs obligatoires. On peut créer des champs supplémentaires, en indiquant d'une part le type de champ, d'autre part, si ce champ devra être obligatoirement saisi ou non.

[Diaporama]

Redirection

Par défaut, la redirection est activée : une fois le message saisi et envoyé par le lecteur, celui-ci est redirigé vers la page d'accueil du blog ; on peut désactiver cette option.

[Diaporama]

L'apparence du formulaire

La première ligne

CSS style for form DIV on the contact form:

permet d'indiquer la largeur totale du formulaire.

La deuxième ligne

CSS style for border on the contact form:

permet d'indiquer notamment la couleur du cadre (color) du formulaire et l'espace entre le cadre et le formulaire (padding), la largeur totale du formulaire.

La troisième ligne

CSS style for required field text on the contact form:

permet d'indiquer la couleur de la police qu'utilisera le lecteur pour remplir les champs du formulaire.

La cinquième ligne

Style CSS pour les titres des champs du formulaire:

permet notamment d'indiquer l'espacement des titres du formulaire, mais la couleur des titres n'est pas modifiée.

La sixième ligne

Style CSS pour les champs du formulaire:

permet de modifier la couleur du fond des champs de saisie et celle de la police utilisée.

La huitième ligne

Style CSS pour les erreurs de saisies du formulaire:

permet de modifier la couleur d'affichage du message d'erreur en cas de saisie incomplète des champs requis.

Les dixième et onzième lignes

Style CSS pour le DIV du petit CAPTCHA:

et

Style CSS pour le DIV du petit CAPTCHA:

permettent d'indiquer la taille des captchas.

La ligne

Taille du champ de texte:

permet d'indiquer la largeur des champs de saisie (nom, adresse mail, sujet,...).

La ligne

Nombre de colonnes de la boîte texte:

permet de préciser la largeur du champ du message.

[Diaporama]

Les champs requis

Le formulaire Champs permet de spécifier le message qui sera affiché pour indiquer les champs obligatoires ; il permet d'activer ou pas la fonction "champ requis".

[Diaporama]

Ne pas oublier de cliquer sur le bouton "Mettre à jour les options" pour enregistrer les modifications.


Ecrit par Lise - Site