Low-Code

Comment rediriger vers une nouvelle page après une inscription dans un formulaire Webflow ?

Récupérer un lead puis rediriger l'utilisateur vers une autre page du site ou une page externe demande quelques lignes de code
Comment rediriger vers une nouvelle page après une inscription dans un formulaire Webflow ?

Rediriger l'utilisateur suite à la récupération d'un lead

J'ai développé sur Webflow la landing page de QWEST TV. L'objectif est de proposer aux amateurs de Black Music de profiter gratuitement quelques jours de cette plateforme afin de découvrir la richesse de ses contenus : live, interviews, archives et documentaires. Pour bénéficier de cette offre, le visiteur donne son email pour être ensuite redirigé vers la page d'abonnement. En utilisant le formulaire Webflow natif, on a le contrôle que sur le message de remerciement une fois l'envoi validé. Mais la demande du client est plus complexe et Webflow n'offre pas l'option dont nous avons besoin.

Nous avons don besoin d'un script JavaScript qui doit réagir à un événement de clic sur un bouton spécifique (type "Je m'inscris") et de réaliser une action basée (ouvrir la page Abonnement) sur une condition donnée (l'enregistrement de l'email).

Voici une explication détaillée de son fonctionnement :

<script>
Webflow.push(function() {
  // Sélectionne le bouton et vérifie s'il existe
  const button = document.getElementById("button-inscription");
  if (button) {
    button.addEventListener("click", function() {
      // Sélectionne le champ d'adresse e-mail et vérifie s'il existe
      const emailField = document.getElementById("name-of-form-field");
      if (emailField) {
        // Récupère et nettoie la valeur du champ e-mail
        const emailAddress = emailField.value.trim();
        // Vérifie si l'adresse e-mail n'est pas vide
        if (emailAddress !== "") {
          window.open('https://website.com', '_blank');
        }
      }
    });
  }
});
</script>

Il reste donc à donner un ID à l'élément bouton (HTML) et renseigner l'url de la page vers laquelle l'utilisateur sera redirigé. Dans le cas spécifique de cette landing page, il y a deux CTA un en haut de la page dans le hero et un autre en bas pour maximiser le taux de conversion.

Vous avez un projet ?
Prenons rendez-vous !
Pour discuter de votre projet
Réserver un appel