Contexte et objectif initial

Un site vitrine [anonymisé] utilise le module Formulaire de Divi. L’objectif exprimé est clair : transformer le message de succès par défaut en un signal fort, centré, lisible, avec la police Raleway et une mise en page qui rassure l’utilisateur qu’un message a bien été envoyé.

Le point de départ est un extrait HTML standard de Divi :

<div class="et-pb-contact-message">
  <p>Merci pour votre message...</p>
</div>

Première piste : simple mise en forme CSS du message

Nous proposons d’habiller directement .et-pb-contact-message : centrage, grande taille, encadré, fond clair, ombre.

.et-pb-contact-message {
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  color: #333;
  background: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 650px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

Résultat

• Le message gagne en présence et lisibilité.
• L’implémentation reste minimale.

Problème constaté : apparition d’un encart vide au-dessus du formulaire

Après intégration, un bloc « fantôme » apparaît même avant l’envoi. Diagnostic : Divi rend l’élément .et-pb-contact-message dans le DOM, mais il est vide avant la soumission. Le style s’applique donc trop tôt.

Correctif

On masque l’élément vide et on ne stylise que lorsqu’il contient du texte.

/* Masquer le bloc vide de confirmation */
.et_pb_contact_form_container .et-pb-contact-message:empty {
  display: none !important;
}

/* Appliquer le style uniquement quand un message existe */
.et_pb_contact_form_container .et-pb-contact-message:not(:empty) {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.1rem + 0.6vw, 2rem);
  line-height: 1.35;
  text-align: center;
  background: #f9f9f9;
  color: #222;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  max-width: 720px;
  margin: 24px auto;
  padding: 28px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.et_pb_contact_form_container .et-pb-contact-message:not(:empty) p {
  margin: 0;
}

Résultat

• Plus d’encart vide.
• Le message s’affiche uniquement après soumission.

Aller plus loin : modal centrée et page assombrie

Nouvelle demande : assombrir le reste de la page et afficher une « carte » animée, façon modal, pour marquer le succès.

Première approche (qui casse)

Nous testons un overlay via body::before conditionné avec :has(...). Problème :

• Le linter CSS de Divi signale des erreurs (« Expected Rparen », propriété inconnue) car :has() et backdrop-filter ne sont pas tolérés par l’éditeur.
• Le z-index de l’overlay passe devant la carte, rendant le message flou et inatteignable.

Pourquoi cela ne fonctionne pas

• :has() n’est pas reconnu par certains parseurs intégrés et peut être bloqué côté éditeur.
• backdrop-filter est optionnel et pas indispensable ici.
• Un overlay positionné au-dessus de tout floute aussi la carte si l’ordre des calques est mal géré.

Solution stable : overlay accroché au message lui‑même

On fixe la carte au centre et on dessine l’overlay comme pseudo‑élément ::before de ce même bloc. Plus de :has(), plus de backdrop-filter, donc plus d’erreurs.

/* Carte de succès en modal centrée */
.et_pb_contact_form_container .et-pb-contact-message:not(:empty) {
  position: fixed !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000 !important;
  width: min(92vw, 720px);
  margin: 0;
  padding: 32px 22px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.1rem + 0.8vw, 2rem);
  line-height: 1.35;
  text-align: center;
  color: #111;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  animation: modalPopIn .35s ease-out forwards;
}

/* Overlay plein écran rattaché à la carte */
.et_pb_contact_form_container .et-pb-contact-message:not(:empty)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: -1; /* derrière la carte */
}

/* Badge de confirmation visuel */
.et_pb_contact_form_container .et-pb-contact-message:not(:empty)::after {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  margin: 14px auto 0;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%) 22px 38px/28px 4px no-repeat,
    linear-gradient(-45deg, transparent 46%, #fff 46% 54%, transparent 54%) 38px 30px/22px 4px no-repeat,
    #10b981;
  box-shadow: 0 8px 20px rgba(16,185,129,0.35);
  animation: tickPulse .8s ease-out .1s both;
}

