> ## Documentation Index
> Fetch the complete documentation index at: https://docs.conversion.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Advanced Form Settings

> Advanced form settings for accessing and updating data on Conversion embedded forms

The **Advanced** tab of the form settings page contains JavaScript snippets for programmatically updating and retrieving data from your embedded Conversion form.

<Note>
  These settings only apply to embedded Conversion forms.
</Note>

<Frame>
  <img src="https://mintcdn.com/conversion/jCC9ibe7db1QqMtl/images/Screenshot2026-02-18at8.30.30PM.png?fit=max&auto=format&n=jCC9ibe7db1QqMtl&q=85&s=7f6d577527f3f65c62eea5a99bc09e68" alt="Screenshot 2026 02 18 At 8 30 30 PM" width="3456" height="1980" data-path="images/Screenshot2026-02-18at8.30.30PM.png" />
</Frame>

## Form fields

This table maps each form field (both displayed and hidden fields) to its field ID, which is used to identify it programmatically.

## Listen to form submissions

The following JavaScript snippet shows how to retrieve submitted form field values from an embedded Conversion form.

```javascript theme={null}
// Optional helper to access fields by their readable names
const FORM_FIELDS = {
  email: "<FIELD_ID>",
  name: "<FIELD_ID>",
};

window.addEventListener("message", (event) => {
  if (event.data?.type === "conversion-forms" && event.data.data?.eventName === "submitted") {
    const fields = event.data.data.fields || {};
    console.log("Form submitted:", fields);

    // Example of pulling specific values:
    // console.log("Email:", fields[FORM_FIELDS.email]);
  }
});
```

<Tip>
  Replace `<FIELD_ID>` with your form field ID's
</Tip>

Steps to retrieve fields programmatically:

<Steps>
  <Step title="Define a helper object">
    Define a helper object to store the field IDs for each field. These IDs are used to reference field data in your code.
  </Step>

  <Step title="Wait for form submission">
    Add an event listener for the `submitted` event, which fires when the form has been submitted.
  </Step>

  <Step title="Read the submitted fields">
    Extract values from the `fields` object, which maps each field ID to its submitted value.
  </Step>
</Steps>

## Update field values

The following JavaScript snippet shows how to programmatically update field values on an embedded Conversion form.

```javascript theme={null}
// Optional helper to access fields by their readable names
const FORM_FIELDS = {
  email: "<FIELD_ID>",
  name: "<FIELD_ID>",
};

// Ensure the form is ready to receive messages
window.addEventListener("message", (event) => {
  // Only handle messages from Conversion Forms
  if (event.data?.type !== "conversion-forms-ping" || event.origin !== "https://forms.conversion.ai") return;

  document.getElementById(<YOUR_FORM_ID>)?.contentWindow.postMessage({
    type: "conversion-forms",
    data: {
      eventName: "set-values",
      fields: {
        // Set a value
        // [FORM_FIELDS.email]: "user@example.com",
        // Remove a value
        // [FORM_FIELDS.name]: null
      }
    }
  }, "https://forms.conversion.ai");
});
```

<Tip>
  Replace `<YOUR_FORM_ID>` with your form ID, and `<FIELD_ID> `with your form field ID's
</Tip>

Steps to set field values programmatically:

<Steps>
  <Step title="Define a helper object">
    Define a helper object to store the field IDs for each field. These IDs are used to target specific fields when setting values.
  </Step>

  <Step title="Wait for the form to render">
    Add an event listener for the `"conversion-forms-ping"` event, which fires when the form is ready to receive messages.
  </Step>

  <Step title="Post a message to the iframe">
    Send a message to the form iframe with a `fields` object mapping each field ID to the value you want to set.

    <Info>
      To clear a field, set its value to `null`
    </Info>
  </Step>
</Steps>