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:- Visit your Givebutter Dashboard
- Navigate to Marketing > Signup Forms
- Create and customize your signup form
- Copy the generated code and paste it on your site
Manual Setup
For full control without using the dashboard, create signup forms directly with the<givebutter-signup-form> tag:
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:Container Width
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
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
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
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
Troubleshooting
Form appears unstyled
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
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
Form styling doesn't match my site
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
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