@keyframes modalPopIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes tickPulse {
  0%   { transform: scale(.9); opacity: .8; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

Résultat

• Modal centrée, fond assombri, animation douce.
• Compatibilité accrue avec l’éditeur Divi.

Prévisualiser sans soumettre le formulaire

Nouveau besoin : voir la modale sans devoir renvoyer un message à chaque test.

Mode debug par classe sur le body

On force l’affichage via une classe success-debug appliquée au <body> (par les réglages de page ou temporairement via DevTools).

/* Activer la prévisualisation complète */
body.success-debug .et_pb-contact-message {
  position: fixed !important;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 10000 !important;
  width: min(92vw, 720px);
  padding: 32px 22px; margin: 0;
  font-family: 'Raleway', sans-serif; font-weight: 700;
  font-size: clamp(1.2rem, 1.1rem + 0.8vw, 2rem);
  line-height: 1.35; text-align: center;
  color: #111; background: #fff;
  border: 2px solid #e5e7eb; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
body.success-debug .et_pb-contact-message::before {
  content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: -1;
}
/* Contenu factice si pas de message réel */
body.success-debug .et_pb-contact-message:empty::after {
  content: "Message envoyé\a\aMerci pour votre message. Nous reviendrons vers vous dès que possible.";
  white-space: pre-line; display: block;
}

Résultat

• Itérations rapides sans soumission.
• Zéro impact sur le comportement réel une fois la classe retirée.

Changement de stratégie : confirmation sur une page dédiée en popup

Décision : afficher une page de remerciement dédiée dans une popup. Deux scénarios sont mis en place.

Méthode 1 : ouverture automatique sans rechargement

On surveille l’apparition du message de succès Divi et on ouvre une modale qui charge la page « merci » en iframe.

/* Conteneur modal générique */
#ac-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:99999}
#ac-modal.show{display:flex}
#ac-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
#ac-card{position:relative;width:min(92vw,900px);height:min(85vh,720px);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden}
#ac-close{position:absolute;top:10px;right:12px;border:0;background:transparent;font:700 18px/1 Raleway,system-ui;cursor:pointer}
#ac-iframe{width:100%;height:100%;border:0}

<script>
(function(){
  function openModal(url){
    if(document.getElementById('ac-modal')) return;
    var m=document.createElement('div'); m.id='ac-modal';
    m.innerHTML='<div id="ac-backdrop"></div><div id="ac-card"><button id="ac-close" aria-label="Fermer">×</button><iframe id="ac-iframe" loading="lazy"></iframe></div>';
    document.body.appendChild(m);
    document.getElementById('ac-iframe').src=url;
    document.getElementById('ac-modal').classList.add('show');
    document.getElementById('ac-backdrop').onclick=
    document.getElementById('ac-close').onclick=function(){ m.remove(); history.replaceState(null,'',location.pathname+location.search); };
  }
  var t=setInterval(function(){
    var msg=document.querySelector('.et_pb_contact_form_container .et-pb-contact-message:not(:empty)');
    if(msg && msg.textContent.trim().length>0){ clearInterval(t); openModal('/merci/'); }
  },300);
})();
</script>

Méthode 2 : redirection contrôlée par paramètre d’URL

On configure la redirection du formulaire vers la même page avec ?popup=merci, puis on ouvre la modale au chargement.

<script>
(function(){
  var p=new URLSearchParams(location.search);
  if(p.get('popup')==='merci'){
    var m=document.createElement('div'); m.id='ac-modal';
    m.innerHTML='<div id="ac-backdrop"></div><div id="ac-card"><button id="ac-close">×</button><iframe id="ac-iframe" loading="lazy" src="/merci/"></iframe></div>';
    document.body.appendChild(m);
    document.getElementById('ac-modal').classList.add('show');
    document.getElementById('ac-backdrop').onclick=
    document.getElementById('ac-close').onclick=function(){ m.remove(); history.replaceState(null,'',location.pathname); };
  }
})();
</script>

Après mise en place de la méthode retenue, si vous souhaitez l’intégrer sur votre propre site ou l’adapter à votre thème, vous pouvez nous contacter pour un accompagnement rapide et ciblé.

Contenu de la page de remerciement

Rédaction professionnelle en vouvoiement, sans emphase, prêt à publier.

Merci, votre message a bien été envoyé

Nous avons bien reçu votre demande. Nous revenons vers vous au plus vite avec une réponse claire et des premières orientations.

En attendant

• Vérifiez que vous avez reçu l’email de confirmation. S’il n’apparaît pas, regardez dans les spams ou l’onglet Promotions.
• Si votre demande est urgente, contactez‑nous par message sur WhatsApp (pas d’appel).

Pour accélérer le traitement

• L’adresse du site concerné et, si nécessaire, des accès (administration, hébergeur, DNS).
• Votre objectif prioritaire (migration, SEO, sécurité email, formation, domotique, IA, etc.).
• Les échéances et contraintes (budget, délais, dépendances).
• Pour un support technique : captures d’écran, messages d’erreur, étapes déjà tentées.

Facturation et sécurité

• Nous ne communiquons qu’un seul RIB. En cas de demande de virement, comparez toujours le RIB reçu avec la copie de référence transmise par canal sécurisé. En cas de doute, écrivez‑nous avant tout transfert.

Et après ?
Nous confirmons la prise en charge, puis nous proposons un créneau d’intervention ou un plan d’action chiffré. Vous gardez la main à chaque étape.

Ce qui fonctionne, ce qui casse, et pourquoi

• Anomalie du bloc fantôme : .et-pb-contact-message existe avant l’envoi. La règle globale stylisait un élément vide. Le sélecteur :empty a supprimé l’effet de bord.
• Empilement des calques : un overlay mal positionné peut masquer la carte. La solution : attacher l’overlay au message et gérer le z-index avec ::before et position: fixed.
• Compatibilité de l’éditeur : :has() et backdrop-filter déclenchaient des erreurs dans le champ CSS de Divi. Les retirer simplifie et fiabilise l’intégration.
• Prévisualisation : la classe success-debug permet de tester sans spammer le formulaire, tout en restant en CSS pur.
• Architecture : pour une expérience plus riche, la popup basée sur une page dédiée reste claire, réutilisable et indépendante du module Formulaire.

Recommandations finales

1. Toujours masquer les éléments de retour tant qu’ils sont vides (:empty).
2. Pour un effet modal sans conflit, ancrer l’overlay au composant affiché, pas au body.
3. Éviter les sélecteurs ou propriétés non supportés par l’éditeur cible.
4. Prévoir un mode de test propre (classe sur le body ou paramètre d’URL).
5. Centraliser le contenu de confirmation sur une page dédiée pour faciliter la maintenance.

En cas de doute sur l’intégration, la compatibilité thème‑éditeur ou l’accessibilité, contactez‑nous pour un audit express et une mise en place fiable de bout en bout.