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
Content Attributes
Button Attributes
Layout Attributes
Behavior Attributes
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