Comment garder la hauteur d’un formulaire après envoi ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment éviter le saut de layout quand le message de succès d'un formulaire Webflow remplace le formulaire.

Exemple

Le script

Ajoutez ce script dans le body. Il mémorise la hauteur du formulaire avant soumission et l'applique au conteneur du message de succès.

document.querySelectorAll('.w-form').forEach(function(wForm) {
  var form = wForm.querySelector('form');
  var success = wForm.querySelector('.w-form-done');
  if (!form || !success) return;
  form.addEventListener('submit', function() {
    var h = form.offsetHeight;
    setTimeout(function() {
      success.style.minHeight = h + 'px';
    }, 100);
  });
});

Variante : fixer la hauteur sur le wrapper

Si votre formulaire est dans un conteneur spécifique, appliquez la hauteur sur ce conteneur plutôt que sur le message de succès :

document.querySelectorAll('.form-wrapper').forEach(function(wrapper) {
  var form = wrapper.querySelector('form');
  if (!form) return;
  wrapper.style.minHeight = form.offsetHeight + 'px';
});

Exemple

Conclusion

Un détail UX qui évite un saut visuel désagréable après soumission. Voir aussi : personnaliser le message de succès.