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

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:

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

We automatically prefill the email field based on the email input field.

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

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

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

›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

Other Form Fields

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

Get the Question ID from the Surface Form Builder.
Add a data-question-id attribute to the input:

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

This method works with the following Surface form components:

Short Input
Long Input
Dropdown
Multiple Choice Question

3. Surface Form Constructor

Add the following script to your site's footer. With WPCode, go to Code Snippets > Header & Footer and paste it into the Footer section.

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

You must replace the <question_id> within data-question-id attribute below with the question ID from the Surface Form Builder.

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

1. Add a form with the surface-form-handler class

2. Prefill Other Fields (Optional)

Identity Info Fields

Other Form Fields

3. Surface Form Constructor

On this page

1. Add a form with the `surface-form-handler` class