Tous nos scripts

Formulaire

Garder les paramètres d’URL après une soumission de formulaire

<script>

document.querySelector('[js-queryparam-element=form]').addEventListener('submit', function (e) {
  e.preventDefault();

  const inputFields = document.querySelectorAll('input[js-queryparam-name]');

  const utmParams = {};

  for (const inputField of inputFields) {
    const utm_element = inputField.getAttribute('js-queryparam-name');
    const { value } = inputField;
    utmParams[utm_element] = value;
  }

  const pageURL = document.querySelector('[js-queryparam-slug]').getAttribute('js-queryparam-slug');
  const queryParams = new URLSearchParams(utmParams).toString();
  const fullUrl = pageURL + '?' + queryParams;

  window.location.href = fullUrl;
});
</script>

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

<!-- Scripts by Justa | Keep Query Params After Submission -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/forms/keep-query-params.js"></script>
<script>

document.querySelector('[js-queryparam-element=form]').addEventListener('submit', function (e) {
  e.preventDefault();

  const inputFields = document.querySelectorAll('input[js-queryparam-name]');

  const utmParams = {};

  for (const inputField of inputFields) {
    const utm_element = inputField.getAttribute('js-queryparam-name');
    const { value } = inputField;
    utmParams[utm_element] = value;
  }

  const pageURL = document.querySelector('[js-queryparam-slug]').getAttribute('js-queryparam-slug');
  const queryParams = new URLSearchParams(utmParams).toString();
  const fullUrl = pageURL + '?' + queryParams;

  window.location.href = fullUrl;
});
</script>
Copier

Etape 2 - Ajouter les attributes correspondants

Form - Identifier l'élément Formulaire

Nom

js-form-queryparams

Valeur

form

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

Input - Identifier chaque input récupérant un paramètre d'URL

Nom

js-form-queryparams-name

Copié !

Valeur

[Identifier]

Copié !

Ajouter l'attribute à chaque input devant être gardé

Remplacer [identifier] par le nom de paramètre d'URL souhaité

Exemple :

Pour retrouver la valeur de l'email avec le paramètre email après la soumission, mettre l'attribute js-form-queryparams-name=email

Form - Identifier le slug de direction

Nom

js-form-queryparams-slug

Valeur

[Identifier]

  • Ajouter cet attribut au niveau de l'élément form
  • Remplacer [identifier] par le slug vers lequel l'utilisateur doit être redirigé

Exemple :

  • Ajouter l'attribute js-queryparam-slug=/cas-clients pour renvoyer vers la page /cas-clients

Nom

Valeur

Tuto, template & scripts

Tuto

Template

Script

<script>

document.querySelector('[js-queryparam-element=form]').addEventListener('submit', function (e) {
  e.preventDefault();

  const inputFields = document.querySelectorAll('input[js-queryparam-name]');

  const utmParams = {};

  for (const inputField of inputFields) {
    const utm_element = inputField.getAttribute('js-queryparam-name');
    const { value } = inputField;
    utmParams[utm_element] = value;
  }

  const pageURL = document.querySelector('[js-queryparam-slug]').getAttribute('js-queryparam-slug');
  const queryParams = new URLSearchParams(utmParams).toString();
  const fullUrl = pageURL + '?' + queryParams;

  window.location.href = fullUrl;
});
</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.