Comment optimiser votre formulaire Elementor pour augmenter vos conversions

Chaque seconde perdue ou chaque clic inutile sur une page d’atterrissage (landing page) augmente les chances que votre client potentiel abandonne. Pour maximiser votre taux de conversion, votre priorité absolue doit être d’éliminer les points de friction et de blocage dans l’expérience utilisateur (UX).

Imaginons un scénario classique : vous proposez 3 offres distinctes sur votre page, chacune associée à un bouton d’action. Plus bas se trouve un unique formulaire Elementor doté d’un menu déroulant permettant de choisir le « type de projet ».

Demander à l’utilisateur de cliquer sur une offre, puis de sélectionner manuellement cette même offre dans le menu déroulant est une étape redondante.

La solution : automatiser la sélection avec JavaScript

Grâce à un léger code JavaScript, il est possible de lier vos boutons au formulaire. Dès qu’un visiteur clique sur le bouton de l’offre A, l’option « Offre A » est sélectionnée automatiquement dans le menu déroulant du formulaire Elementor.

Le résultat ? Un gain de temps précieux pour votre prospect, une expérience fluide et, par conséquent, une augmentation directe du nombre de formulaires remplis.

Procédure en 4 étapes :

1. Intégrer le code JavaScript

Ajoutez le code JavaScript sur la page des offres à l’aide d’un widget HTML ou de la fonctionnalité Code personnalisé d’Elementor.

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 1. On cible les boutons par leur classe CSS personnalisée
    const btnMensuel = document.querySelector('.btn-formule-mensuelle');
    const btnStandard = document.querySelector('.btn-formule-standard');
    const btnMesure = document.querySelector('.btn-formule-mesure');

    // 2. On cible le champ <select> du formulaire
    const selectFormulaire = document.getElementById('form-field-formule_choisie');

    if (selectFormulaire) {
        // Clic sur Mensuel
        if (btnMensuel) {
            btnMensuel.addEventListener('click', function() {
                selectFormulaire.value = 'mensuelle';
                selectFormulaire.dispatchEvent(new Event('change'));
            });
        }

        // Clic sur Standard
        if (btnStandard) {
            btnStandard.addEventListener('click', function() {
                selectFormulaire.value = 'standard';
                selectFormulaire.dispatchEvent(new Event('change'));
            });
        }

        // Clic sur Sur Mesure
        if (btnMesure) {
            btnMesure.addEventListener('click', function() {
                selectFormulaire.value = 'mesure';
                selectFormulaire.dispatchEvent(new Event('change'));
            });
        }
    }
});
</script>

2. Configurer l’ID du formulaire

Intégrez l’ID formule_choisie (ou l’ID de votre choix) dans les options avancées du champ <select> de votre formulaire Elementor.

3. Associer les valeurs du script aux options

Dans les options du menu déroulant, configurez vos choix en insérant les valeurs exactes du code JavaScript à droite de la barre verticale. Saisissez chaque option sur une ligne séparée.

Pour différencier le libellé de la valeur, séparez-les par une barre verticale (« | »). Par exemple : Landing page mensuelle|mensuelle.

4. Ajouter les classes CSS sur vos boutons

Sélectionnez vos boutons Elementor associés aux offres et ajoutez-leur la classe CSS correspondante définie dans le script (ex. : btn-formule-mensuelle).

Prêt à propulser vos conversions?

Et voilà! Vous venez d’optimiser l’expérience client et d’augmenter le potentiel de conversion de votre page d’atterrissage.

Si ces manipulations techniques vous dépassent ou vous semblent trop complexes, ne prenez pas de risques. 

Contactez-nous dès maintenant pour obtenir le script clé en main et confier cette optimisation à un expert! 🙂