FAQ > Formulaires

Important Si vous personnalisez le formulaire de base pour votre client, ajoutez votre site à la liste des Sites web clients WP.

Mise en page

Mise en page :

Formulaire dans une fenêtre modale (popup)

Un conflit existe entre les fenêtres modales d’Elementor et Contact Form 7. Lorsqu’un formulaire est soumis à l’intérieur d’un popup, celui-ci se ferme immédiatement au lieu de traiter le formulaire. Il est donc nécessaire d’appliquer les étapes ci-dessous pour assurer le bon fonctionnement du formulaire.

ÉTAPE A - Créer la fenêtre modale

Dans Modèles > Modèles enregistrés ou Fenêtres modales >

Cliquer sur Ajouter un nouveau modèle.
- Type de modèle : Fenêtre modale
- Nom du modèle : Un nom pertinent
Intégrer le formulaire et compléter le visuel de la fenêtre modale.
Insérer un widget HTML sous le widget du formulaire Contact Form 7.
- Renommer le widget HTML dans le panneau Structure pour : * Script pour CF7
- Dans l’onglet Contenu > Code HTML :

				
					<script>
window.addEventListener( 'elementor/popup/show', () => {
    const forms = document.querySelectorAll( '.elementor-popup-modal form.wpcf7-form:not(.cf7-popup-initialized)' );
    forms.forEach( ( form ) => {
       
        form.querySelectorAll('.wpcf7-spinner').forEach((spinner) => {
            spinner.remove();
        });
       
        if (window.wpcf7) {
            if (typeof wpcf7.initForm === 'function') {
                wpcf7.initForm(form);
            } else if (typeof wpcf7.init === 'function') {
                wpcf7.init(form);
            }
        }
       
        form.classList.add( 'cf7-popup-initialized' );
    } );
} );
</script>

- Dans l’onglet Avancé > CSS personnalisé :

				
					selector {
    display:none;
}

Publier > Enregistrer et fermer (aucune condition, aucun déclencheur, aucune règle avancée).

ÉTAPE B - Configurer le déclencheur de l'ouverture de la fenêtre modale

Dans Pages > Elementor >

Sur le widget Bouton qui doit ouvrir la fenêtre modale > Champ Lien :
- Cliquer sur l’icône Balises dynamiques
- Sous Actions, choisir Fenêtre modale.
- Cliquer sur la clé anglaise pour accéder aux réglages.
  - Action : Ouvrir la fenêtre
  - Fenêtre modale : Nom de la fenêtre que vous avez créée à l’étape A1.
Tester le formulaire avec votre adresse courriel.

Si le formulaire ne s’envoie pas, ajoutez un sous-pulse dans Monday :

Titre : SW – Vérifier le formulaire dans un popup
Commentaire : indiquer les urls des pages qui contiennent le ou les boutons déclencheurs ainsi que le nom du ou des boutons
Responsable : Diane Bellefeuille
Échéance : la journée même
Technique : À faire

Important Ajouter votre site à la liste des Sites web clients WP qui ont un formulaire personnalisé.

Note

Source intéressante : https://github.com/elementor/elementor/issues/7798

				
					/* 
--- Formulaire de contact
*/

/* Couleur du contour sur le focus */

.wpcf7-form-control:focus-visible {
    outline-color: var( --e-global-color-accent );
}

/* Message de succès */

