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.
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" // Replace this with your 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>
);
}
}
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.
