NÁVOD: Webflow Form: jak zobrazit z jaké URL přišel?

Pokud nechcete číst, tento obsah jsem připravil i jako video. Textová podoba následuje hned pod ním.

Každý formulář ve Webflow můžete pojmenovat, jak je libo. Takže pokud formulář používáte na několika stránkách webu, můžete to vyřešit tak, že je podle umístění pojmenujete a pak budete vědět z jaké stránky přišla poptávka. Když to tak ale uděláte, v prostředí Webflow budete mít několik políček formulářů s jejich výstupy - což pokud to takto uděláte třeba u 20 a více stránek, může to být chaos.

‍

I když výstupy z formulářů si samozřejmě můžete nastavit i na e-mail, kde je vám tohle jedno. Ale když třeba budete chtít přidat nové pole formuláře, práci budete muset udělat na všech místech - takže třeba 20x.

‍

Čili dostáváme se k tomu, v jakých situacích můžete potřebovat přímo do těla formuláře dostat informaci z jaké URL, neboli stránky výstup formuláře přišel.

‍

Je to jednak ve chvíli, kdy předchvilkou nastíněnou situaci budete chtít vyřešit formou opakujícího symbolu - protože pak je nasazený formulář na všech stránkách stejný, tudíž i jeho název.

‍

A úplně stejná situace pak je pokud formulář přidáte jako součást CMS šablony - také máte na všech stránkách CMS příspěvků stejný formulář se stejným názvem, samozřejmě neřešme alternativní zobrazení.

‍

Takže problém známe a pojďme se podívat na to, jak to implementovat.

‍

Do formuláře nad tlačítko odeslání vložce embed code a do něho následující script:

<input type="hidden" class="text-field w-input" maxlength="256" name="url" data-name="URL" id="url">
<input type="hidden" class="text-field w-input" maxlength="256" name="page-title" data-name="page-title" id="page-title">

A pak do stránky ve které se formulář nachází (a nebo v rámci nastavení celého webu) vložce do části </body> následující script:

<script>
window.addEventListener("DOMContentLoaded", (event) => {
	document.getElementById("url").value = window.location;
    document.getElementById("page-title").value = document.title;
    });
</script>