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

# Signup Form Widget

> Capture email subscribers and grow your mailing list with an embedded signup form.

The Signup Form Widget lets you collect email addresses and grow your subscriber base directly from your website. Perfect for newsletters, updates, and building your donor community without requiring donations.

## Prerequisites

Before using the Signup Form Widget, make sure you've [installed the Widgets library](/widgets/getting-started).

## Quick Setup

The fastest way to add a signup form widget is through the Givebutter Dashboard:

1. Visit your [Givebutter Dashboard](https://givebutter.com/dashboard)
2. Navigate to **Marketing** > **Signup Forms**
3. Create and customize your signup form
4. Copy the generated code and paste it on your site

```html theme={null}
<givebutter-widget id="YOUR_WIDGET_ID"></givebutter-widget>
```

## Manual Setup

For full control without using the dashboard, create signup forms directly with the `<givebutter-signup-form>` tag:

<CodeGroup>
  ```html Basic Signup Form theme={null}
  <givebutter-signup-form
    account="YOUR_ACCOUNT_ID"
    title="Stay Connected"
    description="Get updates about our work"
  ></givebutter-signup-form>
  ```

  ```html Custom Button theme={null}
  <givebutter-signup-form
    account="YOUR_ACCOUNT_ID"
    title="Join Our Newsletter"
    description="Weekly updates delivered to your inbox"
    button-text="Subscribe Now"
    button-background-color="#3B82F6"
  ></givebutter-signup-form>
  ```

  ```html With Image Banner theme={null}
  <givebutter-signup-form
    account="YOUR_ACCOUNT_ID"
    title="Stay in the Loop"
    description="Be the first to know about events"
    layout="stacked"
    image="https://example.com/banner.jpg"
  ></givebutter-signup-form>
  ```
</CodeGroup>

## Configuration Options

### Required Attributes

| Attribute | Description                           | Example       |
| --------- | ------------------------------------- | ------------- |
| `account` | Your account ID (from your dashboard) | `acct_abc123` |

### Content Attributes

| Attribute     | Description                 | Default |
| ------------- | --------------------------- | ------- |
| `title`       | Form heading text           | None    |
| `description` | Subheading/description text | None    |

### Button Attributes

| Attribute                 | Description               | Default     |
| ------------------------- | ------------------------- | ----------- |
| `button-text`             | Text on the submit button | `Subscribe` |
| `button-text-color`       | Button text color         | None        |
| `button-background-color` | Button background color   | None        |

### Layout Attributes

| Attribute       | Description                | Default  | Options                           |
| --------------- | -------------------------- | -------- | --------------------------------- |
| `layout`        | Form layout style          | `simple` | `simple`, `stacked`, `two_column` |
| `border-radius` | Corner roundness in pixels | `0`      | Number                            |
| `image`         | Background image URL       | None     | URL                               |
| `image-sizing`  | How the image fits         | `cover`  | `cover`, `fit`, `stretch`         |

### Behavior Attributes

| Attribute    | Description                   | Default  | Options           |
| ------------ | ----------------------------- | -------- | ----------------- |
| `type`       | Form display type             | `static` | `static`, `popup` |
| `open-delay` | Delay before popup opens (ms) | `5000`   | Number            |
| `channel`    | Communication channel         | `email`  | `email`, `sms`    |

## Layout Considerations

The signup form widget is lightweight and responsive. Consider these best practices:

<AccordionGroup>
  <Accordion title="Container Width">
    For optimal display:

    * **Minimum width**: 280px (mobile phones)
    * **Recommended width**: 300-500px for best readability
    * **Maximum width**: No limit, but forms look best under 600px
  </Accordion>

  <Accordion title="Page Placement">
    Common placement patterns: - **Footer**: Capture subscribers at the bottom of every page -
    **Sidebar**: Great for blog posts and content pages - **Pop-up/Modal**: Attention-grabbing (use
    sparingly) - **Inline**: Within blog posts or between content sections - **Landing Page Hero**:
    Primary CTA for list-building pages
  </Accordion>

  <Accordion title="Height & Spacing">
    * Signup forms are compact (typically 80-120px tall) - Include adequate padding around the form -
      Consider success message height when planning layout - Forms expand slightly on validation errors
  </Accordion>

  <Accordion title="Mobile Responsiveness">
    * Forms automatically optimize for mobile devices
    * Touch-friendly input fields and buttons
    * Keyboard opens automatically on focus
    * Test on actual mobile devices for best results
  </Accordion>
</AccordionGroup>

## Troubleshooting

<Warning>
  **Form not appearing?** Make sure you've [installed the Widgets library](/widgets/getting-started)
  on your page and that your account ID is correct.
</Warning>

<AccordionGroup>
  <Accordion title="Form appears unstyled">
    The form may still be loading. Ensure:

    * The widgets script is loaded correctly
    * Your account ID is valid
    * No JavaScript errors in the browser console
    * You're not blocking third-party scripts
  </Accordion>

  <Accordion title="Submissions not appearing in Dashboard">
    Check these common issues: - Account ID matches your Givebutter account - Form submission
    completed successfully (success message shown) - Allow a few minutes for data to sync - Check
    spam/junk folders if using email confirmation
  </Accordion>

  <Accordion title="Button not working">
    Verify that: - Email input has a valid email address - JavaScript is enabled in the browser - No
    ad blockers interfering with the widget - Check browser console for errors
  </Accordion>

  <Accordion title="Form styling doesn't match my site">
    Signup form styling is controlled in your Givebutter Dashboard under **Marketing** > **Signup Forms** > **Design**. Update your form design settings to match your brand.
  </Accordion>

  <Accordion title="Success message not displaying">
    The success message is configured in your Dashboard. Check:

    * Dashboard settings under **Marketing** > **Signup Forms** > **Messages**
    * Ensure success message is enabled
    * Try a different browser to rule out caching issues
  </Accordion>
</AccordionGroup>