Signup Form Widget

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.

Quick Setup

The fastest way to add a signup form widget:

Visit your Givebutter Dashboard
Select your account settings
Navigate to Marketing > Signup Forms
Choose Create Signup Form
Customize the appearance (optional)
Copy the generated code
Paste it where you want the form to appear on your site

<givebutter-widget id="{YOUR_WIDGET_ID}"></givebutter-widget>

Manual Setup

For greater control, you can manually create signup form widgets using the <givebutter-signup> tag:

<givebutter-signup account="{YOUR_ACCOUNT_ID}"></givebutter-signup>

Configuration Options

Required Attributes

Attribute	Description	Example
`account`	Your account ID (find it in your account settings)	`acct_abc123`

Optional Attributes

Attribute	Description	Default	Example
`list`	Specific mailing list ID	Default	`newsletter`
`placeholder`	Custom placeholder text for email input	Enter email	`Your email`
`button-text`	Custom text for submit button	Subscribe	`Join Us`

<givebutter-signup
  account="{YOUR_ACCOUNT_ID}"
  placeholder="Enter your email address"
  button-text="Sign Me Up">
</givebutter-signup>

Layout Considerations

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

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

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

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

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

Use Cases

Website Footer
Blog Sidebar
Landing Page
Inline Content
Multiple Lists

Perfect for capturing subscribers site-wide:

<footer>
  <div class="footer-content">
    <div class="footer-column">
      <h3>About Us</h3>
      <p>Your mission statement...</p>
    </div>

    <div class="footer-column">
      <h3>Stay Updated</h3>
      <p>Get our latest news and updates</p>
      <givebutter-signup account="{YOUR_ACCOUNT_ID}"></givebutter-signup>
    </div>

    <div class="footer-column">
      <h3>Contact</h3>
      <p>[email protected]</p>
    </div>
  </div>
</footer>

Capture readers while they browse content:

<aside class="sidebar">
  <div class="widget">
    <h3>Subscribe to Our Blog</h3>
    <p>Get notified when we publish new articles</p>
    <givebutter-signup
      account="{YOUR_ACCOUNT_ID}"
      list="blog"
      button-text="Subscribe">
    </givebutter-signup>
  </div>

  <div class="widget">
    <h3>Recent Posts</h3>
    <!-- Recent posts list -->
  </div>
</aside>

Feature signup as the primary call-to-action:

<section class="hero">
  <div class="hero-content">
    <h1>Join 10,000+ Supporters Making a Difference</h1>
    <p>Get weekly stories of impact and ways to get involved</p>

    <div class="signup-form-wrapper">
      <givebutter-signup
        account="{YOUR_ACCOUNT_ID}"
        placeholder="Enter your email"
        button-text="Count Me In">
      </givebutter-signup>
    </div>

    <p class="disclaimer">No spam, unsubscribe anytime.</p>
  </div>
</section>

Embed within blog posts or articles:

<article>
  <h1>How We're Making an Impact in 2026</h1>

  <p>First paragraph of your content...</p>
  <p>Second paragraph of your content...</p>

  <!-- Inline signup form -->
  <div class="inline-cta">
    <h3>Like what you're reading?</h3>
    <p>Get more stories like this in your inbox</p>
    <givebutter-signup
      account="{YOUR_ACCOUNT_ID}"
      button-text="Subscribe">
    </givebutter-signup>
  </div>

  <p>Continue your article content...</p>
</article>

Let visitors choose what they’re interested in:

<section class="subscribe-options">
  <h2>Choose Your Updates</h2>

  <div class="subscription-cards">
    <div class="card">
      <h3>📰 Monthly Newsletter</h3>
      <p>Impact stories and organization updates</p>
      <givebutter-signup
        account="{YOUR_ACCOUNT_ID}"
        list="newsletter">
      </givebutter-signup>
    </div>

    <div class="card">
      <h3>🎉 Event Updates</h3>
      <p>Be first to know about upcoming events</p>
      <givebutter-signup
        account="{YOUR_ACCOUNT_ID}"
        list="events">
      </givebutter-signup>
    </div>

    <div class="card">
      <h3>🚨 Urgent Appeals</h3>
      <p>Critical needs and emergency campaigns</p>
      <givebutter-signup
        account="{YOUR_ACCOUNT_ID}"
        list="urgent">
      </givebutter-signup>
    </div>
  </div>
</section>

Styling & Customization

Styling via Dashboard

The signup form’s appearance is controlled through your Givebutter Dashboard:

Go to your account settings
Navigate to Marketing > Signup Forms > Design
Customize:
- Primary colors
- Button styles
- Fonts and typography
- Success messages

Changes apply automatically to all embedded signup forms.

Container Styling

You can style the container around the signup form widget:

<div style="
  max-width: 450px;
  margin: 2rem auto;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
">
  <h3 style="margin-top: 0; color: white;">Join Our Community</h3>
  <p>Get exclusive updates and early access</p>
  <givebutter-signup account="{YOUR_ACCOUNT_ID}"></givebutter-signup>
