Comment rendre un formulaire RGPD sur Shopify ?

Comment rendre valide vos formulaires RGPD sur Shopify ?

C’est simple, nous allons voir dans ce tutoriel comment créer une case à cocher sur vos formulaires de newsletter et contact.

Ce tutoriel est prévu pour votre thème et ne prend pas en compte les éventuelles applications que vous avez sur votre Shop…

En effet les codes des applications n’étant pas disponible, c’est a leur service d’effectuer les démarches afin d’être conforme RGPD sur Shopify

La partie la plus compliquée sera de trouver les fichiers comportant le formulaire de newsletter et la page contact.

Selon les thèmes l’emplacement sera différent et je compte sur vous pour m’aider à répertorier l’emplacement sur votre thème afin d’étoffer au mieux ce tutoriel 😉 Et oui c’est à vous de bosser un peu cette fois ci 😀

Trouver les fichiers

Formulaire de Contact

Généralement il se trouve dans Ressources (Assets) – Modèles (templates) – page.contact.liquid

Trouvez la fermeture du formulaire: </form> ou {% endform %} et vous copierez le code juste avant (la ligne d’avant)

Vous trouverez le code en bas de page.

Formulaire de Newsletter

Généralement il se trouve dans:

  • Ressources (Assets) – extraits (snippets) – newsletter-form.liquid
  • Ressources (Assets) – sections – footer.liquid

Trouvez la fermeture du formulaire: </form> ou {% endform %} et vous copierez le code juste avant (la ligne d’avant)

Vous trouverez le code en bas de page.

Code à insérer:

<div class="gd-rgpd-agree" style="font-size:11px;display:block;clear:both;">
<p class="cgv-text" style="padding:15px 0 0 0;margin:0 0 7px 0;">
<input type="checkbox" id="agree" required style="display:inline-block;float:left;margin-right:5px;" />
<label for="agree" style="display:inline;">
En cochant cette case et en soumettant ce formulaire, j'accepte que mes données personnelles soient utilisées pour me recontacter dans le cadre de ma demande indiquée dans ce formulaire. Aucun autre traitement ne sera effectué avec mes informations.
</label>
</p>
<p class="cgv-text">Pour connaitre et exercer vos droits , notamment de retrait de votre consentement à l'utilisation de données collectés par ce formulaire, veuillez consulter notre 
<a style="text-decoration:underline;" href="/pages/politique-de-confidentialite" target="_blank">Politique de confidentialité</a>
</p>
</div>
<script>                  
jQuery(document).ready(function() {
  jQuery('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
    if (jQuery('#agree').is(':checked')) {
      jQuery(this).submit();
    } else {
      //alert("You must agree with the terms and conditions of sales to check out.");
      alert("Vous devez accepter les conditions générales de vente pour pouvoir passer commande .");
      return false;
    }
    });
});
</script>

N’oubliez pas de créer votre page de politique de confidentialité car un lien va pointer directement sur celle ci

Pour ce faire… Créez une page et nommé la exactement comme ceci: « Politique de confidentialité » et tout se synchronisé.

Ce tutoriel existe aussi en vidéo

