Collecting data from a form

If your website has a data entry form with a submit confirmation button, you can set up data collection from this form using JavaScript. Data will be recorded only after the user clicks the button that confirms the submission.

❗If your form is in an iframe, Dashly won't be able to collect data from it.

Let's take a look at an example of a form with fields for entering a name, phone number, and a button to submit data:

To start recording data with a button click check, we'll need to find the data input field selectors and the button selector.

After you've found the selectors, go to the "Settings" - "Visitors data tracking" - "Configure the JavaScript code" section and add the following script there:

function getClosest(el, s) {
    var r = undefined;
    while (el) {
        if (el.matches(s)) {
           r = el;
           break;
       } else if (el.tagName.toLowerCase()=='body') {
           break;
       };
       el = el.parentElement;
  };
  return r;
};
document.addEventListener('click', function(e) {
    if (e.target.matches('FORM BUTTON SELECTOR')) {
        var form = getClosest(e.target, 'form'),
            name = form.querySelector('NAME SELECTOR').value,
            phone = form.querySelector('PHONE SELECTOR').value;
        dashly.track('Name of event');
        dashly.identify([
           {op: 'update_or_create', key: '$name', value: name},
           {op: 'update_or_create', key: '$phone', value: phone}
       ]);
    };
});

You need to add the selectors you identified earlier to this script. Add a button selector to this line:

if (e.target.matches('FORM BUTTON SELECTOR')) {

Add selectors for name and phone number fields to these lines:

name = form.querySelector('NAME SELECTOR').value,
phone = form.querySelector('PHONE SELECTOR').value;

Add the name of the event that will be recorded when the button is clicked:

dashly.track('Name of event');

The event name can be anything. It should tell you that it was recorded after clicking on this particular button.

After all the selectors are in place, save the changes in the "Configure the JavaScript code" section and check the configured data collection - try filling the form on the website and see if the data appears in your user card.

❗ The script above is an example. You can change it depending on the form which you want to configure data collection for - you can add variables or change the current ones.