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. It uses the same Forms API for submissions but loads a hosted JavaScript runtime.

Template Gallery

Start from a saved form template, then customize the fields, layout, and styling in the form editor:

Features

Flexible Embed Options

JavaScript, HTML, native form action, and fetch options

Customizable Styling

Configure colors, button text, and layout

Spam Protection

Built-in honeypot field to prevent bot submissions

List Targeting

Add subscribers to specific lists or all lists

Tag Assignment

Apply existing tags when someone subscribes

Double Opt-In

Require email confirmation before subscribers become active

Quick Start

Step 1: Open Forms

Sequenzy forms list with callouts showing saved forms and form creation

Navigate to Pages & Forms → Forms in your Sequenzy dashboard and click New form.

Step 2: Customize Your Form

Sequenzy form editor with callouts showing fields, live editing, and preview controls

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 → Tracking

Step 3: Save and Embed

Click Save & Embed to choose where the form should be installed.

Choose A Destination

Sequenzy form integration dialog with callouts showing landing page and platform installation options

Add the form directly to a Sequenzy landing page, or select Website and platform snippets for an external site.

Copy The Installation Snippet

Sequenzy form code dialog with callouts showing install methods, copy controls, and an AI-ready prompt

Choose the embed option for your site, then copy the generated code:

Any website (recommended): one script tag that renders the latest saved form settings and includes Sequenzy’s spam protection. WordPress, Shopify and React wrap the same script. See Where the form appears.
HTML markup (No JavaScript): the complete copy-paste form markup
Form action (No JavaScript): a public action URL, minimal native form, and optional fetch enhancement

Use the script whenever your page can run one, including Astro, Hugo, Jekyll, Cloudflare Pages, Netlify and GitHub Pages sites. Only the script carries the signed signup token and the bot check, so HTML markup and Form action have weaker spam protection: bots can submit them freely, and with bot protection on, every signup from them must confirm by email first. The embed dialog shows this warning on those tabs.

Where the form appears

The script shows the form right after its own tag, inside the same container, so paste it into the HTML block, column or section where the form belongs. The form fills the width of that container, up to 760px, and centers itself. When the script has to load somewhere else, such as the page head, Google Tag Manager or a site-wide footer, add a placeholder where the form should appear:

<div data-sequenzy-form="form_abc123"></div>

The script fills the placeholder wherever the script itself loads, and waits for the page to finish loading if it runs before the placeholder exists. The embed dialog shows the placeholder for your form under Form not showing up in the right place?. Each script tag fills one placeholder, so two copies of the form need two script tags. If the script cannot find a spot (for example, it sits in the head with no placeholder), it logs a warning in the browser console instead of showing the form.

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. Static hosts run script tags, so install the Any website script there too. Use the native form only on a page that cannot run JavaScript, and expect weaker spam protection (see Bot protection). Open a saved form, choose Embed → Form action, and copy the native form:

<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 Pages & Forms → 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

Do not paste a Sequenzy HTML, React, JavaScript, or form-action snippet into Webflow. The Marketplace integration supports native Webflow forms only. Use the Webflow integration to select forms, fields, consent, lists, and sequence behavior through official Webflow APIs. While a workspace is connected to Webflow, Sequenzy does not return custom form embed code and rejects submissions to that workspace’s existing Sequenzy form embed endpoints.

Generated HTML

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

<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.

In the form builder, use the Subscribe to picker to select or clear lists
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:

In the form builder, select tags from Apply tags
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. The strategy only affects profile fields. It never changes whether a contact is subscribed.

Returning Unsubscribed Contacts

Submitting a form again counts as a fresh opt-in. When a contact who unsubscribed from all email submits your form, Sequenzy resubscribes them and restores the form’s lists. Welcome automations for those lists start again. To ask these contacts to confirm first, turn on Require email confirmation to resubscribe under Data > Advanced in the form builder, or set resubscribeBehavior to double_opt_in through the API, CLI, or MCP. They then get your double opt-in confirmation email and are resubscribed once they click it. This option needs a confirmation email and a sender profile. If the confirmation email does not exist yet, create it with Create confirmation email next to the option. The option applies to that form or popup only. Landing pages and older company-level embed forms always resubscribe returning contacts; turn on workspace double opt-in to require confirmation on every signup surface. When workspace double opt-in is on, returning contacts always confirm first. Contacts whose address bounced or who marked your email as spam are never resubscribed. The form responds the same way in every case, so it does not reveal whether an address was subscribed.

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.

