> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sequenzy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Signup Form Widget

> Embed a customizable signup form with JavaScript, HTML, or a native static-site form action

# Signup Form Widget

The Signup Form Widget is a customizable form that you can embed on any website to collect email subscribers. Use a one-line JavaScript embed, copy the full HTML, or post a native form directly from a static site.

Forms are saved in your dashboard. Each form has its own submission endpoint, and the audience (lists, tags) and success behavior (message or redirect) are stored server-side. When you edit those settings later, deployed embeds pick up the changes automatically - no re-embedding needed. Only visual changes (colors, placeholders, layout) require copying the code again.

For popup capture, use the [Popup Widget](/widgets/popup-widget). It uses the
same Forms API for submissions but loads a hosted JavaScript runtime.

## Preview

Here's what the form looks like with default settings:

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/sequenzy/images/widgets/signup-form.jpg" alt="Signup Form Widget" />
</Frame>

## Features

<CardGroup cols={2}>
  <Card title="Flexible Embed Options" icon="code">
    JavaScript, HTML, native form action, and fetch options
  </Card>

  <Card title="Customizable Styling" icon="palette">
    Configure colors, button text, and layout
  </Card>

  <Card title="Spam Protection" icon="shield">
    Built-in honeypot field to prevent bot submissions
  </Card>

  <Card title="List Targeting" icon="list">
    Add subscribers to specific lists or all lists
  </Card>

  <Card title="Tag Assignment" icon="tag">
    Apply existing tags when someone subscribes
  </Card>

  <Card title="Double Opt-In" icon="mail">
    Require email confirmation before subscribers become active
  </Card>
</CardGroup>

## Quick Start

### Step 1: Open Forms

