Embedding Forms on Your Site

You can add a Distill signup form directly to your website in two ways: an HTML form embed or a JavaScript embed. For most websites, the HTML form embed is the recommended option — it works reliably on any platform and does not depend on external scripts.

Getting your embed code

1. Click the Users icon (Subscribers) in the sidebar.
2. Select the subscriber list you want to embed.
3. Click the Form Builder tab.
4. Scroll down to the Embed Code section.

You will see two tabs: HTML and JavaScript. Copy the code from whichever tab you plan to use.

HTML form embed (recommended)

The HTML form embed posts directly to the Distill subscribe API and works on any website that supports custom HTML.

<form action="https://distill.ink/api/subscribe" method="POST">
  <input type="hidden" name="list_id" value="YOUR_LIST_ID" />
  <input type="hidden" name="source" value="embed" />
  <div style="position:absolute;left:-9999px" aria-hidden="true">
    <input type="text" name="website" tabindex="-1" autocomplete="off" />
  </div>
  <input type="email" name="email" placeholder="Enter your email" required />
  <button type="submit">Subscribe</button>
</form>

The hidden list_id field identifies your subscriber list. The source field records where the signup came from. The form also includes bot protection built in.

JavaScript embed

The JavaScript embed code is generated by the Form Builder for future use. It can be pasted into sites that support script tags.

<script src="https://distill.ink/embed.js"
  data-list-id="YOUR_LIST_ID"
  data-button-text="Subscribe"
  data-show-name="false"
></script>

For an inline layout (fields side by side), add data-inline="true" to the script tag.

Layout options

Your form supports two layouts:

• Vertical (default) — The email field and button are stacked on top of each other. Works well in sidebars and narrow columns.
• Inline — The email field and button appear side by side. Works well in wider content areas.

Configure your preferred layout in the Form Builder. The embed code the Form Builder generates will reflect your choice.

Installing on your website

WordPress

Using a widget:

1. In the WordPress admin, go to Appearance → Widgets.
2. Add a Custom HTML widget to the sidebar or footer where you want the form to appear.
3. Paste the HTML embed code into the widget content area.
4. Click Save.

Using the block editor:

1. Edit the page or post where you want the form.
2. Add a Custom HTML block.
3. Paste the HTML embed code into the block.
4. Publish or update the page.

Squarespace

1. Edit the page where you want the form.
2. Click the + button to add a new content block.
3. Select Code from the block options.
4. Paste the HTML embed code into the code block.
5. Click Apply and publish the page.

Wix

1. In the Wix editor, click Add in the left panel.
2. Select Embed → Embed HTML.
3. A code widget will appear on your page. Click Enter Code inside the widget.
4. Paste the HTML embed code and click Update.

Other platforms

Any platform that supports a Custom HTML or Code block will work. Paste the HTML embed code into the HTML editing area — not into a plain text or rich text field.

Customizing your form

To change button text, add name fields, or adjust other settings, go back to Form Builder & Hosted Pages. Generate fresh embed code after making changes to get a version that reflects your updated settings.

[Screenshot: Embed Code tab in Form Builder]

Troubleshooting

Form not appearing on the page? Make sure you pasted the complete HTML code, including the closing </form> tag. Some rich text editors strip HTML — if that is happening, use the Custom HTML or Code block option for that platform instead of a standard text area.

Form styles look different than your website? The HTML embed uses minimal built-in styling so it is easy to customize. Add your own CSS to the form and input elements to match your website's design. Target the form, input[type="email"], and button elements.

Getting an error when someone submits the form? Check that your list_id value is a valid UUID copied from the Form Builder and that the action URL points to https://distill.ink/api/subscribe. If you edited the embed code manually, double-check those two values first.

Next steps

• Form Builder & Hosted Pages
• Subscribe API