Zlepšení uživatelského zážitku pomocí dynamického předvyplnění formuláře ve Webflow

Nedávno jsem řešil zajímavý úkol, kde bylo potřeba, aby uživatel po kliknutí na CTA tlačítko na produktové stránce byl přesměrován na jinou stránku s formulářem, který automaticky předvyplní příslušný produkt. Tento problém jsem ve Webflow vyřešil pomocí JavaScriptu, kdy jsem informace o produktu přenesl prostřednictvím URL parametrů a následně formulář dynamicky vyplnil.

Jak na to ve Webflow

Představme si, že máme vytvořené stránky ve Webflow. Otevřeme si stránku s potřebným CTA tlačítkem, což je často produktová stránka.

Přidání parametru do tlačítka

Nejprve označíme tlačítko, a v pravém panelu (záložka Settings) vložíme nový parametr do sekce Custom Attributes. Tento parametr pojmenujeme například data-product a přiřadíme mu hodnotu. Nyní máme dvě možnosti:

1. Pokud se jedná o statickou stránku, musíme zajistit, aby tento parametr byl shodný s hodnotou v selectboxu na další stránce.
2. Pokud je stránka dynamická (tedy používá CMS), můžeme jako hodnotu parametru přiřadit Slug produktu, což je jedinečný identifikátor každé položky v CMS kolekcích, který je součástí URL adresy každé takové položky.

Výsledné tlačko pak v kódu na webu může vypadat takto:

<a href="/form-page" class="cta-button" data-product="product1">Get started</a>

Přidání parametru do URL

Abychom mohli ovlivnit stránku, která se teprve načte, přidáme do URL adresy parametr data-product=„product1”. Otevřeme stránku a v levém panelu nastavení (přes ikonu ozubeného kola) přejdeme k sekci Custom Code. Do části před zavírací značku </body> vložíme následující kód:

<script>
document.querySelectorAll('.cta-button').forEach(button => {
   button.addEventListener('click', function(e) {
       e.preventDefault();
       const product = this.getAttribute('data-product');
       window.location.href = `/form-page?product=${product}`;
   });
});
</script>

Nastavení selectboxu ve formuláři

V posledním kroku nastavíme selectbox ve formuláři tak, aby reagoval na parametr v URL. Otevřeme stránku s formulářem a opět do sekce Custom Code (před zavírací tag </body>) vložíme následující kód, který kontroluje URL a přiřazuje hodnotu produktu do selectboxu:

<script>
window.addEventListener('DOMContentLoaded', function() {
 const urlParams = new URLSearchParams(window.location.search);
 const product = urlParams.get('product');
 const productSelect = document.querySelector('#product-select');
 const productFormBlock = document.querySelector('.product-form');
if (product && productSelect) {
   productSelect.value = product;
   // Zobraz nebo skryj pole na základě výběru produktu
   handleProductChange(product);
 }
 productSelect.addEventListener('change', function() {
   handleProductChange(this.value);
 });
 function handleProductChange(product) {
   // Odstraní třídu .invisible z produktového formuláře
   productFormBlock.classList.remove('invisible');
   // Skryje všechny formuláře nabídky
   document.querySelectorAll('.offer-form').forEach(form => {
     form.style.display = 'none';
   });
   // Podle produktu zobrazí příslušný formulář
   if (product === 'product-1') {
     document.querySelector('#offer-product-1').style.display = 'block';
   }
   if (product === 'product-2') {
     document.querySelector('#offer-product-2').style.display = 'block';
   }
 }
 // Přidání obslužné funkce pro odeslání formuláře
 document.querySelectorAll('.offer-form').forEach(form => {
   form.addEventListener('submit', function(event) {
     // Počkej, až se zobrazí úspěšná zpráva
     const successMessage = form.querySelector('.form_message-success.w-form-done');
     const observer = new MutationObserver((mutationsList) => {
       for (let mutation of mutationsList) {
         if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
           if (successMessage.style.display === 'block') {
             // Přidá třídu .invisible na produktový formulář
             productFormBlock.classList.add('invisible');
             // Přestane sledovat změny
             observer.disconnect();
           }
         }
       }
     });
     // Sleduje změny stylu u zprávy o úspěšném odeslání
     observer.observe(successMessage, { attributes: true });
   });
 });
});
</script>

‍

Je důležité, aby hodnoty ve selectboxu odpovídaly parametrům data-product. Pokud se hodnoty neshodují, formulář se nevyplní.

PRO tip: Pokud nechcete hodnoty v selectboxu spravovat ručně a aktualizovat je pokaždé, když přidáte nový produkt, existuje elegantní řešení od Finsweet. Tento nástroj dynamicky načte všechny položky z CMS kolekce přímo do selectboxu. Jak jsem zmínil dříve, pokud používáte Slug produktu v parametru data-product, s Finsweet to dává perfektní smysl. Ale na to se podíváme zase jindy :-)

‍