# Email Input Field Trigger





## 1. Add the HTML Form [#1-add-the-html-form]

Ensure your HTML form includes the `surface-form-handler` class. This class is essential for identifying the form as one that triggers the Surface Form popup. Example:

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

<Note>
  Add the &#x2A;*`surface-form-handler`** class to any external form that you want to use to trigger the Surface Form popup.
</Note>

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

Go to the &#x2A;*`public/index.html`*&#x2A; file in your React.js project and add the following code at the end of &#x2A;*`<body>`** tag:

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="__img0" />
</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 -->
```
