Tous nos scripts

Formulaire

Maintenir la hauteur d’un formulaire après soumission

<script>
function adjustFormHeight() {
  var targetForm = document.querySelector('[js-form-element=form]');
  if (targetForm) {
    var formHeight = targetForm.offsetHeight;
    var sibling = targetForm.nextElementSibling;
    if (sibling && sibling.classList.contains('w-form-done')) {
      sibling.style.minHeight = formHeight + 'px';
    }
  }
}

window.addEventListener('load', adjustFormHeight);
window.addEventListener('resize', adjustFormHeight);
document.addEventListener('submit', function (event) {
  if (event.target.tagName === 'FORM' && event.target.hasAttribute('js-form-element=form')) {
    adjustFormHeight();
  }
});
</script>

Etape 1 - Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Keep Form Height -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/forms/keep-form-height.js"></script>
<script>
function adjustFormHeight() {
  var targetForm = document.querySelector('[js-form-element=form]');
  if (targetForm) {
    var formHeight = targetForm.offsetHeight;
    var sibling = targetForm.nextElementSibling;
    if (sibling && sibling.classList.contains('w-form-done')) {
      sibling.style.minHeight = formHeight + 'px';
    }
  }
}

window.addEventListener('load', adjustFormHeight);
window.addEventListener('resize', adjustFormHeight);
document.addEventListener('submit', function (event) {
  if (event.target.tagName === 'FORM' && event.target.hasAttribute('js-form-element=form')) {
    adjustFormHeight();
  }
});
</script>
Copier

Etape 2 - Ajouter les attributes correspondants

Form - Identifier l'élément Formulaire

Nom

js-form-element

Valeur

form

Ajouter l'attribute à l'élément formulaire de Webflow

Nom

Copié !

Valeur

Copié !

Nom

Valeur

Nom

Valeur

Tuto, template & scripts

Tuto

Template

Script

<script>
function adjustFormHeight() {
  var targetForm = document.querySelector('[js-form-element=form]');
  if (targetForm) {
    var formHeight = targetForm.offsetHeight;
    var sibling = targetForm.nextElementSibling;
    if (sibling && sibling.classList.contains('w-form-done')) {
      sibling.style.minHeight = formHeight + 'px';
    }
  }
}

window.addEventListener('load', adjustFormHeight);
window.addEventListener('resize', adjustFormHeight);
document.addEventListener('submit', function (event) {
  if (event.target.tagName === 'FORM' && event.target.hasAttribute('js-form-element=form')) {
    adjustFormHeight();
  }
});
</script>
Copier

Etape 2 - Ajuster le code pour votre besoin

Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.