Vous êtes maintenant conforme RGPD sur votre thème Shopify mais attention uniquement sur la partie des formulaires !

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 11 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 50 commentaires

  1. Manu

    22 Sep 2018 Répondre

    Salut Dgeo !

    Mille mercis ! Tu me sauves la vie car ça fait deux jours que je m’arrache les cheveux pour trouver la solution et tu est arrivé !

    PS : J’ai le thème Supply et le bon chemin est : Assets – snippets – newsletter-form.liquid.
    Ensuite, je l’ai personnalisé.

    T’es un boss !

    Manu

  2. Nathalie Mazenod

    24 Sep 2018 Répondre

    Merci Dgeo pour ce tuto,
    J’ai le thème Brooklyn.
    La 1ère partie est ok Pour moi (dans Templates)
    Mais je ne trouve pas le 2e point pour la case à cocher dans la newsletter !
    Tu sais où chercher exactement sur ce thème ?
    Merci !

    1. Dgeo Dev

      24 Sep 2018 Répondre

      Hello, regarde dans sections – si tu n’as pas une newsletter.liquid ou assimilé

      1. Nabil HANI

        14 Oct 2018 Répondre

        Bonjour,

        Pour faire suite au commentaire j’ai également le thèmeBrooklyn je ne sais pas comment faire pour le second

  3. Cyril

    25 Sep 2018 Répondre

    Hey merci pour le tuto il est génial 🙂 du coup en faisant cela notre shop est en rêgle ? il n’y a rien d’autre a mettre en place ?

    merci encore

  4. Sara

    30 Sep 2018 Répondre

    Problème pour moi. Ma boutique est en anglais et le message qui apparaît quand la case n’est pas cochée est en français. Je ne trouve pas ce texte dans le code donc je n’arrive pas à le changer

    1. Dgeo Dev

      9 Oct 2018 Répondre

      Hello, il faut simplement traduire le texte, il est pourtant dans le code donné 😉

  5. Tristan

    5 Oct 2018 Répondre

    Bonjour, j’aurais aimé savoir si ce tuto et les autres fonctionnent sur prestashop ? Merci beaucoup !

    1. Dgeo Dev

      9 Oct 2018 Répondre

      Hello, ils sont génériques donc oui mais à adapter selon le contexte 😉

  6. Constant

    8 Oct 2018 Répondre

    Pour le thème « debut » il et dans le fichier « page.contact.liquid » en cherchant {% endform %} 😉

    Bon courage 🙂

    1. Dgeo Dev

      9 Oct 2018 Répondre

      Hello, merci 😉

    2. Albin PONTAROLO

      27 Oct 2018 Répondre

      Bonsoir Constant,

      j’ai également le thème « Debut » !
      Le code est a placé après {% endform %} !?!

      Car je l’ai placé juste avant, mais du coup il m’a enlevé le message que j’avais précédemment installé.

      Merci

      1. Dgeo Dev

        11 Nov 2018 Répondre

        Ok merci, c’est pas très logique mais tant que ca marche 😉

  7. jj

    19 Oct 2018 Répondre

    Salut tout as bien fonctionné, je suis sur le thème supply, le seul problème c’est que ce codage empêche le client de passer à la caisse si il ne coche pas la case de la newsletter

    1. Dgeo Dev

      25 Oct 2018 Répondre

      Hello, euh oui y a sans doute un conflit avec une app ou autre code. hors contexte dur de vous répondre

    2. clem

      11 Nov 2019 Répondre

      Hello,
      j’ai le même problème mais que pour le form du footer
      ducoup je l’ai supprimé.

      Mais fonctionne pour tout le reste:
      -module pop up NL
      Bloc HP NL
      – compte
      – form contact …

      merci 🙂

  8. Georgi

    22 Oct 2018 Répondre

    Salut, merci beaucoup pour cette case… je respire mieux 😀

    Ou es-qu’il est passer le tuto pour bloquer le clique droit (copier) pour la boutique ???

    merci , bonne continuation à tous

    1. Dgeo Dev

      25 Oct 2018 Répondre

      Hello, super merci 🙂 Le tuto a disparu car il était trop parano pour google et nuisait au SEO

  9. georgi

    22 Oct 2018 Répondre

    Le tuto ne marche pas sur mon thème Turbo …?

    1. Dgeo Dev

      25 Oct 2018 Répondre

      Bonsoir, oui étrangement mes tutos fonctionne rarement sur turbo 🙁 car turbo est codé bizarrement par rapport à la norme shopify.

  10. AH

    22 Oct 2018 Répondre

    Bonjour, pourrais tu me dire comment agrandir la taille de la police via ce code stp ? car j’ai réussi à insérer les cases a cocher mais le texte est tout petit merci 🙂

    1. Dgeo Dev

      25 Oct 2018 Répondre

      Hello, trouve le 11px du code du tuto et monte le à 14 ou 15px

  11. Anthony

    13 Nov 2018 Répondre

    Moi j’ai un soucis avec la Newsletter concernant la RGPD, quand j’utilise le script je vois bien la petite case avec le texte apparaître en bas mais je peux toujours entrer le mail et le valider sans cocher la case il me demande juste une vérification si je ne suis pas un robot en sélectionner différente images , pourtant avec le même script dans le formulaire de contact aucun problème il m’oblige à cocher la case 🙂

    J’ai le thème début

    Du coup j’ai essayer de modifier dans footer.liquid & newsletter.liquid et même le mettre dans les deux à la fois mais rien n’y fait en tous cas merci car il est vraiment top ! il me manque juste ce petit truc pour les mails

    1. Dgeo Dev

      13 Nov 2018 Répondre

      Bonjour, il faut que le code soit bien à l’intérieur du conteneur de type

      …

      afin que cela fonctionne car nous avons le fameux required dans le code qui dit à shopify que c’est obligatoire afin de valider le formulaire. si ca ne fonctionne pas c’est qu’il y a peut être un conflit ou une erreur de type JS.

      1. Anthony

        15 Nov 2018 Répondre

        Bonsoir,

        J’ai réesayé en reprenant le thème début depuis 0 en modifiant le footer.liquid le code est bien à l’intérieur du conteneur type, on voit bien le message apparaître en dessous de l’endroit ou l’on insert le mail ainsi que la petite case. Mais quand je clique sur s’inscrire sans cocher cela fonctionne tous de même.

        Mais il n’accepte pas directement l’inscription il vérifie d’abord si je ne suis pas un « robot » en sélectionnant plusieurs images du type « Sélectionnez toutes les images montrant un feux de circulation » puis une fois fait il accepte l’inscription mail.

        Aucun problème pour la page « contact » il me demande bien de cocher la case pour envoyer le formulaire.

        Merci à vous en tous cas ! 🙂

    2. Charles

      19 Nov 2018 Répondre

      Salut Anthony,

      Je suis exactement dans le même cas de figure que toi pour la newsletter.
      As-tu trouver la solution ? 🙂

      Merci par avance Charles.

  12. Wilson mike

    26 Nov 2018 Répondre

    Bonjour je voudrais savoir d’un point de vue optimisation du panier faudrait-il​ toujours que le client coche cette casse pour pouvoir passer au tcheckout?
    Car ayant appliquer cette modification il m’est

    1. Dgeo Dev

      28 Nov 2018 Répondre

      Hello, il manque la suite de ton message. Cette case n’est pas spécialement utile au niveau du panier mais plutôt une case comme dans speedfly qui accepte les CGV et Politique de conf.

  13. georgi

    10 Déc 2018 Répondre

    Yo, la seule chose qui ne fonctionne pas chez moi c’est la case a cocher, je t’ai envoyé une video de 5sec sur messanger, et aussi, comment je peux réduire la taille de la case?
    MERCI CHEF

    1. Nico bllrd

      12 Jan 2019 Répondre

      Hello, meme problème, la case est impossible à cocher.

      Une idée du souci ? merci

      1. Dgeo Dev

        29 Jan 2019 Répondre

        Bonsoir, tout dépend du thème 🙂

  14. Victor Agt

    13 Juin 2019 Répondre

    Merci à toi pour ce tuto aussi simple que pratique ! Merci à toi d’offrir du contenu que certain monétiserai !
    Excellente continuation !

    1. Dgeo Dev

      13 Juin 2019 Répondre

      Hello, merci pour ce message fort sympathique 😉

  15. Florian

    26 Mar 2020 Répondre

    Merci beaucoup pour le tuto !!!
    Cela fonctionne correctement pour moi pour la partie contact (pas encore essayé sur la newsletter), néanmoins j’avais une petite question, comment avoir la preuve que le client à bien coché cette case? Car sur le mail je ne recoit pas cette case coché et son texte..
    En te remerciant par avance.

    1. Dgeo Dev

      27 Mar 2020 Répondre

      Bonjour, c’est qu’il y a un soucis au niveau du thème dans ce cas 🙂

  16. kevin

    14 Avr 2020 Répondre

    hello, un grand merci comme d’hab vous cartonner xD par contre j’ai le même soucis décris plus haut pour la newsletter code bien entrer mais une demande de captcha vous avez trouvé une solution depuis ? merci bibiz

    1. Dgeo Dev

      15 Avr 2020 Répondre

      Hello et merci, non je ne constate pas ce problème, je n’ai donc pas le moyen de corriger une chose que je ne vois pas 🙂

  17. Oualid Khaddioui

    8 Mai 2020 Répondre

    j’ai une question, comment faire pour adapter ce bout de code non pas à un formulaire mais à un produit pour que le client atteste bien qu’il a lu les conditions générales de ventes avant de procéder à l’achat, merci

    1. Dgeo Dev

      11 Mai 2020 Répondre

      Hello et merci pour le commentaire. Ca demande un développement sur mesure pour le coup 😉

  18. Cédric

    19 Mai 2020 Répondre

    Bonjour,
    idem pour moi, sur le thème début pour la partie « contact » ça marche nickel mais pour la partie « newsletter » on peut s’inscrire sans qu’il faille cocher la case. Si toutefois quelqu’un a la solution… merci par avance

    1. Greg

      15 Août 2020 Répondre

      Salut Cédric,

      J’ai le même problème que toi, as tu trouvé la réponse depuis le temps ?

  19. arlette

    12 Nov 2020 Répondre

    Salut
    merci encore pour ce que tu proposes…
    Jai le thème simple. le formulaire apparait bien le bouton à cocher marche bien , mais , le formulaire est plus petit et la case à cocher est distante du texte .
    qui utilise le thème simple?

  20. omar bensar

    2 Fév 2021 Répondre

    salut comment afficher la page politique de confidentialité dans la page contact merci

  21. Amadou DIAGNE

    22 Mar 2021 Répondre

    Merci beaucoup !
    Je souhaite réduire la taille du formulaire te le centrer comment je peux faire ?
    Cordialement,

    1. Dgeo Dev

      22 Mar 2021 Répondre

      Bonjour, la cela dépend fortement du thème car le formulaire s’adapte. Faudrait voir directement avec leur support 🙂 si c’est un thème Shopify vous avez droit à 60mn d’intervention gratuite

  22. Camille

    28 Avr 2021 Répondre

    Bonjour,
    je possède le thème speedfly, mais j’ai un problème au niveau du panier, mes clients ne sont pas obligés de cocher la case « J’accepte les cgv et politique de confidentialité » pour passer au checkout.
    Si ils ne cochent pas la case ils sont quand même redirigé vers mon checkout, aucune fenêtre s’ouvre pour bloquer l’accès tant que la case n’est pas validée. J’utilise checkout X et pas le checkout classique.
    Que puis je faire ? Merci.
    Cordialement

    1. Dgeo Dev

      28 Avr 2021 Répondre

      Hello, checkout x n’est plus pris en charge par shopify , je vous conseille donc de l’enlever 😉 sinon pour toutes questions sur speedfly c’est par ici 😉 speedecom.freshdesk.com

      1. Emmanuel Chambon

        25 Juil 2021 Répondre

        Bonjour Dgeo, et merci du fond du cœur pour tes partages de connaissance avec tes tutos extra. Ça m’apprend plein de choses… je voudrais savoir si, a ton avis, tes codes peuvent être utilise dans woocommerce et comment les placer si c’est pas trop complique pour un néophyte… Je fais une boutique d’artisanat africain pour des amis du village artisanal de Dakar qui font un boulot top… Par souci d’économie je souhaite passer de shopify a woocommerce… Le site shopify est encore derrière un mot de passe que je peux te communiquer car j’attends mon numéro de tva pour démarrer et idéalement ouvrir avec woocommerce sur o2switch… Vos tutos m’ont vraiment permis d’avancer sur le site shopify en ligne et j’aimerais le refaire sur woocommerce… Merci encore pour tes partages… c’est vraiment cool et positif… Tu es une personne rare… Manu

        1. Dgeo Dev

          27 Juil 2021 Répondre

          Bonjour et merci pour le commentaire 🙂 oui c’est facilement transposable à partir du moment ou trouve les équivalences au niveau des fichiers. Ces tutos restent assez génériques donc peuvent potentiellement être utilisés sur une autre plate-forme. Cependant si dans un tuto je parle de liquid alors la non il ne fonctionne pas mais si c’est uniquement du html, css, js oui. Bonne continuation.

Laisser un commentaire

Fermer le menu
×
×

Panier