Kennis delen

Integreer Tally-formulieren in Webflow

Maak het makkelijk voor je team

In veel gevallen is kiezen voor een oplossing van derden voor formulieren een slimme keuze, niet alleen om prestatieredenen, maar ook voor een betere abstractie. Veel leden van het marketingteam zijn uitsluitend gericht op het verzamelen van gegevens voor evenementen, campagnes en tracking. Wanneer formulieren verspreid zijn over een website, kan het moeilijk zijn om ze allemaal bij te houden.

Daarom vind ik Tally vooral handig voor complexere websites. Enkele belangrijke voordelen zijn:

Gebruiksvriendelijke formulieren in meerdere stappen — Kant en klaar verbeterde UX.
Gecentraliseerd formulierbeheer — Bekijk alle actieve formulieren op één plek.
Geen afhankelijkheid van ontwikkelaars — Velden toevoegen of verwijderen zonder te coderen.
Duidelijke samenvattingen van gegevens — Bekijk geaggregeerde inzichten (bijvoorbeeld totale glutenvrije selecties).
Betere vorm UX — Strak ontwerp zonder extra moeite.
Flexibele als-dan-logica — Formulieren eenvoudig aanpassen op basis van gebruikersinvoer.
Verbeterde spamverwerking — Voorkom veelvoorkomende problemen in de native formulieren van Webflow.
Gedeeltelijke inzendingen vastleggen — Verkrijg gegevens, zelfs als een formulier niet volledig is ingevuld.
Voortgangsindicatoren — Laat gebruikers zien hoe ver ze zijn.
Velden automatisch opslaan — Verminder frustratie door input te onthouden.

Nu de voordelen duidelijk zijn, hoe implementeren we Tally?

Ik raad aan om een aangepaste component gecombineerd met een script op maat. Deze aanpak maakt het eenvoudiger te beheren en zorgt ervoor dat alle implementaties snel kunnen worden gevonden door het gebruik van componenten in het hele project te controleren.

‍

Met dit aangepaste onderdeel kan uw Webflow-team eenvoudig formulieren rechtstreeks in de Designer toevoegen. Het bevat een URL insluiten en drie verborgen velden, die essentiële context bieden wanneer het formulier naar de backend wordt verzonden en uiteindelijk wordt doorgegeven aan Salesforce of een ander systeem van derden.

In dit voorbeeld zijn de verborgen velden vooraf gevuld met relevante waarden, maar hun echte kracht ligt in hun flexibiliteit. Als u dit formulier gebruikt in een Webflow-collectie, kunt u CMS-gegevens dynamisch koppelen aan de indiening van het formulier. Hiermee kun je:

Koppel automatisch formulierinzendingen aan specifieke pagina's, campagnes of gebruikers.
Geef product- of servicegegevens door in de inzendingsgegevens.
Houd bij waar een formulier is ingediend zonder handmatige invoer.

Door het onderdeel op deze manier te structureren, krijgt je team de mogelijkheid om het opnieuw te gebruiken in meerdere formulieren en tegelijkertijd ervoor te zorgen dat elke inzending de juiste metagegevens bevat, zonder dat er voortdurende tussenkomst van de ontwikkelaar nodig is.
‍

Binnen het onderdeel gebruiken we een aangepast element om het iframe te structureren dat nodig is voor het inbedden van het Tally-formulier. Daarnaast is er een div met specifieke kenmerken—dit is de sleutel om CMS-velden dynamisch aan het formulier te koppelen.

Deze kenmerken worden automatisch omgezet in queryreeksen en toegevoegd aan de URL van het Tally-formulier. Zodra het formulier is geladen, pikt Tally deze waarden op en wijst ze toe aan de verborgen velden in het formulier. Deze aanpak zorgt ervoor dat elke inzending van een formulier de juiste contextuele gegevens bevat zonder dat handmatige invoer vereist is.

Voorbeeld van een gebruiksscenario:

Stel dat we dit formulier insluiten in een Lijst met Webflow-collecties—we kunnen dynamisch gegevens doorgeven zoals:

Campagne-ID — Om bij te houden welke marketingcampagne tot de inzending heeft geleid.
Gebruikers-ID of e-mailadres — Om inzendingen te koppelen aan specifieke gebruikers.
Naam van het product of de service — Om het antwoord op het formulier te koppelen aan een bepaald aanbod.

Implementatie

Hieronder vindt u een voorbeeldfragment van aangepaste code om dit te bereiken. Als u meerdere formulieren per pagina gebruikt, moet u deze mogelijk enigszins aanpassen om conflicten te voorkomen. In dit geval echter, aangezien de eigenschappen die we willen doorgeven consistent blijven, werkt deze configuratie soepel:

‍

if (Tally) {
  Tally.loadEmbeds();

  const tallyElement = document.querySelector('.tally-attributes');

  if (tallyElement) {
    const attributes = tallyElement.attributes;
    const params = {};

    for (let i = 0; i < attributes.length; i++) {
      const attr = attributes[i];
      if (attr.name !== "class") { // Exclude class attribute
        params[attr.name] = attr.value;
      }
    }

    addQueryParams(params);
  }
}

function addQueryParams(params) {
  const url = new URL(window.location.href);

  // Loop through the object and set parameters
  Object.keys(params).forEach(key => {
    url.searchParams.set(key, params[key]);
  });

  // Update the URL without reloading the page
  window.history.replaceState(null, "", url);
}

‍

Door deze methode te gebruiken, kun je ervoor zorgen dat elke formulierinzending waardevolle context bevat, waardoor het eenvoudiger wordt om tools zoals Salesforce, Pipedrive of Google Analytics bij te houden, te analyseren en te integreren. Omdat alles op componentniveau wordt afgehandeld, kunnen marketeers bovendien formulieren beheren zonder hulp van ontwikkelaars nodig te hebben.

‍

Wil je hier verder mee doorgaan? Als u geïnteresseerd bent in het uitbreiden van dit onderdeel en deze logica met UTM-parameters, neem gerust contact op! Stuur me een e-mail op johan@wambay.com, en ik deel graag inzichten over hoe je tracking naadloos kunt integreren.