Email Input Field Trigger

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:

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

Add the surface-form-handler class to any external form that you want to use to trigger the Surface Form popup.

2. Surface Form Constructor

Add the following code to the pages/_document.tsx file:

import Document, { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <Script
            id="surface-tag"
            src="https://cdn.jsdelivr.net/gh/trysurface/scripts@latest/surface_tag.min.js"
            data-site-id="SITE_ID"
            strategy="beforeInteractive"
          />
          <Script
            id="surface-form-script"
            data-question-id="<question_id>" // Replace this with the question ID from the Surface Form Builder
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
              __html: `
                (function () {
                  const surface_src = "REPLACE ME WITH FORM URL"
                  const surface_embed_type = "popup"
                  const target_element_class = "surface-form-button"
                  const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)
                })();
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Using a verified custom domain? Add data-custom-domain="forms.example.com" to the Surface Tag. Follow the custom-domain setup guide before publishing the change.

Add the data-question-id attribute to your Surface Tag script in the pages/_document.tsx file.

You must replace the <question_id> within data-question-id attribute and REPLACE ME WITH FORM URL with the question ID from the Surface Form Builder and the form URL respectively.

1. Add the HTML Form

2. Surface Form Constructor

On this page