Inline Form Embed
Embed your form inline with the rest of your page
WAIT... Make sure that you have added the Surface Tag to your site before proceeding.
iFrame Embed Code
Add this code where the form should appear:
<!-- Start Surface Form Embed -->
<iframe
src="REPLACE ME WITH FORM URL"
allowfullscreen
loading="eager"
fetchpriority="high"
>
</iframe>
<!-- End of Surface Form Embed -->Replace REPLACE ME WITH FORM URL with your form URL. Click Share in the
form's Overview section to find it.
Optimize Speed
Add the following <link> tags inside the <head> of your site:
<!-- Speed up connections to forms.withsurface.com by performing early DNS resolution and TCP handshake -->
<link rel="dns-prefetch" href="https://forms.withsurface.com">
<link rel="preconnect" href="https://forms.withsurface.com" crossorigin>
<!-- Fetch the form in advance, so it's ready when a user opens it. -->
<link rel="prefetch" href="REPLACE ME WITH FORM URL" as="document">Replace REPLACE ME WITH FORM URL with a Surface Form URL.
If the form uses a custom domain, replace forms.withsurface.com in the connection hints with your verified domain. See Use the Surface Tag with a Custom Domain.
Explanation
- dns-prefetch → Resolves the domain early to skip DNS lookup delays.
- preconnect → Prepares the TCP + TLS handshake so the browser is ready to request assets immediately.
- prefetch → Fetches the form in advance, so it's ready when a user opens it.
Where to Paste It
The iframe is the same everywhere. Only where it goes changes.
Add a div at the size you want the form, then drop a Code Embed block inside it and paste the iframe. Code Embed is a paid-plan feature.