The Divi Contact Form module and the RGPD

Published on 02/06/2018 | 53 comments

We saw in a previous article how to put to the RGPD standards the opt-in form generated by Bloom. However, if you use the Divi theme, it is likely that you will use the Contact Form module offered by the Divi Builder. In this article, I will explain how to make the Divi RGDP Contact Form module friendly!

 

Create or edit the Divi Contact Form module via the back office

Either you create a new form, or you edit an existing form: the procedure remains the same...

Ajouter le champ pour être conforme au RGPD

Here is the procedure corresponding to the numbered tablets in the image above:

  1. Following your classic fields such as last name, first name or email, you will need to add a new field.
  2. Enter the ID of the field: you can name it as you wish but this ID must be unique on your site, it must not be used elsewhere. It must be composed of lowercase letters without special characters.
  3. Enter a title: this field is required and will be visible on the visitor side.
  4. Select the field type: CHECKBOX. Your field will be a checkbox.
  5. In the options, add your text such as "I have read and accept your Privacy Policy". This field must be REQUIRED.
  6. Save your field, then your module and update your page.

 

Optimize the Divi Contact Form module for the RGPD via the Visual Builder

In the previous step, we did only half the work. In order to comply with the DGMP, you must provide easy access to your Privacy Policy, in other words, a link to this page. The Divi Builder does not allow this to be done from the back office, so we will use the Visual Builder (front office side).

Insérer le lien vers votre Politique de Confidentialité via le Visual Builder

  1. Once your page is updated (step 6 of the previous chapter), you can click on "Use the Visual Builder".
  2. The page opens on the front office side and you can modify the Contact Form module by clicking on the gearwheel icon (on the grey block!).
  3. The configuration options will open in a popup and you can act on your CHECKBOX field.
  4. Click on the link icon to add the link to your privacy policy.
  5. Verify that the REQUIRED FIELD option is enabled.
  6. Enter this link in the "Link URL" field.
  7. Save the field.
  8. Save the module and don't forget to save your page so that your changes are taken into account.

 

Check the link to your Privacy Policy

Lien directement dans le formulaire de contact

Here it is, a new checkbox has appeared and will have to be ticked for the form to be sent. The link to your privacy policy is clickable and you are in good standing with the RGPD!!!!

You haven't yet opted for the Divi theme ? Click here to learn more about it (affiliate link).

 

module formulaire de contact de Divi + RGPD

Add an RGPD field to the Divi contact module

 

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

