Sharing and Embedding Forms
Published forms can be shared with a public link or embedded directly in your own website. Visitors don't need a TemplateDocs account to fill in and submit a form.
Sharing Forms
When a workflow with a form trigger is published, its form becomes available at a public URL that you can share with anyone.
The URL is shown when publishing the workflow:
https://templatedocs.io/forms/<form_id>
Embedding Forms in Your Website
Published forms can also be embedded directly in your own website. Copy the embed code from the publish or Share dialog, or use the following snippet with your form's ID:
<div data-templatedocs-form="<form_id>" style="height:400px"></div>
<script src="https://templatedocs.io/embed.js" async></script>
Embedded forms always show the published version of the form. Publish the workflow again to make new changes live.
Embed Options
The container element accepts the following attributes:
| Attribute | Description |
|---|---|
data-templatedocs-form | The form ID. Required. |
data-templatedocs-dynamic-height | By default, the form resizes to fit its content. Set to false to keep the form at the container's height instead of resizing it to fit the content. |
data-templatedocs-header | Set to true to show the form's name and logo above the fields. Off by default. |
data-templatedocs-title | The accessible name of the embedded frame, announced by screen readers. Defaults to TemplateDocs form. |
Reacting to Submissions
When a visitor submits an embedded form, a templatedocs:submitted event is
emitted on the embedding container element and bubbles up the page. You can use
it to show your own confirmation, redirect the visitor, or trigger other
actions:
document.addEventListener("templatedocs:submitted", (event) => {
console.log("Form submitted:", event.detail.formId);
});
Next Steps
- Make forms match your brand with Styling & Branding
- Learn the basics in the Forms overview
- Learn how to generate workflow documents
- Start a workflow for every spreadsheet row with Bulk Generation
