# Email Input Field Trigger



Use this when you have an email capture field on your page (for example in a
hero section) and want submitting it to open your Surface Form with the email
already filled in.

## 1. Add a form with the `surface-form-handler` class [#1-add-a-form-with-the-surface-form-handler-class]

Surface looks for a form with the **`surface-form-handler`** class and takes
over its submission.

WordPress has no built-in form block, so add a **`Custom HTML`** block with a
simple form:

```html
<form class="surface-form-handler">
  <input type="email" name="email" placeholder="Enter your work email" required />
  <button type="submit">Get started</button>
</form>
```

If you build the form with a form plugin instead, add the
`surface-form-handler` class to the form element — most form plugins have a
CSS class setting for this.

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

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

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

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

For identity-related fields (except email), add a `data-field-name` attribute to the input:

```html
<input type="text" data-field-name="firstName" placeholder="First name" />
```

<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.
2. Add a `data-question-id` attribute to the input:

```html
<input type="text" data-question-id="<question_id>" />
```

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

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

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

Add the following script to your site's **footer**. With
[**WPCode**](/guides/embedding/wordpress/embedding&#x29;, go to &#x2A;*`Code Snippets`*&#x2A; >
&#x2A;*`Header & Footer`** and paste it into the **Footer** 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>

```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 -->
```