Website Tracker SDK | copernica.form()

Met de copernica.form() functie kun je een formulier dat je via de Copernica Marketing Suite hebt aangemaakt, inladen op je eigen website. De functie geeft een promise terug die uiteindelijk een form object oplevert. Met dit form-object kun je het formulier op verschillende manieren tonen, valideren, uitlezen of versturen.

De naam van het formulier dat je wilt tonen geef je als string mee aan de functie. Bijvoorbeeld:

copernica.form('formulier-naam').then(form => {
    // hier kun je operaties uitvoeren met het *form* object
});

Let op: je moet zelf instellen wat er gebeurt nadat het formulier wordt verstuurd. Dit doe je via een opvolgactie in de Marketing Suite, bijvoorbeeld door een profiel bij te werken, een e-mail te versturen of een profiel toe te voegen aan een database. Zonder opvolgactie worden de ingevulde gegevens opgeslagen in een logfile, maar gebeurt er verder niets.

Het form object

Het form-object biedt een aantal handige methodes waarmee je bepaalt hoe en waar het formulier op je website wordt getoond en verwerkt.

form.attachTo(element)

Met deze functie toon je het formulier binnen een bestaand HTML element op je pagina. Dit element moet je zelf voorzien in de HTML. Bijvoorbeeld:

<div id="formulier-plek"></div>

<script>
copernica.form('formulier-naam').then(form => {
    form.attachTo(document.getElementById('formulier-plek'));
});
</script>

form.popover(options)

Met deze functie toon je het formulier als een popover bovenop je website. Je kunt optioneel een options-object meegeven om positie en overlay aan te passen.

Ondersteunde opties:

• position: 'center', 'top-left', 'top-right', 'bottom-left', of 'bottom-right' (standaard: 'center').
• overlay: true of false om een semi-transparante overlay toe te voegen (standaard: true).

Voorbeeld:

copernica.form('formulier-naam').then(form => {
    form.popover({ position: 'bottom-right', overlay: true });
});

form.data()

Met deze functie kun je de huidige waarden van alle ingevulde formuliervelden ophalen. De returnwaarde is een object waarbij de keys overeenkomen met de veldnamen en de values met de ingevulde waardes:

copernica.form('formulier-naam').then(form => {
    console.log(form.data());
});

form.validate()

Valideert het formulier volgens de instellingen uit de Marketing Suite (zoals verplichte velden en veldvalidaties). Deze functie geeft een promise terug die:

• wordt uitgevoerd als alles correct is ingevuld,
• een foutmelding geeft als er fouten in het formulier zitten.

form.validate().then(() => {
    console.log('Formulier is correct ingevuld');
}).catch(error => {
    console.log('Formulier bevat fouten');
});

form.submit()

Verstuurt het formulier naar Copernica. Deze functie controleert automatisch of alle verplichte velden goed zijn ingevuld. Als er fouten zijn, wordt het formulier niet verzonden.

form.submit().then(() => {
    console.log('Formulier succesvol verzonden');
}).catch(error => {
    console.log('Formulier niet verzonden, controleer de invoer');
});

Overigens wordt het formulier ook gewoon verstuurd als de gebruiker op de verzend-button klikt. Je hoeft deze functie dus meestal niet zelf aan te roepen.

form.page(index)

Met deze functie toon je een specifieke pagina van het formulier. Standaard start een formulier op de eerste pagina (index = 0) en wordt de volgende pagina ingeladen als de gebruiker op een button klikt. Met deze functie kun je met een functiecall een andere pagina tonen.

copernica.form('formulier-naam').then(form => {
    form.popover({ position: 'bottom-right', overlay: true });
    form.page(3);
});

Let op: De pagina-index begint bij 0, page(3) toont dus de vierde pagina van het formulier.

form.back()

Met deze functie is het mogelijk om een pagina terug te gaan. Dit kun je bijvoorbeeld gebruiken als je van buiten het formulier programmatisch een pagina terug wil gaan.

Samenvatting

De copernica.form() functie maakt het eenvoudig om formulieren van Copernica in je website te integreren. Je kunt zelf kiezen of je het formulier inline of als popover toont, en je hebt controle over validatie en verzending. Vergeet niet om in de Marketing Suite een opvolgactie aan te maken zodat je ingevulde formulieren ook daadwerkelijk verwerkt worden.