Double Opt-In

Learn how to enable and customize confirmation emails.

Spam Protection

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

<input
  type="text"
  name="website"
  style="display: none;"
  tabindex="-1"
  autocomplete="off"
/>

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

Bot protection

Bots that run a real browser leave the honeypot empty. To stop them, turn on Bot protection under Data in the form builder, or set botProtection to true through the API, CLI (sequenzy forms update <id> --bot-protection) or MCP. The hosted JavaScript embed then runs a Cloudflare Turnstile check before each signup. Most visitors never see it; when Cloudflare needs a visitor to confirm they are human, a small check appears at the end of the form.

Signups that pass are subscribed as usual.
Signups that fail, or come from the plain HTML snippet, which cannot run the check, must confirm by email before they are subscribed. An address a bot signs up gets a confirmation email and only joins your lists if its owner confirms. Contacts who are already subscribed are updated as usual.
Turning it on needs a double opt-in confirmation email and a sender profile. If either is removed later, failed signups are asked to try again instead.

If your site sets a Content Security Policy, allow frame-src https://api.sequenzy.com so the check can load. Use the script embed with bot protection. With the plain HTML or fetch snippet, every signup goes through email confirmation, including real visitors. Repeat submissions of an address send at most one confirmation email a day, and three in total.

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:

/* 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

Use the WordPress tab’s shortcode, or paste the Any website script into a Custom HTML block in the WordPress block editor.

Squarespace

Paste the Any website script into a Code Block.

Static HTML Sites

Paste the Any website script into your HTML file. It works in Astro, Hugo, Jekyll, Cloudflare Pages, Netlify, and GitHub Pages without a backend proxy. Use Form action only on a page that cannot run scripts.

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 and 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.

Best Practices

Test before deploying: Use the preview in the form builder to test your form
Keep the honeypot: Don’t remove the hidden honeypot field
Match your brand: Customize colors to match your website design
Clear call-to-action: Use descriptive button text like “Subscribe” or “Get Updates”
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

Capture submission answers

Open your form, popup or landing page and choose Submissions to view saved contact details and answers, filter by an exact custom field name and answer, or export matching records. Snapshots preserve the submitted answers even if a contact changes later. Tracking starts with new submissions; existing profile attributes are not backfilled as historical submissions. Deleting the contact or source removes its records. See List Form Submissions. Recovered historical records are marked Reconstructed. Their displayed date is the historical event time, and their form association is inferred. Missing answers are not filled in from current contact profiles.

​Template Gallery

​Features

Flexible Embed Options

Customizable Styling

Spam Protection

List Targeting

Tag Assignment

Double Opt-In

​Quick Start

​Step 1: Open Forms

​Step 2: Customize Your Form

​Step 3: Save and Embed

​Choose A Destination

​Copy The Installation Snippet

​Where the form appears

​Static Sites and Form Actions

​Managing Saved Forms

​Webflow

​Generated HTML

​Form Layouts

​Button Below (Default)

​Button Inline

​Targeting Specific Lists

​Applying Tags

​Handling Existing Contacts

​Returning Unsubscribed Contacts

​Double Opt-In

Double Opt-In

​Spam Protection

​Bot protection

​After Submission

​Free Plan Branding

​Custom Styling

​Integration Examples

​WordPress

​Squarespace

​Static HTML Sites

​API Endpoint

​Best Practices

​Troubleshooting

​Form not submitting

​Subscribers not appearing

​Styling issues

​Capture submission answers

Template Gallery

Features

Quick Start

Step 1: Open Forms

Step 2: Customize Your Form

Step 3: Save and Embed

Choose A Destination

Copy The Installation Snippet

Where the form appears

Static Sites and Form Actions

Managing Saved Forms

Webflow

Generated HTML

Form Layouts

Button Below (Default)

Button Inline

Targeting Specific Lists

Applying Tags

Handling Existing Contacts

Returning Unsubscribed Contacts

Double Opt-In

Spam Protection

Bot protection

After Submission

Free Plan Branding

Custom Styling

Integration Examples

WordPress

Squarespace

Static HTML Sites

API Endpoint

Best Practices

Troubleshooting

Form not submitting

Subscribers not appearing

Styling issues

Capture submission answers