Navigate to **Audience → Forms** in your [Sequenzy dashboard](https://www.sequenzy.com/dashboard) and click **New form**.

### Step 2: Customize Your Form

Configure your form using the visual builder:

* **Form name**: Name the form so you can tell your signup forms apart
* **Form Style**: Choose between "Button below" (stacked) or "Button inline" (side-by-side)
* **Placeholder Text**: Customize the email input placeholder
* **Custom Fields**: Add text fields such as nickname, zipcode, shipping address, or favorite fruit
* **Font Color**: Set the input text color
* **Button Text**: Customize the submit button label
* **Button Color**: Set the button background color
* **After submission**: Show a success message or redirect visitors to a URL
* **Success Message**: Customize the confirmation message shown after submission
* **Subscribe to**: Choose which list(s) new subscribers should be added to
* **Apply Tags**: Choose which existing tags new subscribers should receive
* **Double Opt-In**: Forms follow the workspace setting in **Settings → Email Tracking**

### Step 3: Save and Embed

Click **Save & Embed**, then choose the embed option for your site:

* **JavaScript**: one script tag that renders the latest saved form settings
* **HTML**: the complete copy-paste form markup
* **Static site / Form action**: a public action URL, minimal native form, and
  optional fetch enhancement for Astro, Hugo, Jekyll, Cloudflare Pages,
  Netlify, and GitHub Pages

## Static Sites and Form Actions

Saved forms are client-safe by design. The opaque `formId` is the public
capability, while lists, tags, duplicate handling, and success behavior remain
stored in Sequenzy. Your Astro, Hugo, Jekyll, or plain HTML page never needs a
Bearer token, server function, or secret environment variable.

Open a saved form, choose **Embed → Static site / Form action**, and copy the
native form:

```html theme={null}
<form
  id="sequenzy-signup"
  action="https://api.sequenzy.com/api/v1/forms/form_abc123"
  method="post"
>
  <label for="sequenzy-email">Email</label>
  <input
    id="sequenzy-email"
    name="email"
    type="email"
    autocomplete="email"
    required
  />

  <div aria-hidden="true" style="position: absolute; left: -9999px;">
    <label for="sequenzy-website">Leave this field blank</label>
    <input
      id="sequenzy-website"
      name="website"
      type="text"
      tabindex="-1"
      autocomplete="off"
    />
  </div>

  <button type="submit">Subscribe</button>
</form>
```

This works with JavaScript disabled. When you want an inline success state,
copy the Fetch example from the same tab; it submits `FormData` directly to the
public action and still contains no API key.

### Managing Saved Forms

Saved forms appear on **Audience → Forms**, with their submission counts. From there you can:

* **Edit** a form's design, audience, and success behavior
* **Embed** an existing form without changing it
* **Delete** a form. Deployed embeds of a deleted form stop accepting submissions.

### Webflow

Use the **HTML** tab when adding the form to Webflow. In the Webflow
Designer, add an **Embed** element where the signup form should appear, paste
the generated HTML, and publish the site. This creates a Sequenzy-owned form
that posts directly to the Forms API.

If you want to keep using an existing native Webflow form instead, connect the
Webflow integration from **Settings → Integrations → Websites & Forms**. Native
Webflow forms are captured through signed Webflow form submission webhooks.

## Generated HTML

The form builder generates clean, self-contained HTML like this:

```html theme={null}
<style>
  @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
</style>
<div class="sequenzy-form-container">
  <form
    class="sequenzy-form"
    action="https://api.sequenzy.com/api/v1/forms/YOUR_FORM_ID"
    method="POST"
    style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;"
  >
    <input
      class="sequenzy-form-input"
      placeholder="you@example.com"
      required
      type="email"
      name="email"
      style="font-family: Inter, sans-serif; color: #000000; font-size: 14px; margin: 0px 0px 10px; width: 100%; max-width: 300px; min-width: 100px; background: rgb(255, 255, 255); border: 1px solid rgb(209, 213, 219); box-sizing: border-box; border-radius: 6px; padding: 8px 12px;"
    />
    <!-- Honeypot field - do not remove -->
    <input
      type="text"
      name="website"
      style="display: none;"
      tabindex="-1"
      autocomplete="off"
    />
    <button
      type="submit"
      class="sequenzy-form-button"
      style="background: #f97316; font-size: 14px; color: rgb(255, 255, 255); font-family: Inter, sans-serif; display: flex; width: 100%; max-width: 300px; white-space: nowrap; height: 38px; align-items: center; justify-content: center; padding: 9px 17px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); border-radius: 6px; text-align: center; font-weight: 600; cursor: pointer; border: none;"
    >
      Submit form
    </button>
  </form>
</div>
```

## Form Layouts

### Button Below (Default)

The input and button are stacked vertically:

```
┌─────────────────────────┐
│   you@example.com       │
└─────────────────────────┘
┌─────────────────────────┐
│      Submit form        │
└─────────────────────────┘
```

### Button Inline

The input and button are side-by-side:

```
┌─────────────────────┐ ┌────────────┐
│   you@example.com   │ │   Submit   │
└─────────────────────┘ └────────────┘
```

## Targeting Specific Lists

When you create a form, all current lists are selected by default. You can keep
that selection, choose a smaller set of lists, or clear the selection to create
subscribers without adding them to any list.

1. In the form builder, use the **Subscribe to** picker to select or clear lists
2. Click **Save & Embed**

List targeting is stored with the form, not in the embed code. Changing the
selection later applies to forms already deployed on your website.

## Applying Tags

You can also apply existing tags when someone submits the form:

1. In the form builder, select tags from **Apply tags**
2. Click **Save & Embed**

Like list targeting, tags are stored with the form, so you can change them
without touching the embed code.

## Handling Existing Contacts

Saved forms can choose how submitted name fields affect an existing contact:

* `skip` preserves the existing contact fields
* `merge` fills only fields that are currently empty
* `overwrite` replaces submitted fields

The strategy is stored server-side with the saved form. Visitors cannot change
it by editing the public action URL or submitted fields.

## Double Opt-In

Signup forms follow the workspace double opt-in setting. When double opt-in is enabled, a form submission creates a pending subscriber and sends your confirmation email. The subscriber becomes active only after clicking the confirmation link.

Selected lists and tags are applied after confirmation, not before. This keeps list-triggered and tag-triggered automations from starting until the subscriber has confirmed.

<Card title="Double Opt-In" icon="mail" href="/concepts/double-opt-in">
  Learn how to enable and customize confirmation emails.
</Card>

## Spam Protection

The form includes a honeypot field that's hidden from real users but visible to bots:

```html theme={null}
<input
  type="text"
  name="website"
  style="display: none;"
  tabindex="-1"
  autocomplete="off"
/>
```

<Warning>
  **Do not remove** the honeypot field. It helps prevent spam submissions by
  catching automated bots that fill in all form fields.
</Warning>

## After Submission

After successful submission, users can see a success message or be redirected
to a custom page.

For success messages, you can customize:

* **Success Message**: The text shown after submission (e.g., "Thanks for subscribing!")
* **Font Color**: The color of the success message
* **Font Size**: The size of the success message text

For redirects, choose **Redirect to URL** and enter any `http` or `https` URL,
such as `https://example.com/thank-you`. You can also enter a domain like
`google.com`; Sequenzy will treat it as `https://google.com`. Redirects only
run after the submission succeeds.

The success behavior is stored with the form, so switching between message and
redirect (or changing the redirect URL) applies to deployed embeds immediately.
When a plain HTML embed is set to show a message, visitors see a hosted
confirmation page with your success message and a link back to your site.

## Free Plan Branding

On the free plan, generated embed code includes a small "Powered by Sequenzy"
pill below the form, and the hosted confirmation page shows the same pill.
Paid workspaces get unbranded forms.

The embed code is a snapshot: after upgrading, regenerate and re-paste the code
to remove the pill from forms already deployed on your site. The hosted
confirmation page updates automatically.

## Custom Styling

The generated HTML uses inline styles for maximum compatibility. You can override these styles with CSS:

```css theme={null}
/* Custom input styling */
.sequenzy-form-input {
  border-color: #3b82f6 !important;
  border-radius: 8px !important;
}

/* Custom button styling */
.sequenzy-form-button {
  border-radius: 8px !important;
  text-transform: uppercase !important;
}

/* Custom container styling */
.sequenzy-form-container {
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
}
```

## Integration Examples

### WordPress

Paste the HTML embed into a Custom HTML block in the WordPress block editor.

### Webflow

Add an Embed element and paste the HTML.

### Squarespace

Use a Code Block to add the HTML.

### Static HTML Sites

Use **Static site / Form action** and paste the native form directly into your
HTML file. The same option works in Astro, Hugo, Jekyll, Cloudflare Pages,
Netlify, and GitHub Pages without a backend proxy.

## API Endpoint

JavaScript embeds load the saved form runtime from:

```
GET https://api.sequenzy.com/api/v1/forms/{formId}/embed.js
```

Saved forms submit to a per-form endpoint:

```
POST https://api.sequenzy.com/api/v1/forms/{formId}
```

**Form Fields:**

| Field                        | Type   | Required | Description                        |
| ---------------------------- | ------ | -------- | ---------------------------------- |
| `email`                      | string | Yes      | Subscriber's email address         |
| `firstName`                  | string | No       | Subscriber's first name            |
| `lastName`                   | string | No       | Subscriber's last name             |
| `customAttributes[fieldKey]` | string | No       | Configured custom subscriber field |
| `website`                    | string | No       | Honeypot field (should be empty)   |

Generated saved-form HTML renders built-in name fields first, then the email
field, then configured custom fields before the submit button. Custom fields
cannot currently be interleaved with built-in fields.

Lists, tags, and the redirect URL come from the form's saved settings, so they
are not part of the request. See the [Submit Saved
Form](/api-reference/widgets/submit-saved-form) and [Saved Form Embed
Script](/api-reference/widgets/saved-form-embed-script) API references for
details.

Embeds generated before saved forms existed post to `POST
/api/v1/forms/{companyId}` with lists, tags, and the redirect URL encoded in
the embed itself. Company-scoped saved form URLs also continue to work
unchanged. See [Submit Signup Form](/api-reference/widgets/submit-form).

## Best Practices

1. **Test before deploying**: Use the preview in the form builder to test your form
2. **Keep the honeypot**: Don't remove the hidden honeypot field
3. **Match your brand**: Customize colors to match your website design
4. **Clear call-to-action**: Use descriptive button text like "Subscribe" or "Get Updates"
5. **Set expectations**: Use placeholder text to indicate what you're offering

## Troubleshooting

### Form not submitting

* Ensure the form action URL is correct
* Check that required fields are filled
* Verify your domain is properly configured in Sequenzy

### Subscribers not appearing

* Check if the subscriber already exists (duplicates are ignored)
* Verify the honeypot field is empty (bots trigger this)
* Check your Sequenzy dashboard for any API errors

### Styling issues

* Inline styles have high specificity - use `!important` to override
* Some email clients strip certain CSS properties
* Test on multiple browsers and devices