Dans ce tuto vidéo, nous allons voir ensemble comment créer un formulaire de contact et l’intégrer dans votre site WordPress afin de laisser la possibilité à vos clients de vous contacter rapidement.
Dans un second temps nous irons plus loin dans l'utilisation de ce formulaire, comme par exemple sauvegarder les emails envoyés en base de données.
Au programme de ce tuto dédié au formulaire de contact dans WordPress
Cette formation se déroulera en 2 chapitres :
INSTALLATION & BASES D’UTILISATION
- Introduction
- Installation & configuration du plugin
- Création d’une page contact & Insertion du shortcode de 2 façons différentes
- Explications sur le fonctionnement des différents types de champs
- Créer le formulaire et le styliser à l’aide de Bootstrap
- Personnaliser l’email envoyé & tester l’envoi sur une boite email
ALLER PLUS LOIN
- Sauvegarder les emails envoyés pour garder une trace
- Modifier l’apparence du formulaire avec du CSS personnalisé
- Faire passer des variables GET dans l’url pour personnaliser un champ dynamiquement
- Ajouter un quiz pour empêcher les robots de soumettre le formulaire
- Renvoyer vers une nouvelle page une fois l’email envoyé
- Laisser le choix entre plusieurs destinataires
- Documentation & Conclusion
Aucune connaissance n’est requise pour suivre le tuto dans de bonnes conditions. Seulement avoir une installation de WordPress et un thème qui utilise Bootstrap.
Vous trouverez dans les sources, le formulaire obtenu à la fin de la formation.
Je suis disponible dans le salon d’entraide si vous avez des questions pendant ou après le visionnage de la formation.
Table des matières de cette formation WordPress, Bootstrap (durée : 1h24m)
-
INSTALLATION & BASES D’UTILISATION
- Introduction gratuit 00:02:17
- Installation & configuration du plugin 00:08:45
- Création d’une page contact & Insertion du shortcode 00:11:54
- Fonctionnement des types de champs 00:04:47
- Créer le formulaire et le styliser à l’aide de Bootstrap 00:10:51
- Personnaliser l’email envoyé & tester l'envoi sur une boite email 00:11:10
-
ALLER PLUS LOIN
- Sauvegarder les emails envoyés 00:05:51
- Modifier l’apparence du formulaire avec du CSS 00:05:02
- Faire passer des variables GET dans le formulaire 00:07:54
- Ajouter un quiz pour les robots 00:03:40
- Renvoyer vers une nouvelle page après l'envoi 00:03:47
- Laisser le choix entre plusieurs destinataires 00:05:22
- Documentation & Conclusion 00:03:04
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Merci beaucoup, juste pour la question quiz, comment faisions-nous pour avoir différentes questions quiz, sinon ça serait toujours la meme question, donc aucune sécurité, je me trompe?
-
Merci au formateur pour cette formation à la fois claire et déjà pas mal approfondie.
-
Merci pour ce très bon Tuto. Très utile pour les sauvegardes de mails. J'aimerai voir comment créer la page privée pour accéder aux mails sauvegardés. En amélioration : les conditions dans un formulaire. Ex : rendre des champs obligatoires si une checkbox est checké...etc
-
Avec quelles versions de logiciels ce tuto est-il compatible ?WordPress 3, WordPress 4, Bootstrap 4, Bootstrap 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Comment faire si mon thème n'utilise pas Bootstrap ?Il suffit de rajouter cette feuille de style dans le header de votre thème grâce à cette url : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Sinon vous pouvez aussi installer un plugin comme Easy Bootstrap qui s'occupera de tout et vous permettra même de profiter des shortcodes dans l'admin : https://fr.wordpress.org/plugins/easy-bootstrap-shortcodes -
Mes emails ne partent pas ?Vous devrez être en local sur votre machine avec Wamp ou Mamp, il faut donc configurer le php.ini en spécifiant le smtp de votre FAI (par exemple : smtp.free.fr).
Si cela ne fonctionne pas, ne vous inquiétez pas lorsque vous mettrez le site en ligne sur un serveur, les emails partiront sans problème.
note moyenne
avis laissés