
## Introduction

If you have embedded the Synerise [tracking code](/developers/web/installation-and-configuration) in your website, you will see anonymous customers in the Synerise Dashboard.

In this section, you will learn how to track forms on your website. Capturing forms is crucial, as the data used there automatically updates an anonymous customer's information and turns them into a known contact.

The data is saved in a [form.submit event](/docs/assets/events/event-reference/web-and-app#formsubmit). The event contains all data from the form.


<div class="admonition admonition-warning"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg></div><div class="admonition-body"><div class="admonition-content">

By default, tracking a form requires authentication and cannot be used by anonymous customers. To change this, modify the event authentication settings:
1. Add `form.submit` to the [list of events which do not require JWT authentication](/docs/assets/events/event-settings#events-which-change-customer-data-and-dont-require-authentication).
2. Remove `form.submit` from the [list of events which require JWT authentication](/docs/assets/events/event-settings#events-which-change-customers-data-and-require-authentication).

</div></div></div>


You probably have several types of forms on your page, such as a login, contact, or registration form, or one for leaving comments. This provides a variety of data, from a customer's first name to their comment about a product or your business. Synerise needs to know what type of data is sent in each input, so it can update the customer's personal data properly.

## Managing user context

Sending form data allows you to manage user context (UUID) in the browser. You can choose which identifying attribute (`email` or `custom_identfy`) to use for managing user context. The available identifiers differ depending on the selected configuration for email address uniqueness (see [Identifiers](/docs/settings/configuration/non-unique-emails)). If you use:  

- unique emails - then you can [define the identifier for managing user context](/docs/settings/configuration/non-unique-emails#managing-user-context). Once selected, you must consistently use it when sending form data. 
    
  <div class="admonition admonition-warning"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg></div><div class="admonition-body"><div class="admonition-content">

  If you send an identifying attribute that isn’t set as the context manager, it will be treated like a custom attribute and added or overwritten. For example, if `custom_identify` is set as the user context identifier and you send a different email address, the email will update but the user context remains unchanged.

  </div></div></div>

- non-unique emails - then `custom_identify` is the only available identifying attribute.


  <div class="admonition admonition-note"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

  You can decide how the user context is handled [when a link contains user-identifying parameters (snrs_cl and snrs_he)](/developers/web/user-identification#recognizing-customers-from-link-parameters).

  </div></div></div>


### Context managing behavior

- **For an anonymous user** - sending form data with an identifying attribute will recognize the user without changing their UUID. If a profile with that identifier already exists, the UUID will be [merged into the existing profile](/docs/crm/profile-merge).
- **For a recognized user** (different from the one provided in the form data): the user’s UUID is reset, and the browser context is updated to match the data sent in the form. If a profile with the given identifier already exists, the UUID will be [merged into that profile](/docs/crm/profile-merge).


## Sending data to Synerise with HTML form attributes

To send data from a form to Synerise, the form's fields must have the `data-synerise` attributes added to them.


<div class="admonition admonition-warning"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg></div><div class="admonition-body"><div class="admonition-content">

The SDK does not validate the data. For example, if the customer makes an error in their identifier and sends the form, a new profile with that identifier is created. This may cause the event history of an anonymous customer to be merged into a recognized profile with an error in the identifier, even if the user re-sends the form again with the right identifier. To avoid this, validate the entered data before sending the form.

</div></div></div>


**Example:**


<pre><code class="language-html">&lt;form action="" method="post" data-synerise="contact"&gt;
    &lt;input type="text" name="email" data-synerise="email" placeholder="Email" value="john.doe@synerise.com" /&gt;
    &lt;input type="text" name="name" data-synerise="firstname" placeholder="Name" value="John" /&gt;
    &lt;input type="text" name="surname" data-synerise="lastname" placeholder="Surname" value="Doe" /&gt;
    &lt;input type="text" name="customParam2" data-synerise="customAttribute1" value="customValue2" /&gt;
    &lt;input type="hidden" name="customParam2" data-synerise="customAttribute2" value="customValue2" /&gt;
    &lt;input type="submit" value="Save" /&gt;
&lt;/form&gt;</code></pre>


In the `form` tag, in the `data-synerise` attribute, you can send several values, separated by commas (`data-synerise="value1,value2,value3"`). The values will be saved in the event data as `formType` and as tags in the customer's card in **Behavioral Data Hub > Profiles**.

You can add additional attributes (see `customAttribute` in the example). They are saved to the `attributes` object in a customer's profile.

When the form above is sent, the following call to the SDK is made **automatically**:


<pre><code class="language-javascript">SR.event.sendFormData('contact',
    { //form data
        "surname": "Doe",
        "name": "John",
        "email": "john.doe@synerise.com",
        "customParam1": "customValue1",
        "customParam2": "customValue2"
    },
    { //field mapping
        "lastname": "surname",
        "firstname": "name",
        "email": "email",
        "customAttribute1": "customParam1",
        "customAttribute2": "customParam2"
    }
)</code></pre>

**Explanation**: 
+ Form data: _object_, HTML form field values. These are the collected values that are sent to Synerise and potentially stored as customer information in the customer card in **Behavioral Data Hub > Profiles**, depending on the mapping.
+ Field mapping: _object_. This object provides the mapping between the `name` attributes of your HTML form fields and the predefined fields of the customer object in the Synerise system.

### Delayed data forms

If an HTML form with `data-synerise` attributes appears after the tracking code has been initialized (for example, in a pop-up window), you have to explicitly initialize another search for the attributes on the page, using the following SDK method:


<pre><code class="language-javascript">SyneriseTC.initFormCatch()</code></pre>


## Calling the SDK directly

If you use the SDK method directly, you do not need to include the mapping object. You can refer to the fields directly by their Synerise names:


<div class="admonition admonition-warning"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg></div><div class="admonition-body"><div class="admonition-content">

- If you use the non-unique email feature, use `custom_identify` instead of `email`. See [non-unique email feature configuration](/docs/settings/configuration/non-unique-emails).
- The SDK does not validate the data. For example, if the customer makes an error in their identifier and sends the form, a new profile with that identifier is created. This may cause the event history of an anonymous customer to be merged into a recognized profile with an error in the identifier, even if the user re-sends the form again with the right identifier. To avoid this, validate the entered data before sending the form.

</div></div></div>



<pre><code class="language-javascript">SR.event.sendFormData('formType', {
    lastname: "Doe",
    firstname: "John",
    email: "john.doe@synerise.com",
    customAttribute: "customAttributeValue" // saved in the `attributes` object of a Profile
    // more attributes and custom attributes
})</code></pre>


You can replace `formType` with another value or a number of comma-separated values (no spaces). These values are saved as `formType` in the event and as tags in the customer's Profile.

### Sending multiple events

When calling the SDK directly, you may want to send more events with the `form.submit` event. To ensure that those additional events are saved after `form.submit` identifies the profile, use the `then` function.

For example, if you want to add a `review.send` event to the `form.submit` event:

<div class="highlight-code-block" data-hl-lines="5">
<pre><code class="language-js">SR.event.sendFormData('formType', {
    lastname: "Doe",
    firstname: "John",
    email: "john.doe@synerise.com",
}).then(function () {
    SR.event.trackCustomEvent("review.send",
        {
            "stars": 5
        });
});</code></pre>
</div>


## Marketing agreements

See [Newsletter agreements](/developers/web/newsletter-agreements).

## Recognizing already logged users

You can automatically recognize users who have logged in previously and their session is still active. 

### Requirements

ID of a currently logged-in user:

- if you use unique emails: `email` or `custom_identify`
- if you use [non-unique emails](/docs/settings/configuration/non-unique-emails): `custom_identify`


### Methods

Execute the following methods in a given order:

1. [Get IdentityHash](/developers/web/methods-reference#get-identityhash) - This method generates and saves automatically  `IdentityHash`  based on: 
    - ` email ` or `custom_identify`  (for unique emails),
    -  ` custom_identify `  (for non-unique emails). 
2. [Calculate IdentityHash](/developers/web/methods-reference#calculate-identityhash) - This method calculates `IdentityHash` for any string.      
3. [Send form data](/developers/web/methods-reference#send-form-data) - This method recognizes a user.             

### Responses


<pre><code class="language-javascript">SR.client.getIdentityHash(): String //if there is no identity hash, an empty string is returned
SR.client.hashIdentity(email): Number</code></pre>


### Example implementation

The following code snippet compares the data about the currently tracked user with an email of a logged user.  It checks whether the user is unidentified in Synerise or if the logged account is different from the one associated with the provided email. If either condition is met, the code proceeds to send form data for a login event, including the captured email, along with any additional parameters as key-value pairs.


<pre><code class="language-javascript">//capture logged user email
const email="john.doe@synerise.com"

//user logged but unidentified in Synerise or logged identified as different account
if(email &amp;&amp; (SR.client.getIdentityHash()==='' || SR.client.getIdentityHash()!==SR.client.hashIdentity(email))){
    SR.event.sendFormData('login', {
        email: email
        //additional parameters as key-value pairs
    })
}</code></pre>


