Skip to main content

​
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 app/layout.tsx file: Add the data-question-id attribute to your Surface Tag script.
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 Script from "next/script";
import SurfaceFormScript from "./surfaceFormScript";

export default function RootLayout({
	children,
}: Readonly<{
	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"
          data-question-id="<question_id>" // Replace this with the question ID from the Surface Form Builder
         />
      </head>
		<body>
		 {children}
		  <SurfaceFormScript
           formUrl="REPLACE ME WITH FORM URL" // Replace this with a Surface Form URL
           embedType="popup" // works on all embedding types!
           popupSize="medium" // "small", "medium", "large"
           buttonClassName="surface-form-button"
         />
		  </body>
	  </html>
	);
}