Data Loader Field

The Data Loader field can load data from different sources from client side.

E.g. some data could be stored in the local storage of the browser. The Data loader will access that storage and retrieve the data.

This tutorial will show you how to set up and use the data loader.

If you haven't already done it, install and setup your project. You can use the umkickstarter.

Continue with creating a new Contact Form instance.

Setting up Contact Form Instance

Go to the tab form wizard and add a new Topic or Text field.

Change the Label to Data Loader and change the field show as to Data Loader.

Now continue with setting up the type of the Data Loder as described in the next section.

You can choose between:

Local Storage
Session Storage
Session cookie
Data Attribute in HTML tag
JavaScript Callback
URL parameters

Finally Save and Release your changes.

All data from the Data Loader will be send from client to server side by its data loader Attribute e.g. cf_topic_01.

Local Storage

By default the option Local Storage is pre selected for the field Data origin.

Enter a Data origin id.

if (ctx.modus === "rendered") {
  localStorage.setItem("MyLocalStorageOriginDataID", "Some data from local storage");
}

Navigate to the tab JavaScript Snippet, select Set custom JS and add the if statement from the left.

It will add an entry to your local storage with the previously specified id and some text as value.

Session Storage

Change the drop down Data origin to Session Storage.

Enter a Data origin id.

if (ctx.modus === "rendered") {
  sessionStorage.setItem("MySessionStorageOriginDataID", "Some data from session storage");
}

Navigate to the tab JavaScript Snippet, select Set custom JS and add the if statement from the left.

It will add an entry to your session storage with the previously specified id and the given text as value.

Session cookie

Change the drop down Data origin to Session cookie.

Enter a Data origin id.

Data Attribute in HTML tag

Change the drop down Data origin to Data Attribute in HTML tag.

Enter a Data origin id.

Enter an HTML attribute.

<div id="my-data-origin-id" data-attr="my-html-attribute">

Add an HTML tag with the defined id and Html attribute to your webpage on which you pasted the JavaScript snippet.

In this example cf_topic_01 will be set to “my-html-attribute”

JavaScript Callback

Change the drop down Data origin to JavaScript Callback.

Copy and paste the JavaScript function on the let to your webpage.

It will be executed by the Data Loader and the result will be saved in the contact table of the corresponding UM entry.

URL parameters

Change the drop down Data origin to URL parameters.

Use of data

All data from the Data Loader be will saved in the contact table and can be accessed by its Attribute name. In this example the attributes name is cf_topic_01.

For our example navigate to the Mailing templates and create a new one.

Paste {special:cf_topic01_nice} into the Text field to print out a readable form of the data loader content. {special:contactDetails} contains all contact informations including the data loader content as well.

Navigate to Apps / Contact form. Choose your instance and change under Contact form → Confirmation of receipt → Choose email notification to your mailing template.

Now go back to your webside, fill out the form and submit it again.

Back to UM / Mail Log you should see an email wich contains the relevant data.