Skip to main content

​
Signup Form Widget

The Signup Form Widget is a simple, customizable HTML form that you can embed on any website to collect email subscribers. No JavaScript SDK required—just copy and paste the generated HTML.

​
Preview

Here’s what the form looks like with default settings:
Signup Form Widget

​
Features

No JavaScript Required

Pure HTML form that works on any website

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

​
Quick Start

​
Step 1: Open the Form Builder

Navigate to Settings → Embed Widget in your Sequenzy dashboard and click on the Form widget.

​
Step 2: Customize Your Form

Configure your form using the visual builder:
  • Form Style: Choose between “Button below” (stacked) or “Button inline” (side-by-side)
  • Placeholder Text: Customize the email input placeholder
  • Font Color: Set the input text color
  • Button Text: Customize the submit button label
  • Button Color: Set the button background color
  • Success Message: Customize the confirmation message shown after submission
  • Add to List: Choose which list(s) new subscribers should be added to

​
Step 3: Copy the HTML

Click Copy HTML to copy the generated code, then paste it into your website.

​
Generated HTML

The form builder generates clean, self-contained HTML like this: 
<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.io/api/v1/forms/YOUR_COMPANY_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

By default, new subscribers are added to all your lists. To add subscribers to specific lists only:
  1. In the form builder, go to the Settings tab
  2. Select a specific list from the Add to List dropdown
  3. Copy the updated HTML
The generated HTML will include a hidden field: 
<input type="hidden" name="listId" value="list_abc123" />

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

​
Success Redirect

After successful submission, users see a success message. 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

​
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

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

​
Webflow

Add an Embed element and paste the HTML code.

​
Squarespace

Use a Code Block to add the HTML.

​
Static HTML Sites

Paste the code directly into your HTML file.

​
API Endpoint

The form submits to: 
POST https://api.sequenzy.io/api/v1/forms/{companyId}
Form Fields:
FieldTypeRequiredDescription
emailstringYesSubscriber’s email address
listIdstringNoSpecific list to add subscriber to
websitestringNoHoneypot field (should be empty)

​
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