# Embedding Customizable Form Tracking Script in Marketing Engine Landing Page

## Overview:

This article shows how to embed a JavaScript snippet in a **Marketing Engine landing page** to send form submissions to a dynamic webhook URL.

#### Use Case <a href="#use-case" id="use-case"></a>

You want to track submissions of different forms across various landing pages, sending the collected data to different webhook endpoints. This script is **configurable for each page** by simply changing two variables.

#### Customizable Script <a href="#customizable-script" id="customizable-script"></a>

Paste the following code into an **HTML block** on your landing page:

<figure><img src="/files/IPSap5HvX6vncdlIcTKu" alt=""><figcaption></figcaption></figure>

```
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("landingpage_form_{landing_form_id}");
    const webhookURL = "{webhookURL}";

    // List of fields to exclude from webhook
    const excludeFields = [
      "Landing Page Token"
    ];

    if (form) {
      form.addEventListener("submit", function () {
        const formData = new FormData(form);
        const payload = {};

        for (const [key, value] of formData.entries()) {
          if (!excludeFields.includes(key)) {
            if (payload[key]) {
              payload[key] = Array.isArray(payload[key])
                ? [...payload[key], value]
                : [payload[key], value];
            } else {
              payload[key] = value;
            }
          }
        }

        const json = JSON.stringify(payload);
        console.log("Filtered Payload:", json);

        try {
          const blob = new Blob([json], { type: "text/plain" });
          navigator.sendBeacon(webhookURL, blob);
        } catch (err) {
          console.error("Beacon send error:", err);
        }
      });
    }
  });
</script>
```

#### How to Use It <a href="#how-to-use" id="how-to-use"></a>

1. **Set** `landing_form_id`**:**\
   Replace the value of `landing_form_id` with the **actual form ID** for the landing page you're working on.
2. **Set** `webhookURL`**:**\
   Replace the placeholder webhook URL with your **actual endpoint** (e.g., Zapier, webhook.site, internal server).
3. **Paste the Script:**\
   Add the complete `<script>` block into an HTML section of the landing page using the **editor’s embed block**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.satisfilabs.com/resource-center/marketing-engine/templates-and-landing-pages/landing-page-template-with-a-form/embedding-customizable-form-tracking-script-in-marketing-engine-landing-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.