Tous nos scripts

Formulaire

Utiliser les paramètres d'URL sur vos pages

<script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.location.search) {
    const urlParams = new URLSearchParams(window.location.search);
    const elements = document.querySelectorAll('[js-form-usequery]');
    elements.forEach((element) => {
      let queryKey = element.getAttribute('js-form-usequery');
      let queryValue = urlParams.get(queryKey);

      if (element.tagName === 'INPUT') {
        element.value = queryValue;
      } else if (element.tagName === 'A') {
        element.href = queryValue;
      } else if (element.tagName === 'IMG') {
        element.src = queryValue;
      } else {
        element.textContent = queryValue;
      }
    });
  }
});
</script>

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

<!-- Scripts by Justa | Use Query Params on Page -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/forms/use-query-params.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.location.search) {
    const urlParams = new URLSearchParams(window.location.search);
    const elements = document.querySelectorAll('[js-form-usequery]');
    elements.forEach((element) => {
      let queryKey = element.getAttribute('js-form-usequery');
      let queryValue = urlParams.get(queryKey);

      if (element.tagName === 'INPUT') {
        element.value = queryValue;
      } else if (element.tagName === 'A') {
        element.href = queryValue;
      } else if (element.tagName === 'IMG') {
        element.src = queryValue;
      } else {
        element.textContent = queryValue;
      }
    });
  }
});
</script>
Copier

Etape 2 - Ajouter les attributes correspondants

Paragraph - Identifier les éléments qui afficheront les valeurs des paramètres d'URL

Nom

js-form-usequery

Valeur

[identifier]

Ajouter un text / paragraph / Heading et y ajouter cet attribute avec comme valeur le nom du paramètre d'URL que vous souhaitez utiliser

Exemple :

  • Vous voulez utiliser la valeur du paramètre first_name
  • Ajouter un text sur votre page avec l'attribute js-form-usequery=first_name

Nom

Copié !

Valeur

Copié !

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto, template & scripts

Tuto

Template

Script

<script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.location.search) {
    const urlParams = new URLSearchParams(window.location.search);
    const elements = document.querySelectorAll('[js-form-usequery]');
    elements.forEach((element) => {
      let queryKey = element.getAttribute('js-form-usequery');
      let queryValue = urlParams.get(queryKey);

      if (element.tagName === 'INPUT') {
        element.value = queryValue;
      } else if (element.tagName === 'A') {
        element.href = queryValue;
      } else if (element.tagName === 'IMG') {
        element.src = queryValue;
      } else {
        element.textContent = queryValue;
      }
    });
  }
});
</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.