Skip to main content
The Form Widget embeds a complete donation form inline on your webpage. Unlike the button widget which opens a popup, the form widget displays directly on your page, creating a seamless experience without any popups or redirects.

​
Prerequisites

Before using the Form Widget, make sure you’ve installed the Widgets library.

​
Quick Setup

The fastest way to add a form widget is through the Givebutter Dashboard:
  1. Visit your Givebutter Dashboard
  2. Select your campaign and navigate to Sharing > Widgets
  3. Choose Form as the widget type and customize the appearance
  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 forms directly with the <givebutter-form> tag: 
<givebutter-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-form>

​
Configuration Options

​
Required Attributes

AttributeDescriptionExample
campaignYour campaign code (from your dashboard)my-campaign

​
Optional Attributes

AttributeDescriptionDefault
show-goal-barDisplay a goal bar above the formfalse
theme-colorTheme color for the goal barNone
max-widthMaximum width of the form560px
max-heightMaximum height of the formNone
The form’s internal styling (colors, fonts, branding) is controlled through your Givebutter Dashboard campaign settings and automatically applied.

​
Layout Considerations

The form widget is responsive and will adapt to its container width. Consider these best practices:
For optimal display:
  • Minimum width: 320px (mobile phones)
  • Recommended width: 400-600px for best readability
  • Maximum width: No limit, but forms look best under 800px
Common layout patterns: - Full-width section: Great for dedicated donation pages - Sidebar widget: Works in sidebars 300px+ wide - Centered container: Most popular for focused donation experiences - Multi-column: Use columns for multiple campaign forms
  • Forms expand automatically to fit content - No fixed height needed - Forms include all fields, so ensure adequate vertical space - Consider page length when embedding multiple forms
  • Forms automatically optimize for mobile devices
  • Touch-friendly input fields and buttons
  • Stacks elements vertically on small screens
  • 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 campaign code is correct.
The form adapts to its container. Ensure the container is at least 320px wide. Check for CSS that might be constraining the width.
Forms expand vertically to fit content. Ensure there’s no max-height or overflow: hidden on parent containers.
You can embed multiple forms on the same page. Each will load independently. Consider spacing them with margin/padding for better UX.
Form styling is controlled in your Givebutter Dashboard under campaign settings. Update your campaign’s design settings to match your brand.