​
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

Let’s add the SurfaceFormScript() component that we created in Step 2 to the pages/_app.tsx file: 
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import SurfaceFormScript from "../../surfaceFormScript";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <SurfaceFormScript
         formUrl="REPLACE ME WITH FORM URL" // Replace this with a Surface Form URL
         embedType="popup"
         popupSize="medium" // "small", "medium", "large"
         buttonClassName="surface-form-button"
       />
    </>
  );
}
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 below with the question ID from the Surface Form Builder.
Question ID Location
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body className="antialiased">
        <Main />
        <NextScript />
        <Script
          src="https://cdn.jsdelivr.net/gh/trysurface/scripts@latest/surface_tag.min.js"
          data-site-id="SITE_ID" // Replace this with your site id
          strategy="beforeInteractive"
          data-question-id="<question_id>" // Replace this with the question ID from the Surface Form Builder
        />
      </body>
    </Html>
  );
}