.wpcf7 form.sent .wpcf7-response-output {
    margin-top: 2.5em;
    padding: 0.5em;
    border-radius: 5px;
    text-align: center;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

/* Message d'erreur */ 

.wpcf7 form.invalid .wpcf7-response-output { 
    margin-top: 2.5em; 
    padding: 0.5em; 
    border-radius: 5px; 
    text-align: center; 
    background-color: #f8d7da; 
    border: 1px solid #f5c6cb; 
    color: #721c24;
}

Important Ajouter votre site à la liste des Sites web clients WP qui utilisent ce script.

Champ spécifique

Code du formulaire :

Intégrer des champs conditionnels

Que sont des champs conditionnels?

Les champs conditionnels sont des champs qui ne s’affichent que lorsque l’internaute donne une réponse spécifique à un autre champ du formulaire. Ils permettent d’alléger le visuel du formulaire en affichant uniquement les informations pertinentes selon le contexte.

Extension requise

Conditional Fields for Contact Form 7

Contact > Formulaires de contact

ÉTAPE A - Onglet Formulaire

Intégrer tous les champs de votre formulaire.
Ajouter au-dessus des champs devant être affichés selon une condition le code ci-dessous, en remplaçant nom-de-votre-groupe par un nom pertinent qui suit les règles de nommage des classes CSS :

				
					[group nom-de-votre-groupe]

Ajouter en dessous des champs conditionnels le code suivant :

				
					[/group]

ÉTAPE B - Onglet Conditional Fields

Cliquer sur le bouton Add new conditional rule.

Sélectionner votre groupe.
Sélectionner le champ à partir duquel la condition doit être évaluée.
Sélectionner la condition appropriée (généralement equals, sauf exceptions).
Coller exactement la valeur pour laquelle les champs conditionnels doivent apparaître.

Important Si les valeurs du champ déclencheur changent, vous devez ajuster la règle des champs conditionnels.

ÉTAPE C - Onglet Courriel

Ajouter au-dessus des champs conditionnels le code ci-dessous, en remplaçant nom-de-votre-groupe par le nom choisi à l’étape A2 :

				
					[nom-de-votre-groupe]

Ajouter en dessous des champs conditionnels, le code suivant. Laisser une ligne vide au-dessus pour éviter que le champ suivant ne soit collé à vos champs conditionnels.

				
					
[/nom-de-votre-groupe]

ÉTAPE D - Tester

Enregistrer et tester : affichage du formulaire et courriel reçu selon les différentes conditions.
Important Ajouter votre site à la liste des Sites web clients WP qui ont un formulaire personnalisé.

Champ spécifique :

Intégrer les champs pour une adresse

*** ATTENTION : En cours de réflexion pour uniformisation ***

Code HTML

				
					<div class="form-fieldset">
  <fieldset>
    <legend>Adresse</legend>
    <div class="form-group">
    <div class="form-input">
       <label for="f-address">No civique et rue *</label> [text* your-address id:f-address autocomplete:address-line1]
    </div>
    <div class="form-row">
      <div class="form-col form-col-70">
        <div class="form-input">
          <label for="f-city">Ville *</label> [text* your-city id:f-city autocomplete:address-level2]
        </div>
      </div>
      <div class="form-col form-col-30">
        <div class="form-input">
          <label for="f-postalcode">Code postal *</label> [text* your-postalcode id:f-postalcode autocomplete:postal-code]
        </div>
      </div>
    </div>
    </div>
  </fieldset>
</div>

Dans Pages > Elementor >

Sur le widget Contact Form 7 > Avancé > CSS personnalisé, coller le code ci-dessous :

				
					/* Mise en forme sur 2 colonnes pour les résolutions supérieures à 768px */

@media (min-width:768px) {
  selector .form-row {
    display:flex;
    gap:10px;
  }
  selector .form-col-70 {
    width:70%
  }
  selector .form-col-30 {
    width:30%
  }
}

Important Ajouter votre site à la liste des Sites web clients WP qui ont un formulaire personnalisé.

Message de succès / d'erreur

Messages :

Personnaliser la couleur des messages (CSS)

Dans Pages > Elementor > Réglages du site > CSS personnalisé >

Copier le code CSS ci-dessous pour personnaliser la couleur du message de succès d’envoi d’un formulaire et du message d’erreur général :

				
					/*
--- Formulaire de contact
*/

/* Message de succès */

.wpcf7 form.sent .wpcf7-response-output {
    margin-top: 2.5em;
    padding: 0.5em;
    border-radius: 5px;
    text-align: center;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

/* Message d'erreur */

.wpcf7 form.invalid .wpcf7-response-output {
    margin-top: 2.5em;
    padding: 0.5em;
    border-radius: 5px;
    text-align: center;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

Aperçu du visuel :