Triggering via Email Input Field

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 app/layout.tsx file:

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <head>
        <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"
        />
        <Script
          strategy="afterInteractive"
          id="surface-form-script"
          data-question-id="<question_id>"
          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>{children}</body>
    </html>
  );
}

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.

Inline Popup

⌘I

Form Embedding

HubSpot Forms Configuration

Guides

Email Input Field Trigger

1. Add the HTML Form

2. Surface Form Constructor

​1. Add the HTML Form

​2. Surface Form Constructor

1. Add the HTML Form

2. Surface Form Constructor