Retranscription vidéo
Salut, c’est Alex. Aujourd’hui, on va voir ensemble comment faire pour, installer et paramétrer contact form seven.
Contact form seven, c’est un plugin qu’on va donc installer sur wordpress, et qui va être extrêmement utile, notamment à vos visiteurs pour pouvoir
vous contacter.
Alors ici donc, on est sur mon site, donc Twaino, twaino.com,
et donc bah typiquement, moi je vais avoir besoin de
rajouter effectivement…
Heu…ici dans la partie « contactez-nous », j’aurai besoin de rajouter un
formulaire, pour effectivement aider les personnes à me contacter beaucoup plus facilement. Bon.
Alors, ce que je vais faire, donc pour faire ça, dans un premier temps, donc on va se rendre
sur la console d’admin
de votre wordpress. Alors, si jamais vous n’avez pas installé
contact form seven, vous cliquez ici sur « ajouter » et ensuite en haut à droite…
Voilà.
Donc vous voyez, c’est celui-ci. Moi je l’ai déjà installé, donc je ne vais pas le réinstaller de nouveau.
Mais là, c’est un petit tour, un petit dessin un peu japonais,
parce que je pense que le créateur d’ailleurs est japonais, et vous voyez c’est un add-on qui est extrêmement populaire, qui fonctionne extrêmement bien
et globalement heu,
moi je vous le recommande vivement.
Donc, une fois que vous l’avez installé,
vous allez avoir
dans votre barre latérale, une partie qui va s’appeler » contact ». En fait, contact form seven, c’est euh, c’est
ça en fait, c’est cette partie contact avec la petite enveloppe ici.
Donc,
si vous cliquez dessus,
vous allez avoir ici, voilà plusieurs possibilités. Alors, ce qu’on va faire ensemble, c’est que par défaut, il y a toujours un heu…
un formulaire qui a été créé automatiquement. Ok, moi ce que je vais vous proposer dans cette vidéo,
c’est de vous montrer depuis zéro comment faire. Donc, pour ça, il faut appuyer sur « créer un formulaire ».
Ok. Donc, dans un premier temps, ce que vous pouvez faire, bien évidemment
ça va être le fait de paramétrer, bah de donner un nom. Donc par exemple euh,
ça peut être euh…
donc form one.
Et ensuite, vous voyez, là il y a différents, alors déjà il y a plusieurs euh, il y a plusieurs fenêtres ici, ok ?
La première
fenêtre, c’est ce qui va vous permettre
de,
paramétrer à proprement parler votre formulaire. Ok,
la deuxième hum…
Donc, bien évidemment ne vous inquiétez pas, je vais rentrer dans le détail dans un instant.
Ensuite, le deuxième onglet, c’est lié aux e-mails donc typiquement, lorsque des gens vont envoyer un formulaire,
et bien vous allez recevoir leurs informations
dans votre email. Donc typiquement, vous pouvez paramétrer ce champ.
Moi à titre personnel, souvent par défaut, c’est très bien paramétré, donc je ne touche pas forcément, ok ?
Et le troisième onglet, ça va être les messages par défaut qui sont
envoyés. Par exemple, si jamais une personne
tape mal quelque chose ou si jamais, il y a des champs obligatoires
dans votre formulaire et qui ne sont pas remplis, bien évidemment, il y aura un message automatique qui sera envoyé
via
contact form seven.
Et ensuite, il y a des éléments additionnels…
Hum bon, je ne vais pas forcément rentrer dans les détails de cela mais effectivement, pour si vous avez besoin d’aller plus loin,
il y a des réglages qu’on peut faire de manière additionnelle.
Donc,
mon formulaire donc s’appelle form one, je vais l’enregistrer.
Ok. Alors là vous voyez, quand on enregistre,
là on obtient directement le code. Ok. Alors là, ce code ce qu’on va faire,
c’est qu’on va le copier,
et hum, ce que je vais faire c’est que je vais créer hum…
Alors, hop…
je vais créer une page tac, donc « ajouter ».
Une fois que le formulaire sera propre, je l’intégrerai directement sur ma homepage. Mais là, pour des raisons disons pédagogiques,
c’est plus simple de vous montrer à travers ça. Donc, le code qu’on a récupéré ici,
ce qu’on va faire c’est que une fois qu’on l’a copié, vous allez cliquer ici sur « texte ».
Pas sur visuel mais sur « texte ». Si vous copiez directement ici sur « visuel », et que vous copiez et collez directement
le code ici, ça ne va pas forcément fonctionner. Donc bel et bien sur « texte » ici, et on copie, bah on colle ici. Ok ?
Donc une fois que c’est fait,
vous allez voir, donc là ici, il y a différentes informations qui sont fournies. Donc par exemple, alors ça paraît un peu heu…,
un peu rude comme ça mais ne vous inquiétez pas, ça va être clair dans quelques instants.
Donc il y a votre nom ok, ensuite votre adresse de messagerie,
objet, votre message, et enfin submit, donc <>, et envoyer. Ok,
donc typiquement sur la page où j’ai mis mon code,
on va appuyer sur « aperçu ».
Et vous voyez
donc votre nom,
votre adresse de messagerie,
objet, votre message.
Donc, c’est exactement les mêmes champs. Et typiquement ce qu’on va faire,
euh et ce que je vais vous montrer au cours de cette vidéo, c’est comment faire pour changer certains de ces champs, en rajouter,
potentiellement en retirer, et quelles sont les différentes modalités
finalement, que vous allez pouvoir utiliser
pour customiser, pour améliorer finalement votre formulaire de contact. Ok.
Alors,
déjà, l’élément qu’il faut retenir c’est que, ça commencera toujours par ,et ça finira toujours par
aussi comme ça, d’accord ? Donc ça, c’est l’équivalent d’une section. Par exemple, ceci,
cela, ça, ou ça, ok ?
Ce texte, ici, ça fait parti des éléments finalement qu’on va pouvoir changer. On va pouvoir changer le nom.
Par exemple, si à la place de obligatoire entre parenthèses, vous vouliez mettre une petite étoile,
et que vous enregistrez,
eh ben lorsqu’on fait donc « aperçu »,
vous voyez,
automatiquement bah on a changé directement ici. Donc, on est passé de « obligatoire » à la petite étoile. Donc autrement dit,
ce texte ici, c’est quelque chose que vous pouvez changer à votre gré, d’accord ? La partie qui est en dessous,
c’est ce qui va être lié entre guillemets à,
un peu de code en fait. Ne vous inquiétez pas, si ça ne vous parle pas du tout, dans quelques instants, ça sera le cas,
parce qu’en fait, pour pouvoir vous aider à créer
ce mini code, il y a ces boutons qui sont ici, ok ?
Donc typiquement, euh…
comment ça fonctionne ?
Là, il y a donc le « nom » ok, ensuite votre « adresse de messagerie ». Vous voyez, ce sont aussi des éléments qui sont
obligatoires. Ensuite donc c’est « objet », ensuite « votre message ». Donc, ça veut dire que ici,
si vous souhaitez par exemple, rajouter
euh…une question, par exemple
« où habitez vous ? »,
et que… Donc voilà, donc là vous souhaitez poser cette question là
à votre audience, et donc ce que vous allez faire c’est que, vous allez rajouter une partie « texte ».
Et donc, c’est là que entre guillemets, le paramétrage se fait.
Donc dans cette partie texte, donc en fait ce serait une partie texte exactement comme celle-ci.
Dans cette partie texte, vous avez plusieurs éléments. Par exemple, vous pouvez rendre votre champ obligatoire.
Par exemple,
si jamais une personne ne remplit pas ce champ, et qu’elle appuie sur « envoyer »,
il y aura un message d’erreur pour dire, que le message n’est pas envoyé parce que ce champ spécifique est obligatoire.
Donc si vous cochez, vous rendez ce champ obligatoire.
Ensuite ici, vous pouvez donner un nom. Typiquement, c’est quelque chose que je ne change
jamais, et par exemple, vous pouvez aussi mettre une valeur par défaut. Par exemple, euh je ne sais pas comme valeur par défaut, vous pouvez mettre « Paris ».
D’accord, « Paris », « Lyon »… Bref, une ville.
Hum
ensuite, un autre élément ici effectivement pour…
Vous pouvez utiliser un autre add-on que j’aurais d’ailleurs tendance à vous recommander, qui s’appelle << Akismet >>
et qui permet effectivement d’éviter d’avoir des spams. Donc, c’est un élément qu’on peut
avoir et qu’on peut rajouter en plus. Ok ?
Donc, en fonction de ça, vous remplissez en fonction de vos besoins. Alors, il y a aussi « attributs » et « attributs de classe ».
Globalement, ça c’est des éléments dont je ne me sers pas. Euh…mais ça permet en fait d’identifier, euh…
L’information est d’ailleurs plus simple, mais globalement…
Bon après vous faites comme vous voulez si vous voulez pousser la chose un peu plus loin. Mais ici vraiment,
ce n’est pas l’élément qui est le plus important. Si jamais vous
cliquez sur « insérer la balise » de cette manière, ça va fonctionner. Ok ?
Donc là par exemple si on enregistre,…
Hop, je vais mettre « aperçu »…
Voilà ! Donc là ici maintenant, j’ai un nouveau champ qui a été rajouté, où effectivement donc les personnes peuvent compléter
leur ville, peuvent compléter
les éléments qui nous intéressent. Donc ça, c’est le premier euh, c’est la première
première option.
Hop
Deuxième option alors, vous pouvez rajouter l’e-mail.
Alors là, ce n’est pas forcément un cas que je vais traiter parce que par défaut, vous voyez l’e-mail est ici et,
lorsque vous voyez ici qu’il y a une petite étoile, c’est à dire que c’est un champ obligatoire.
Ok donc, si jamais pour une raison x ou y vous êtes amenés à euh…
comment ? À effacer l’ensemble des informations qui sont ici, vous pouvez les rajouter assez facilement d’accord ?
Ensuite l’URL.
Alors, ça typiquement, ça va être un élément
effectivement qui va m’intéresser.
Alors, je vais le faire typiquement pour,
pour le formulaire que je souhaite créer.
Donc…
Alors, euh…
votre site web…
Alors tac, votre site web, et ce que je vais faire donc, je vais me rendre ici, et je vais appuyer sur « URL ».
Alors, encore une fois, vous pouvez rendre ce champ
obligatoire ou non.
Par défaut, vous pouvez donner aussi une valeur. Par exemple je vais vous montrer. Par exemple, si on fait tac…
donc valeur par défaut pour le site, bah l’URL ça serait www.exemple.com. Hum…
et qu’ensuite, on appuie donc sur « OK », là vous voyez, il y a une preview du code. Et lorsqu’on appuie sur « insérer la balise »,
donc la balise s’est installée ici. Donc si on enregistre…
Donc là maintenant, vous voyez ici effectivement donc votre site web, et par défaut, il y a une information qui est ici donc avec,
avec euh…
l’exemple que j’ai donné. D’accord, donc ça peut être pratique effectivement parfois, pour aider
certains utilisateurs qui ne sont pas forcément inspirés à mettre des mots-clés ou ce genre de chose.
Donc voilà ! Alors, moi ce que je vais faire c’est typiquement… Je préfère quand c’est clean…
hop donc, je vais laisser ça comme ça.
Alors ensuite, vous pouvez bien évidemment rajouter aussi
un téléphone ( numéro de téléphone ), certains nombres, certaines dates. Par exemple, hum…
par exemple votre date d’anniversaire.
Hop
Donc, on va faire ça comme ça, « /label »,
et on va aller juste devant ici et donc, on va mettre « date ».
Donc, on peut mettre par exemple champ obligatoire… Non, on ne va pas le mettre d’ailleurs.. Non, ok valeur par défaut, hum…
hop…
Et donc vous voyez ici
effectivement, donc il y a les jours, les mois, les années. Et donc, si vous voulez directement cliquer,
vous pouvez choisir votre date directement et ça sera renseigné, ok ?
Donc assez simple.
Hop
Alors, ensuite effectivement, il y a d’autres élément. Par exemple, « zone de texte », ensuite « menu déroulant ». Alors,
un menu déroulant par exemple, c’est lorsque vous allez avoir plusieurs possibilités. Par exemple,
souhaitez-vous ?…
Souhaitez-vous
obtenir plus de trafic sur votre site ?
Donc même principe, on met les labels,
et ensuite on vient devant,
et donc on va cliquer ici sur « menu déroulant ».
Donc, vous pouvez encore une fois mettre en champ obligatoire ou non. Et donc ensuite,
vous pouvez ici alors,
rentrer les différentes réponses qui sont attendues. Alors, par exemple ça peut être « oui »
« non », bah de manière très simple, ou par exemple » un peu ».
Là, vous effectivement
proposer donc une sélection multiple.
Alors, on peut avoir « oui, un peu ». Donc voilà, dans le cadre de mon exemple, ça s’y prête assez peu mais effectivement,
vous pouvez rajouter ces éléments là et vous pouvez aussi rajouter un choix vide. Ok, donc
hop, « enregistrer »…
Donc, « souhaitez-vous obtenir plus de trafic sur votre site web ? »
Tac donc, oui/non/un peu. Et là typiquement vous voyez, on ne peut sélectionner qu’une seule réponse.
Ok,
donc effectivement, donc avec menu déroulant, on peut aussi avoir une option donc « case à cocher »,
qui ait à peu près le même principe en fait, que menu déroulant. La seule chose c’est qu’effectivement, on peut faire aussi des critères d’exclusivité.
Par exemple si vous cochez une case,
bah certaines autres cases ne pourront pas être cochées par défaut. Ce genre de choses.
Ensuite, on peut avoir effectivement alors, l’option « bouton radio ».
Alors,
par exemple on peut faire,
« connaissez-vous le SEO ? » tac,
et donc ici, on peut mettre effectivement « bouton radio ». Donc par exemple,
« oui », « non », « un peu »,
« beaucoup ». Tac
Hop
Donc voilà, par exemple ici on a donc, « connaissez vous le SEO ? »
Oui/Non/Un peu/Beaucoup, ok.
Ok.
Ensuite alors effectivement, il peut y avoir aussi d’avoir des confirmations. Par exemple, si vous avez besoin
d’avoir par exemple, je ne sais pas moi, des mentions
légales ou ce genre de choses, vous savez en bas des formulaires parfois, c’est des choses qui sont plus ou moins pré-cochées.
Bah typiquement voilà, vous pouvez euh,
vous pouvez activer ce genre de choses.
Il y a une partie quiz que moi je n’utilise jamais. Je pense que ce n’est pas forcément la meilleure
façon de faire des quiz, il y a des outils qui sont bien plus puissants. Mais bon,
contact form seven le propose. Un autre élément qui peut être intéressant effectivement, ça peut être au niveau des « fichiers ».
Au niveau des fichiers, vous pouvez par exemple, collecter certains fichiers. Par exemple, alors tac,
on va copier ça,
par exemple je ne sais pas moi,
votre CV par exemple ou une autre information.
Si vous mettez ici donc « fichiers », si vous rendez le champ obligatoire, vous pouvez limiter la taille…euh…si vous
voulez, vous pouvez mettre aussi les types de fichiers acceptés, donc par exemple pdf, et si vous admettez insérez ici et qu’on enregistre…
hop, et donc là je mets « aperçu »…
Donc là, vous voyez maintenant votre fichier…aucun fichier choisi, et donc là après bon vous pouvez sélectionner
les documents qui vous intéressent
Ok,
donc ça, ça peut être pratique aussi dans le cadre d’un formulaire.
Et enfin effectivement, il y a le bouton « envoyer ».
Heu…Donc voilà, avec le libellé que vous souhaitez indiquer, heu…
donc ce qui revient exactement,
finalement, à la même chose que celui-ci,
ok ?
Donc typiquement, moi ce que je vais faire maintenant euh…
alors tac,
je vais vérifier à quoi ressemble
ce formulaire.
Donc votre nom, votre adresse de messagerie,
votre site web, objet, votre message.
Alors,
moi ce que je vais faire, ce que j’aime bien faire,
c’est que je vais quand même modifier cet élément. Et ce que je fais d’habitude, c’est qu’effectivement, j’aimerais mettre des étoiles.
Alors, le site web je ne vais pas le rendre obligatoire,
mais typiquement, heu…
Hop,
là quand vous voyez des étoiles, ça veut dire que les gens doivent,
les personnes qui vont vous contacter via ce formulaire
doivent
absolument remplir
ces infos. Ok ?
Donc, maintenant ça c’est fait. Je vais enregistrer.
Et simplement pour vous montrer ce que ça donne concrètement, on va remplir ensemble.
Hop
Donc par exemple si j’appuie ici, sur donc « envoyer », bien
évidement, là vous voyez, tous les heu…Il y a plein d’erreurs qui sont présentes,
tout simplement parce qu’en fait,
c’est des champs obligatoires.
Donc par exemple « site web »,
je ne l’ai pas mis, rendu en obligatoire parce que des fois, il y a peut-être des personnes qui vont vous contacter et qui n’auront pas de site web.
Mais globalement, ça, ça va vous éviter aussi, ça va vous permettre de trier un minimum de contenu que vous allez recevoir.
Donc par exemple, si je mets donc Alexandre Marotel tac, donc mon site web https://ppp.twaino.com,
heu…alors,
« améliorer mon trafic »,
alors, « salut Alex,
peux-tu m’aider à améliorer
mon trafic
sur mon site web ? »,
« Merci », « Kiss ».
Donc, lorsqu’on envoie hop, donc vous voyez on a le message donc, « merci, votre message a été envoyé correctement », et donc là,
hop si je me rends
sur, donc « Twaino »,
« améliorer mon trafic »…
Tac, donc ça, c’est l’image que j’ai reçu. Et donc typiquement, voilà donc je revois le message que je viens d’écrire bien évidemment
et,
elle est différente, la façon de disposer ces informations ici.
En fait, ce n’est rien d’autre
que les informations que vous pouvez
paramétrer ici, d’accord ? Donc
moi globalement, je ne le change pas. Vous pouvez le faire, si jamais ça ne vous plaît pas, la manière dont c’est présenté.
Heu… mais par défaut, ça fonctionne bien. Donc maintenant que tout ça c’est fait,
et que donc, on
a un formulaire euh…
qui me convient,
ce que je vais faire, c’est que je vais l’intégrer maintenant sur ma homepage, ok ? Donc là maintenant, je vais fermer ça,
donc je ne vais pas enregistrer.
Ok. Donc là, c’est un site que je suis en train de construire en ce moment,
hum…
et donc il va falloir je fasse un peu de remplissage sur certains endroits.
Mais bon, globalement voilà. Donc il faut que je l’intègre ici.
Alors, la manière de faire, donc on va aller sur « modifier la page »…
La manière dont je vais procéder maintenant pour intégrer le code, va être différente de la manière
que j’ai pu le faire au tout début sur la page des articles.
Tout simplement parce qu’en fait ici, donc mon thème s’appelle Avada, et donc, je travaille notamment
avec Fusion Builder. Et donc, typiquement bon, la façon de faire
est un peu différente. Mais en gros, la manière de faire sur Avada est assez simple. On appuie ici donc « + » sur « Eléments »,
ensuite on va appuyer ici sur « code block ». Donc on tape « code block »,
et ensuite donc, on va simplement prendre ce code ici,
et le coller là, et sauvegarder. Donc on va mettre à jour,
et ensuite on va faire preview.
Ok. Donc, vérifions.
Ok, donc vous voyez maintenant les informations ici
sont correctes.
Donc adresse de messagerie, site web, votre message,…d’ailleurs ici, il va falloir que je rajoute une petite étoile.
Hop, c’est ce que je vais faire maintenant.
Enregistrer…
Et donc bah globalement moi, c’est un formulaire qui me convient, c’est un formulaire de contact qui est parfait. Donc euh…
donc comme ça, si les personnes qui consultent Twaino souhaitent me joindre, souhaitent me contacter, eh ben ils auront alors soit,
via le téléphone bien évidemment, soit s’ils préfèrent directement via leur email.
Mais parfois effectivement, on peut avoir la volonté d’utiliser
directement un
formulaire de contact et donc, c’est exactement ce que vous permet de faire
contact form seven.
Donc, j’espère que cette vidéo, elle vous aura intéressé, elle vous aura plu.
Heu contact form seven, là, l’élément que j’ai pu vous montrer, c’est vraiment donc l’installation et le paramétrage de base.
Ce qu’il faut savoir c’est que, c’est un plugin aussi qui est ouvert sur beaucoup d’autres choses. Notamment ça permet, heu on peut par exemple,
paramétrer
contact form seven directement avec mailchimp, donc ce qui permet de collecter automatiquement les e-mails que vous recevez.
Donc ça, ça peut être un élément qui peut être intéressant. J’aurai l’occasion de faire une vidéo sur le sujet si ça vous intéresse.
Il y a aussi possibilité
avec
contact form seven de créer ce qu’on appelle des redirections. Alors l’idée ce n’est pas d’être technique, c’est simplement que
lorsqu’une personne par exemple, va vous envoyer un formulaire ou va vous envoyer un e-mail,
ça peut être intéressant de rediriger cette personne là sur une autre page, par exemple une page de remerciement.
Alors, ça paraît peut-être un peu bizarre, pourquoi faire ça ?
En fait, c’est intéressant de faire ça, parce que d’un point de vue SEO, vous allez pouvoir suivre
le nombre de personnes
qui ont été redirigées vers cette page de remerciement, et vous allez pouvoir suivre
le nombre de personnes au fil du temps. Et donc, au niveau de vos conversions, vous allez pouvoir avoir une vision beaucoup plus claire
de jour en jour, semaines en semaines, mois à mois, du nombre
de personnes qui vont vous contacter et, du nombre d’e-mails que vous avez de manière supplémentaire.
Ça, ça sera dans le cadre de prochaines vidéos. Dans tous les cas, heu… À bientôt !
