Magazine High tech

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]
110222_contact_01
110222_contact_02
110222_contact_03
110222_contact_04
110222_contact_05
110222_contact_06

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]
110222_contact_07

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]
110222_contact_08a
110222_contact_09
110222_contact_11

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]
110222_contact_12
110222_contact_13

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]
110222_contact_14

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]
110222_contact_15

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]
110222_contact_16

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


Ecrit par Lise - Site

Retour à La Une de Logo Paperblog

A propos de l’auteur


Leblogdelise 122 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog

Magazine