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:
  1. Visit your Givebutter Dashboard
  2. Select your campaign
  3. Navigate to Sharing > Widgets
  4. Choose Form as the widget type
  5. Customize the appearance (optional)
  6. Copy the generated code
  7. 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 form widgets using the <givebutter-form> tag: 
<givebutter-form campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-form>

​
Configuration Options

​
Required Attributes

AttributeDescriptionExample
campaignYour campaign code (find it in your campaign URL)my-campaign

​
Optional Attributes

The form widget inherits the styling configured in your Givebutter Dashboard for the campaign. All colors, fonts, and branding are 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

​
Use Cases

Create a full-page donation experience:
<!DOCTYPE html>
<html>
<head>
  <title>Donate - Your Organization</title>
  <script async src="https://widgets.givebutter.com/latest.umd.cjs?acct={YOUR_ACCOUNT_ID}"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 2rem;
    }
  </style>
</head>
<body>
  <h1>Support Our Mission</h1>
  <p>Every donation helps us make a difference.</p>
  <givebutter-form campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-form>
</body>
</html>

​
Styling & Customization

​
Styling via Dashboard

The form’s appearance is controlled through your Givebutter Dashboard:
  1. Go to your campaign settings
  2. Navigate to Design or Branding
  3. Customize:
    • Primary colors
    • Button styles
    • Fonts and typography
    • Logo and images
Changes apply automatically to all embedded forms for that campaign.

​
Container Styling

You can style the container around the form widget: 
<div style="
  max-width: 600px;
  margin: 3rem auto;
  padding: 2rem;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
">
  <givebutter-form campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-form>
</div>
Important: Only style the container around the form widget. The form’s internal styling is managed through your Dashboard to ensure consistent branding and optimal user experience.

​
Form vs Button Widget

Not sure which widget to use? Here’s a quick comparison:
FeatureForm WidgetButton Widget
DisplayInline on pageOpens in popup modal
Page LayoutTakes vertical spaceMinimal space (just button)
User ExperienceDirect, no popupNon-disruptive, overlay
Best ForDedicated donation pagesNavigation bars, CTAs
Mobile ExperienceFull-page scrollModal overlay
Multiple CampaignsRequires more vertical spaceCompact, multiple buttons easy
Pro Tip: Use button widgets in your navigation or sidebar, and form widgets on dedicated donation or campaign pages for the best of both worlds.

​
Performance Optimization

The form widget loads asynchronously to avoid blocking your page:
  • Initial load shows a placeholder
  • Form loads in the background
  • No impact on page speed scores
  • Optimized for Core Web Vitals

​
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.

Button Widget

Create customizable popup donation buttons

Analytics

Track donation attribution and performance

Getting Started

Installation and setup guide