53 Commentaires

  1. Cécé LOUA

    Je suis intéressé

  2. Alexis

    Merci pour l’astuce !
    Cependant je n’ai pas le symbole « flèche qui sort d’un carré » pour signaler un lien blank qui apparait correctement dans Firefox (nickel dans Safari) ; une piste ?
    D’avance merci pour la réponse

  3. Lycia

    Hello Alexis, je vois ce que tu veux dire. Je crois que j’ai le même problème sur l’un de mes formulaires. Je ne sais pas comment y remédier. Désolée. Si tu trouves, n’hésite pas à nous donner le tuyau 😉

  4. Phil

    Bonjour. Question qui peut paraitre simpliste, mais je ne trouve pas où modifier l’email de contact dans le formulaire Divi.
    PS : ce n’est pas moi qui ait fait ce site, je débute sur WP et Divi
    merci

  5. Lycia

    Bonjour Phil, pourtant, ce sont dans les options, lorsque vous ouvrez le module, vous l’avez trouvé ?

  6. Jean-Michel Metzger

    Bonsoir
    Le lien est saisi a la bonne place, tout est enregistre, le petit carre avec la flèche sortante s’affiche 🙂 mais a l’utilisation la page de confidentialité n’est pas trouvée; pourtant elle existe.
    Une chose n’est pas claire pour moi, comment « utiliser le Visual Builder » cote front office ?

  7. Lycia

    Bonsoir Jean Michel ! Il suffit de cliquer sur « activer le Visual Builder » quand vous éditez une page. Le bouton vert (je crois, de mémoire). Sinon, quand vous visitez une page de votre site en étant connecté, vous verrez un bouton violet tout en haut dans la barre d’administration « activer le visual Builder ». Vous les voyez ?

  8. Jean-Michel Metzger

    Oui ok, je le vois mais je ne vois la barre d’administration que dans le back-office !?

  9. Lycia

    Ah bon ? Utilisez vous un autre thème que Divi ?

  10. Jean-Michel Metzger

    Oui desole, c’est ok pour le Visual Builder mais ma page n’est toujours pas trouvee !

  11. Lycia

    Vérifiez si votre URL est bien saisie. Des fois ça tient à rien… normalement ça marche, je l’ai encore fait hier sur un site.

  12. Jean-Michel Metzger

    J’ai vérifié mais rien a faire. Il y a peut-etre quelque-chose a voir avec le nom d’enregistrement de la page de confidentialité ?

  13. Garnavault

    Bonsoir,
    Il me faut dans mon formulaire de contact intégrer la possibilité de choisir parmi trois destinataires possibles (Mairie, Association, Webmaster).
    Dans l’état actuel du formulaire de contact de Divi je ne vois pas comment arriver à ce résultat.
    Est-ce envisageable et comment procéder ?
    Merci d’avance de vos réponses.

  14. Lycia

    Hello Bernard ! Pour cette fonctionnalité, je pencherai plutôt pour Caldera Forms, un plugin hyper puissant qui permet d’émettre des conditions : https://fr.wordpress.org/plugins/caldera-forms/

  15. is

    Merci de votre réponse.
    Je vais de nouveau me pencher sur cette extension qui semble être l’une des meilleures dans ce domaine.
    Le paramétrage n’en est pas très évident et je vais relire la documentation y afférente.

  16. Dev-Web.LC

    Bonjour,

    Tuto parfait suivi à la lettre pour une de mes clientes et ça fonctionne parfaitement. Je commence avec le thème Divi votre site est donc très précieux.
    J’ai une petite question supplémentaire si vous avez 2 minutes. Mon formulaire est sur fond Bleu j’ai donc mis les polices en White et bold ce qui ressort parfaitement. Sauf les messages d’avertissements quand on oublie un champs et le message qui est affiché en cas de succès de l’envoie du message. Je ne trouve pas la façon de changer la couleur de ces textes ? Je peux surement le faire en css mais si le builder le permet savez vous ou sont ces options.
    Un grand merci
    Laurent

  17. Lycia Diaz

    Merci Laurent ! Non effectivement ce sera en CSS. Il n’y a pas d’option pour ça… bonne continuation 😉

  18. Dev-Web.LC

    Parfait Merci de votre réponse !

  19. Burger Manuel

    Bonjour
    Vous ne parlez pas de faire un thème enfant pour l’installation de DIVI.
    Ce n’est pas utile ?
    J’ai acheté DIVI la formule à vie je vais lire tout vos postes avant de l’installer.

  20. John

    Bonjour et merci pour ce tuto rapide et simple

  21. Lycia Diaz

    Merci John !

  22. Philippe

    Bonjour et merci pour ce tuto. J’ai tout de même un problème que je n’arrive pas à résoudre. Le champ checkbox « RGPD » est configuré en tant que champ requis, pour autant lorsque je coche la case à cocher le formulaire me précise toujours que ce champ doit être rempli (en fait coché) et l’envoie n’a pas lieu. D’où cela peut-il venir ?

    Merci pour votre aide précieuse.
    Philippe

  23. Lycia Diaz

    Bonjour Philippe, vous avez trouvé ? Je pense qu’il faut vérifier quel est le type de champ. Que ce soit bien une case à cocher. Sinon, je ne vois pas…

  24. Théo BARATON

    Bonjour,

    Je ne vois pas bien comment faire un formulaire sur 2 colonnes mise à part les 2 premiers champs qui se positionnent l’un à coté de l’autre.

    Je vous remercie de votre aide.

  25. Lycia Diaz

    Bonjour Théo. Effectivement, il y a une option pour mettre les champs sur 1 seule colonne. Si elle n’est pas cochée, les champs sont côte à côte. Je ne suis pas sûre que cela soit applicable à tous les champs.

  26. Valerie M.

    Bonsoir et merci pour toutes ces astuces, si précieuses !
    J’ai une petite requête : j’ai installé le module Formulaire de contact de Divi.
    Et j’aimerai que l’expéditeur puisse recevoir une copie de son mail.
    Avez-vous une idée ?
    Merci,Valérie

  27. Lycia Diaz

    Bonjour Valérie. Je ne suis pas sûre que le module Formulaire de Divi propose cette fonctionnalité. Caldera Forms est un très bon plugin de formulaire qui propose cette fonctionnalité basique 😉

  28. Valerie M.

    Merci Lycia , je vais regarder… Belle journée

  29. gilles sabathe

    Bonjour ,

    Merci pour ce tuto. Comment peut on faire pour que l’on puisse garder la trace de l’acceptation des conditions du formulaire . Pour pouvoir prouver que le visiteur a bien cocher la case , comme avec le pluggin contact form 7 + plugin Flamingo ? avons nous la même possibilité avec le fromulaire divi ??

    Merci

  30. Lycia Diaz

    Bonjour Gilles. Il y a une trace seulement dans l’email que vous recevez. Il n’y a pas, à ma connaissance, un endroit où on peut retrouver cette info.

  31. DELGADO

    Merci pour votre article. Pouvez vous m’indiquer comment ouvrir l’onglet dans la même fenêtre, merci d’avance

  32. Mathis

    Bonjour, j’utilise DIVI depuis peu et j’aimerais savoir s’il est possible d’avoir des champs personnalisés en fonction du type de retour attendu.

    Exemple:

    Un champ de type nombre qui n’autorise que les nombres, avec pour contrôle une flèche haut et bas pour incrémenter ou non la valeur.

  33. Lycia Diaz

    Salut Mathis, les champs personnalisés existent mais je ne crois pas qu’il y ait celui que tu cherches.

  34. Mathis

    Merci Lycia, pour ta réponse. Il doit certainement y avoir possibilité d’éditer l’html ou injecter du JS mais pour l’instant c’est amplement suffisant.

    Un grand merci pour tes astuces et articles à propos de DIVI.

  35. Christiane

    Bonjour Lycia
    Je viens de me lancer dans un site WordPress avec Divi. A 78 ans c’est un peu de la folie. Bon le début me donne de l’espoir. Par contre j’ai un problème avec le Formulaire de contact (Divi Builder). Ca marche, je réceptionne bien le message mais pas de mention de l’adresse mail de la personne qui me l’a envoyé. Pourtant elle doit bien remplir le champ en question.
    Merci d’avance pour vos conseils.

  36. Lycia Diaz

    Bonjour Christiane et bravo pour votre courage de vous lancer ! Concernant les emails, avez-vous bien vérifier la configuration du module Formulaire ? Il y a peut-être quelque chose que vous avez oublié ? Si vraiment ça ne fonctionne pas, vous pourriez utiliser un autre plugin comme WP Forms (très facile) ou même Caldera Forms (un peu plus complexe).

  37. Philix

    En réponse à Christiane :

    J’ai (et tout le monde a ce souci). L4expéditeur du message c’est votre mail serveur, pas l’email de la personne.
    Pour récupérer l’email vous devez aller dans « Email », là où vous indiquez l’email de destination (vous).
    Juste sous l’email de destination, vous avez la zone « Modèle de message ».
    Dans celle§ci vous pouvez incorporer chacune des variables du formulaire.
    Ainsi par exemple :

    Expéditeur :
    %%name%% – %%email%%

    Message :
    %%message%%

    Vérifiez juste que vos variable s’appellent bien comme ça 😉

  38. Lycia Diaz

    Merci Philix pour ce complément d’information 😉

  39. Leila

    Bonjour,

    Savez-vous comment modifier la couleur du message de succès (pour un formulaire de contact) sur Divi ?

  40. arthur

    lorsque je rempli et envoi le formulaire depuis un autre appareil je ne reçois pas les résultats du formulaire sur mon mail, j’ai déja vérifié que j’ai bien rentré la bonne adresse mail

  41. Lycia Diaz

    Salut Arthur,
    C’est bizarre, il faut que tu vérifies tous les paramètres pour voir si tout est bien configuré. Par contre, si tu développes ton site en local, c’est normal car le serveur local n’a pas la fonction d’envoi d’email.

  42. arthur

    merci beaucoup lycia, le problème viens alors de la car je monte mon site en local

  43. vanessa

    Bonjour,
    Comme pour Arthur, lorsque je fais des essais en remplissant mon formulaire de contact et en me l’envoyant je ne reçois rien !!
    J’ai pourtant entré l’adresse mail dans le champ e-mail

    Merci pour votre aide

  44. Lycia Diaz

    Salut Vanessa,
    Est-ce que tu travailles en local ou ton site est en ligne ?

  45. Vanessa

    @lycia Diaz, je travaille en ligne.

    J’ai utilisé le formulaire proposé sur DIVI et en fait, je ne reçois pas l’intégralité de ce formulaire lorsque la personne me répond
    j’ai juste son message
    Merci beaucoup Lycia de ton aide 😉

  46. Olivier

    Bonjour et merci pour vos articles. En avez vous un pour rendre RGPD le module email optin de DIVI ? Je ne trouve pas. Merci

  47. Lycia Diaz

    Salut Olivier.
    Non je n’ai pas cet article en stock 😉
    Je met ce sujet dans ma liste et je verrai si je trouve une solution… je n’utilise jamais ce module…

  48. Lycia Diaz

    Salut Vanessa,

    Quand tu édites ton formulaire, vas à l’onglet Contenu > Email. Tu vas voir un champ « modèle de message » qui te permet de personnaliser le mail que tu vas recevoir.

    Ici, il te suffit de configurer le corps de ton email avec des champs de ton formulaire => si tu utilises le champ « message » dont l’ID est « message », alors, pour tu devras écrire %%message%% pour qu’il s’affiche dans le corps du mail que tu recevras.

    La personnalisation de ton email pourrait ressembler à cela :
    Nouveau message de %%prenom%% %%nom%% – Voici le message : %%message%% – Pour contacter cette personne : Téléphone %%telephone%% – Email %%email%%

    Est-ce plus clair ? 😉

  49. Alain

    Bonjour,
    Je suis en train de faire mon site depuis quelque mois et je viens de faire cette manip.
    Le truc c’est que j’ai le titre « confidentialité qui s’affiche entre le formulaire et la case à cocher « lu et approuvé », ce qui n’est pas très esthétique.

    Je ne vois aucune option pour masquer le titre. Peut être dois-je tester un autre fomulaire.

  50. Lycia Diaz

    Oui Alain effectivement.
    Soit tu la caches avec du CSS soit tu peux utiliser une extension tierce comme Caldera Forms ou Contact Forms 7 pour créer ton formulaire… car il n’y a pas d’option pour cacher le titre (de mémoire – à moins qu’elle est été ajoutée dernièrement, mais j’en doute).

  51. Alain

    D’accord, merci, c’était pour être sûr .

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This