Embed a form on your website

You can place any Esqase form directly inside one of your own web pages instead of only linking out to it. An embedded form shows up as part of your site: just the form itself, with none of the surrounding Esqase page, sitting right where you put it. Visitors fill it out without ever leaving your page, and submissions land in Esqase exactly as they would from a hosted link.

Embedding works for both kinds of intake link:

a public reusable intake form (the shareable web address built from your firm username and the form's public link), and
a one-time link your firm sent to a specific client (including links protected by a sign-in step).

This page explains how embedding behaves, gives you the snippet to paste on your site, and walks through the small differences between embedding a public form and a protected one.

Note: This page assumes you already have a form to embed. If you have not built one yet, start with Building forms, then publish it as a public lead-intake form or send it as a one-time link before you embed it.

Before you begin

A form to embed. For a public reusable form, the form must be a Lead intake form with a Public link set, and it must be Active. See Public lead-intake forms. For a one-time link, create a form request first. See Reviewing form submissions.
The form's web address. You build the embed snippet from the form's own public URL, so have it ready. For a public form you can grab it with Copy link in the form builder; for a one-time link, use the link Esqase generated when you created the request.
Access to edit your website. Embedding means pasting a small block of HTML into one of your web pages, so you (or whoever maintains your site) needs to be able to edit that page's markup.

What an embedded form looks like

When a form is embedded, Esqase renders only the form, not a full Esqase page:

There is no Esqase header, footer, or branding around the form. It blends into your page so it reads as part of your own site.
The form sizes itself to fit its content and grows or shrinks as needed, so there is no second scrollbar inside the form. Visitors scroll your page normally.
Everything else works exactly as it does on the hosted version: required fields, multi-page forms with Back and Next, conditional questions, file uploads, and your confirmation message after submit.

📷 Screenshot: An Esqase form rendered inside a firm's own web page, with the firm's site header above it and no Esqase chrome around the form. Suggested image: images/embedding-forms/embedded-form-on-site.png

The embed snippet

To embed a form, paste the following block where you want the form to appear on your page, then change the address in the first line to point at your form. Keep both the <iframe> block and the <script> line.

<iframe
  src="https://form.esqase.com/<firm>/<slug>?embed=1"
  data-esqase-form
  title="Intake form"
  style="width:100%;border:0"
  allow="storage-access"
></iframe>
<script src="https://form.esqase.com/embed.js" async></script>

Here is what each part does, and what to change:

src="https://form.esqase.com/<firm>/<slug>?embed=1" is the address of the form. Replace it with your form's own public URL and add ?embed=1 to the end. The ?embed=1 is what tells Esqase to render only the form, with no surrounding page. If your link already has something after a ?, add &embed=1 instead.
data-esqase-form and the <script src="https://form.esqase.com/embed.js" async></script> line work together to make the form resize itself to fit its content on your page, so there is no inner scrollbar. Keep both, exactly as shown. You only need the <script> line once per page, even if you embed more than one form.
title="Intake form" is a short description of the form for screen readers. You can change it to something more specific, such as "New client intake".
style="width:100%;border:0" makes the form fill the width of the space you put it in and removes the default border. You can adjust the width to suit your layout.
allow="storage-access" is only needed when you embed a one-time link that is protected by a sign-in step. For a public reusable intake form you can leave this line out, though it does no harm if you keep it.

Tip: Build the address by taking the form's normal public URL (the one you would share by email) and adding ?embed=1 to the end. Everything before that stays the same.

Important: Esqase does not yet generate this snippet for you with a button. You assemble it yourself by pasting the block above and swapping in your form's address. The rest of the snippet stays as shown.

Embedding a public reusable intake form

A public lead-intake form is the simplest case to embed, because anyone is meant to be able to open it.

In the form builder, click Copy link to copy the form's public web address (see Public lead-intake forms).
Paste the embed snippet above into your web page.
Replace the address in src with the link you copied, and add ?embed=1 to the end.
For a public form you can remove the allow="storage-access" line, since it is not needed here.
Save and publish your web page.

Visitors can now fill out and submit the form right on your site, and each submission creates a new lead in Esqase just as a hosted submission would. Public reusable intake forms submit correctly even for visitors whose browsers are set to block third-party cookies, so you do not have to worry about a visitor's privacy settings stopping them from sending you their details.

Note: The embedded public form follows the same rules as the hosted one. It only accepts submissions while the form is Active, and it always allows more than one submission so it can collect many leads. See Public lead-intake forms.

Embedding a one-time link your firm sent

You can also embed a one-time link that you sent to a specific client, including one protected by the email sign-in step. This is useful when you want the form to live inside a page on your site rather than as a standalone link.

Use the one-time link Esqase generated when you created the form request.
Paste the embed snippet into your page and set the src to that link, with ?embed=1 added to the end.
Keep the allow="storage-access" line for a protected link. This is what lets a signed-in client stay signed in while the form is shown inside your page.
Save and publish your page.

When the link is protected, the client passes the same sign-in step they would on the hosted version (see How clients fill intake forms). There is one helpful safeguard for embedded protected forms:

If a client's browser is set to block cookies and the form cannot sign them in inside your page, the secure email sign-in link still opens the form in a new tab. That way a client can always complete the form, even with strict privacy settings.

Tip: If you only need a public intake form on your site, use a public reusable form rather than a one-time link. It is simpler to embed and never requires the allow="storage-access" line.

React to a completed submission

If you want your page to do something after a visitor finishes the form, such as recording the submission for analytics, showing your own thank-you message, or sending the visitor to another page, your page can listen for a completed-submission signal.

When a visitor submits an embedded form, Esqase sends an esqase-form-submitted event to the embedded form on your page. Whoever maintains your site can attach a listener to that event on the embedded form and run whatever they like in response, for example a redirect or a confirmation banner. This is optional: if you do nothing, the visitor simply sees your confirmation message inside the embedded form.

Note: Wiring up this signal is a small task for whoever builds your website. The form works perfectly well embedded without it.

Troubleshooting

The form does not appear, or shows a page instead of just the form. Make sure you added ?embed=1 to the end of the address in src. Without it, the link opens the full hosted page.
The form has its own scrollbar, or is cut off. Confirm you kept both the data-esqase-form attribute on the form and the <script src="https://form.esqase.com/embed.js" async></script> line on the page. Together they let the form resize to fit.
A protected form will not open inside the page. Keep the allow="storage-access" line for protected one-time links. If a visitor's browser still blocks it, the sign-in link from their email opens the form in a new tab so they can finish.
The form says it is not accepting submissions. For a public form, check that it is Active and that its lead-intake settings are complete. See Public lead-intake forms.

PreviousPublic lead-intake forms NextReviewing form submissions