</div>

Important: Only style the container around the signup form widget. The form’s internal styling is managed through your Dashboard to ensure consistent branding and optimal user experience.

Clear Value Proposition

Tell visitors exactly what they’ll get:

✅ “Get weekly impact stories and ways to help”
✅ “Be first to know about events and opportunities”
❌ “Sign up for our newsletter” (too vague)

Privacy & Trust

Build confidence with transparency: - Include a privacy policy link - State email frequency (“weekly updates”, “monthly digest”) - Mention unsubscribe option - Example: “We respect your privacy. Unsubscribe anytime.”

Button Text Matters

Make your CTA compelling: - ✅ “Count Me In”, “Join the Community”, “Get Updates” - ✅ “Subscribe”, “Sign Up”, “Stay Connected” - ❌ “Submit”, “Send” (too generic)

Strategic Placement

Place forms where engagement is highest: - After compelling content (blog post conclusions) - Footer of every page (consistent visibility) - Exit-intent popups (before visitors leave) - Landing page hero (dedicated list-building pages)

Success Messages

Confirm subscription and set expectations:

Thank the subscriber
Mention what happens next (“Check your email for confirmation”)
Suggest next steps (visit your blog, follow on social media)

Data & Integration

Subscriber Data

All signups are automatically added to your Givebutter CRM:

Email addresses
Signup date and time
Source page (URL where they signed up)
List assignment (if using multiple lists)
UTM parameters (for tracking campaign effectiveness)

Email Marketing Integration

Givebutter integrates with popular email marketing platforms:

Mailchimp
Constant Contact
HubSpot
ActiveCampaign
And more

Configure integrations in your Givebutter Dashboard under Settings > Integrations to automatically sync subscribers with your email marketing platform.

Compliance & Privacy

The signup form widget includes built-in GDPR compliance features:

Optional double opt-in confirmation
Clear consent language
Easy unsubscribe options
Data privacy controls

CAN-SPAM Act

Ensure compliance by:

Including your physical address in emails
Providing clear unsubscribe links
Honoring opt-out requests promptly
Using accurate subject lines

Always include a link to your privacy policy near signup forms and ensure your email practices comply with local laws (GDPR, CAN-SPAM, CASL, etc.).

Performance & Analytics

Tracking Conversions

Monitor signup form performance in your Givebutter Dashboard:

View signups per day/week/month
Track conversion rates by page
See which campaigns drive the most signups
Analyze subscriber growth over time

URL Parameters

Track where signups come from using UTM parameters:

<!-- Link to your signup page with tracking -->
<a href="https://yoursite.com/newsletter?utm_source=facebook&utm_campaign=spring2026">
  Join Our Newsletter
</a>

Signup forms automatically capture UTM parameters from the page URL.

Performance Optimization

The signup form widget is optimized for speed:

Lightweight (< 10KB)
Loads asynchronously
No impact on page speed scores
Optimized for Core Web Vitals
Instant validation feedback

Troubleshooting

Form not appearing? Make sure you’ve installed the Widgets library on your page and that your account ID is correct.

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

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

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

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.

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

Next Steps

Button Widget

Add donation buttons to your site

Form Widget

Embed full donation forms

URL Prefill

Pre-fill forms with donor information

Analytics

Track signup form performance

Introduction

Widget Types

Integrations

Website Builders

Advanced

Prerequisites

Quick Setup

Manual Setup

Configuration Options

Required Attributes

Optional Attributes

Layout Considerations

Use Cases

Styling & Customization

Styling via Dashboard

Container Styling

Data & Integration

Subscriber Data

Email Marketing Integration

Compliance & Privacy

CAN-SPAM Act

Performance & Analytics

Tracking Conversions

URL Parameters

Performance Optimization

Troubleshooting

Next Steps

Button Widget

Form Widget

URL Prefill

Analytics

Introduction

Widget Types

Integrations

Website Builders

Advanced

​Prerequisites

​Quick Setup

​Manual Setup

​Configuration Options

​Required Attributes

​Optional Attributes

​Layout Considerations

​Use Cases

​Styling & Customization

​Styling via Dashboard

​Container Styling

​Signup Form Best Practices

​Data & Integration

​Subscriber Data

​Email Marketing Integration

​Compliance & Privacy

​GDPR Compliance

​CAN-SPAM Act

​Performance & Analytics

​Tracking Conversions

​URL Parameters

​Performance Optimization

​Troubleshooting

​Next Steps

Button Widget

Form Widget

URL Prefill

Analytics

Prerequisites

Quick Setup

Manual Setup

Configuration Options

Required Attributes

Optional Attributes

Layout Considerations

Use Cases

Styling & Customization

Styling via Dashboard

Container Styling

Signup Form Best Practices

Data & Integration

Subscriber Data

Email Marketing Integration

Compliance & Privacy

GDPR Compliance

CAN-SPAM Act

Performance & Analytics

Tracking Conversions

URL Parameters

Performance Optimization

Troubleshooting

Next Steps