# form_submitted

The `form_submitted` event logs an instance where a form on a page is submitted.

```javascript
import {register} from '@shopify/web-pixels-extension';

register(({analytics}) => {
  analytics.subscribe('form_submitted', (event) => {
    // Example for accessing event data
    const element = event.data.element;

    const elementId = element.id;
    const formAction = element.action;
    const emailRegex = /email/i;
    const [email] = element.elements
      .filter((item) => emailRegex.test(item.id) || emailRegex.test(item.name))
      .map((item) => item.value);
    const formDetails = element.elements.map((item) => {
      return {
        id: item.id,
        name: item.name,
        value: item.value,
      };
    });

    const payload = {
      event_name: event.name,
      event_data: {
        id: elementId,
        url: formAction,
        email: email,
        formDetails: formDetails,
      },
    };

    // Example for sending event to third party servers
    fetch('https://example.com/pixel', {
      method: 'POST',
      body: JSON.stringify(payload),
      keepalive: true,
    });
  });
});

```

```javascript
analytics.subscribe('form_submitted', (event) => {
  // Example for accessing event data
  const element = event.data.element;

  const elementId = element.id;
  const formAction = element.action;
  const emailRegex = /email/i;
  const [email] = element.elements
    .filter((item) => emailRegex.test(item.id) || emailRegex.test(item.name))
    .map((item) => item.value);
  const formDetails = element.elements.map((item) => {
    return {
      id: item.id,
      name: item.name,
      value: item.value,
    };
  });

  const payload = {
    event_name: event.name,
    event_data: {
      id: elementId,
      url: formAction,
      email: email,
      formDetails: formDetails,
    },
  };

  // Example for sending event to third party servers
  fetch('https://example.com/pixel', {
    method: 'POST',
    body: JSON.stringify(payload),
    keepalive: true,
  });
});

```

## Properties

### PixelEventsFormSubmitted

The `form_submitted` event logs an instance where a form element on the page has been submitted

### clientId

value: `string`

The client-side ID of the customer, provided by Shopify

### data

value: `PixelEventsFormSubmittedData`

  - PixelEventsFormSubmitted: export interface PixelEventsFormSubmitted {
  /**
   * The client-side ID of the customer, provided by Shopify
   */
  clientId?: string;
  data?: PixelEventsFormSubmittedData;
  /**
   * The ID of the customer event
   */
  id?: string;

  /**
   * The name of the customer event
   */
  name?: string;

  /**
   * The sequence index number of the event.
   */
  seq?: number;
  /**
   * The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format
   */
  timestamp?: string;
  type?: EventType.Dom;
}
  - PixelEventsFormSubmittedData: export interface PixelEventsFormSubmittedData {
  element?: FormElement;
}

### id

value: `string`

The ID of the customer event

### name

value: `string`

The name of the customer event

### seq

value: `number`

The sequence index number of the event.

### timestamp

value: `string`

The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format

### type

value: `EventType.Dom`

  - EventType: export enum EventType {
  AdvancedDom = 'advanced-dom',
  Custom = 'custom',
  Dom = 'dom',
  Meta = 'meta',
  Standard = 'standard',
}

### PixelEventsFormSubmittedData

### element

value: `FormElement`

  - FormElement: export interface FormElement {
  /**
   * The action attribute of a form element
   */
  action?: string | null;
  elements?: InputElement[];

  /**
   * The id attribute of an element
   */
  id?: string | null;
}

### FormElement

An object that contains data about a form element type

### action

value: `string | null`

The action attribute of a form element

### elements

value: `InputElement[]`

  - InputElement: export interface InputElement {
  /**
   * The id attribute of an element
   */
  id?: string | null;

  /**
   * The name attribute of an element
   */
  name?: string | null;

  /**
   * A string representation of the tag of an element
   */
  tagName?: string | null;

  /**
   * The type attribute of an element. Often relevant for an input or button
   * element.
   */
  type?: string | null;

  /**
   * The value attribute of an element. Often relevant for an input element.
   */
  value?: string | null;
}

### id

value: `string | null`

The id attribute of an element

### InputElement

An object that contains data about an input element type

### id

value: `string | null`

The id attribute of an element

### name

value: `string | null`

The name attribute of an element

### tagName

value: `string | null`

A string representation of the tag of an element

### type

value: `string | null`

The type attribute of an element. Often relevant for an input or button element.

### value

value: `string | null`

The value attribute of an element. Often relevant for an input element.

### EventType

### AdvancedDom

value: `advanced-dom`


### Custom

value: `custom`


### Dom

value: `dom`


### Meta

value: `meta`


### Standard

value: `standard`