WordPressFormulaire WordPress
Réaliser un formulaire dans WordPress
Comment créer un formulaire de contact dans WordPress?
Vous l'avez sans nul doute remarqué, WordPress est livré sans formulaire de contact.Il faut donc télécharger une extension gratuite comme Contact form 7.
- Soit à télécharger dans le dossier "/wp-content/plugins/" puis aller dans le menu du tableau de bord "Extensions/Plugins".
- Soit directement dans le menu "Extensions" en saisissant dans la barre de recherche 'Contact form 7'.
Notez que l'ajout du formulaire dans une page WordPress ou un article se fera par l'ajout d'un "shortcode", délivré lors de la création du formulaire lui-même :
[contact-form-7 id="65" title="Formulaire de contact 1"]
Plus d'infos sur WordPress.fr
Attention: Si vous êtes hébergé chez 1&1 IONOS, votre mail de Contact Form 7 ne fonctionnera pas! Pour pouvoir se servir de la fonction mail avec l'extension Contact Form 7 chez IONOS 1&1, il faut avoir configuré un email dans l'espace client IONOS 1&1
Voici la procédure :
Voici la procédure :
- Dans l'espace client, cliquez sur "Configurer les adresses e-mail"
- Cliquez ensuite sur "E-mail Basic"
- Créer enfin une nouvelle adresse e-mail (Exemple : monprenom@monsite.com) avec une redirection vers votre adresse classique
Comment transformer le style du formulaire ContactForm7 dans WordPress?
On utilise un CSS additionnel (menu du tableau de bord : Apparence > Thèmes > Personnaliser) comme celui-ci :
/* Style sur le fond et les bordures du formulaire */
div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
}
/* Style sur les textes du formulaire */
.wpcf7 legend {
color:#fff;
font-family:lora, sans-serif;
}
/* Style sur les champs du formulaire */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
}
/* Style sur les boutons du formulaire */
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
} Formulaire WordPress avec stockage dans une base de données
On utilise l'extension (plug-in) CFDB : Contact Form DBAttention, cette extension nécessite l'installation préalable de l'extension Contact Form 7
Pour fonctionner, il faut remplir au moins 1 formulaire
Dans le menu Short Code, on sélectionne notre formulaire (Formulaire de contact 1) et
- on peut exporter la table vers un fichier Excel CSV
- réaliser un short code d'affichage (cfdb-Values ou cfdb_Table) dans une nouvelle page. Exemple :
[cfdb-table form="Formulaire de contact 1" hide="Submitted,submit_time" headers="your-name=Votre nom"]
Note : attention à la case des noms des champs!
