Skip to main content

form_submitted
interface

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

Anchor to propertiesProperties

Anchor to clientId
clientId
string

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

Anchor to data
data
Anchor to id
id
string

The ID of the customer event

Anchor to name
name
string

The name of the customer event

Anchor to seq
seq
number

The sequence index number of the event.

Anchor to timestamp
timestamp
string

The timestamp of when the customer event occurred, in ISO 8601 format

Anchor to type
type
.Dom
Was this section helpful?

Accessing DOM Events

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,
});
});
});