Skip to main content
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 is through the Givebutter Dashboard:
  1. Visit your Givebutter 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
<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: 
<givebutter-signup-form
  account="YOUR_ACCOUNT_ID"
  title="Stay Connected"
  description="Get updates about our work"
></givebutter-signup-form>

​
Configuration Options

​
Required Attributes

AttributeDescriptionExample
accountYour account ID (from your dashboard)acct_abc123

​
Content Attributes

AttributeDescriptionDefault
titleForm heading textNone
descriptionSubheading/description textNone

​
Button Attributes

AttributeDescriptionDefault
button-textText on the submit buttonSubscribe
button-text-colorButton text colorNone
button-background-colorButton background colorNone

​
Layout Attributes

AttributeDescriptionDefaultOptions
layoutForm layout stylesimplesimple, stacked, two_column
border-radiusCorner roundness in pixels0Number
imageBackground image URLNoneURL
image-sizingHow the image fitscovercover, fit, stretch

​
Behavior Attributes

AttributeDescriptionDefaultOptions
typeForm display typestaticstatic, popup
open-delayDelay before popup opens (ms)5000Number
channelCommunication channelemailemail, sms

​
Layout Considerations

The signup form widget is lightweight and responsive. Consider these best practices:
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
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
  • 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
  • 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

​
Troubleshooting

Form not appearing? Make sure you’ve installed the Widgets library on your page and that your account ID is correct.
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
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
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
Signup form styling is controlled in your Givebutter Dashboard under Marketing > Signup Forms > Design. Update your form design settings to match your brand.
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