# Email Input Field Trigger













## 1. Add Form Block component [#1-add-form-block-component]

<Frame>
    <img alt="Form Block Component" src="__img0" />
</Frame>

1. In Webflow, click on &#x2A;*`Add Element`** to add a new element.
2. Select &#x2A;*`Form Block`** from the list of elements.

## 2. Configure Form Block component [#2-configure-form-block-component]

<Frame>
    <img alt="Form Block Component" src="__img1" />
</Frame>

1. In the form block component, Select &#x2A;*`Form`** from the list of elements.
2. On the right side, under &#x2A;*`Style Selector`*&#x2A;, add the &#x2A;*`surface-form-handler`** class to the form.

<Tip>
  We automatically prefill the email field based on the email input field.
</Tip>

## 3. Prefill Other Fields (Optional) [#3-prefill-other-fields-optional]

If you want to prefill fields other than the email input, you can do so by adding custom attributes to your Webflow form fields.

### Identity Info Fields [#identity-info-fields]

For identity-related fields (except email), add a custom attribute to the input field in Webflow:

1. Select the input field in Webflow
2. Go to **Settings** in the right sidebar
3. Scroll to the bottom and click **Add Custom Attribute**
4. Set the attribute:
   * **Key:** `data-field-name`
   * **Value:** One of the supported field names below

<Frame>
    <img alt="Field Name Attribute" src="__img2" />
</Frame>

<Accordion title="Supported Identity Field Values">
  | Field Name          | Description          |
  | ------------------- | -------------------- |
  | `firstName`         | First name           |
  | `lastName`          | Last name            |
  | `emailAddress`      | Email address        |
  | `phoneNumber`       | Phone number         |
  | `companyName`       | Company name         |
  | `numberOfEmployees` | Number of employees  |
  | `websiteUrl`        | Website URL          |
  | `title`             | Job title            |
  | `streetAddress`     | Street address       |
  | `aptSuiteEtc`       | Apartment/Suite/etc. |
  | `city`              | City                 |
  | `state`             | State                |
  | `country`           | Country              |
  | `zipCode`           | Zip/Postal code      |
  | `companyRevenue`    | Company revenue      |
</Accordion>

### Other Form Fields [#other-form-fields]

For all other fields (non-identity fields), you'll need to use the question ID from your Surface form:

1. Get the **Question ID** from the Surface Form Builder

<Frame>
    <img alt="Question ID Location" src="__img3" />
</Frame>

2. In Webflow, select the input field
3. Go to **Settings** in the right sidebar
4. Scroll to the bottom and click **Add Custom Attribute**
5. Set the attribute:
   * **Key:** `data-question-id`
   * **Value:** The component ID from Surface

<Note>
  This method works with the following Surface form components:

  * **Short Input**
  * **Long Input**
  * **Dropdown**
  * **Multiple Choice Question**
</Note>

## 4. Surface Form Constructor [#4-surface-form-constructor]

Go to the Webflow [**dashboard**](https://webflow.com/dashboard&#x29; > &#x2A;*`Project Section`*&#x2A; > Select &#x2A;*`Custom Code`*&#x2A; and add the following custom code into the &#x2A;*`footer`** code section.

Add the `data-question-id` attribute to your Surface form script.

<Note>
  You must replace the &#x2A;*`<question_id>`*&#x2A; within &#x2A;*`data-question-id`** attribute below with the question ID from the Surface Form Builder.
</Note>

<Frame>
    <img alt="Question ID Location" src="__img4" />
</Frame>

```html
<!-- Start Surface Form Embed -->

<script data-question-id="<question_id>">
  (function () {
     const surface_src = "surface_form_url";
     const surface_embed_type = "slideover"; // works on all embedding types!
     const target_element_class = "surface-form-button";
     const c = new SurfaceEmbed(
       surface_src,
       surface_embed_type,
       target_element_class,
     );
   })();
</script>

<!-- End Surface Form Embed -->
```