WordPress – Générer un formulaire de contact

ParFredSab

Si vous souhaitez mettre en place un formulaire de contact efficace et sécurisé sur votre site WordPress, je vous invite fortement à utiliser Contact Form 7.


Exemple de formulaire à reproduire :


Code à reproduire pour le réaliser :

<label> Nom*
[text* your-name placeholder « Prenom Nom »] </label>

–> <label> est la balise à utiliser pour créer un champ quelque soit son type.
–> text*, entre crochet, vous crée un champ de type Texte. Il existe aussi entre autres : email, tel et textarea.
–> placeholder « Votre texte » permet d’afficher un exemple ou une indication.

Vous pouvez également ajouter une classe (class), une longueur minimum (minlength) ou maximum (maxlength)
Exemple : [tel your-number class:wpcf7-numbers-only minlength:10 maxlength:10 placeholder « 0600000000 »]
Dans cet exemple, wpcf7-numbers-only est une classe qui indique au champ de n’accepter que des valeurs numériques.

Le bouton Envoyer se créé quant à lui via la syntaxe suivante : [submit « Envoyer »]

Afin de permettre l’envoi d’une pièce jointe, vous pouvez également saisir cela :
[file pj filetypes:png|txt|log limit:2mb]
–>filetypes permet de définir le type de pièce jointe autorisé
–>limit est utilisé pour fixer une taille limite.

Contact Form 7 vous permet également de personnaliser le corps du message reçu, l’adresse mail de destination, et le message de confirmation d’envoi du message.


Personnalisation via du CSS additionnel :

Il est possible de personnaliser les éléments de votre formulaire en y ajoutant du CSS additionnel. Pour cela, il faut vous rendre depuis votre menu WordPress dans Apparence / Personnaliser / CSS additionnel

Exemple de CSS additionnel pour rendre le bouton Envoyer vert :


.wpcf7 input[type="submit"] {
	background-color: #7c8e6b;
	border-color: #7c8e6b;
}

PS : Pour protéger votre formulaire contre les robots, il est judicieux d’y a jouter un Captcha.

Publications similaires