> ## Documentation Index
> Fetch the complete documentation index at: https://docs.givebutter.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Widget

> Embed a full donation form directly on your page for a seamless giving experience.

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](/widgets/getting-started).

## Quick Setup

The fastest way to add a form widget is through the Givebutter Dashboard:

1. Visit your [Givebutter Dashboard](https://givebutter.com/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

```html theme={null}
<givebutter-widget id="YOUR_WIDGET_ID"></givebutter-widget>
```

<div style={{ padding: '2rem', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem' }}>
  <GivebutterWidget widgetType="form" campaign="KN5NON" />
</div>

## Manual Setup

For full control without using the dashboard, create forms directly with the `<givebutter-giving-form>` tag:

<CodeGroup>
  ```html Basic Form theme={null}
  <givebutter-giving-form campaign="YOUR_CAMPAIGN_CODE"></givebutter-giving-form>
  ```

  ```html With Goal Bar theme={null}
  <givebutter-giving-form campaign="YOUR_CAMPAIGN_CODE" show-goal-bar="true"></givebutter-giving-form>
  ```

  ```html Custom Width theme={null}
  <givebutter-giving-form campaign="YOUR_CAMPAIGN_CODE" max-width="500px"></givebutter-giving-form>
  ```
</CodeGroup>

## Configuration Options

### Required Attributes

| Attribute  | Description                              | Example       |
| ---------- | ---------------------------------------- | ------------- |
| `campaign` | Your campaign code (from your dashboard) | `my-campaign` |

### Optional Attributes

| Attribute       | Description                       | Default |
| --------------- | --------------------------------- | ------- |
| `show-goal-bar` | Display a goal bar above the form | `false` |
| `theme-color`   | Theme color for the goal bar      | None    |
| `max-width`     | Maximum width of the form         | `560px` |
| `max-height`    | Maximum height of the form        | None    |

<Note>
  The form's internal styling (colors, fonts, branding) is controlled through your Givebutter
  Dashboard campaign settings and automatically applied.
</Note>

## Layout Considerations

The form widget is responsive and will adapt to its container width. Consider these best practices:

<AccordionGroup>
  <Accordion title="Container Width">
    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
  </Accordion>

  <Accordion title="Page Layout">
    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
  </Accordion>

  <Accordion title="Height & Scrolling">
    * 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
  </Accordion>

  <Accordion title="Mobile Responsiveness">
    * 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
  </Accordion>
</AccordionGroup>

## Troubleshooting

<Warning>
  **Form not appearing?** Make sure you've [installed the Widgets library](/widgets/getting-started)
  on your page and that your campaign code is correct.
</Warning>

<AccordionGroup>
  <Accordion title="Form appears too small">
    The form adapts to its container. Ensure the container is at least 320px wide. Check for CSS that might be constraining the width.
  </Accordion>

  <Accordion title="Form is cut off">
    Forms expand vertically to fit content. Ensure there's no `max-height` or `overflow: hidden` on
    parent containers.
  </Accordion>

  <Accordion title="Multiple forms on one page">
    You can embed multiple forms on the same page. Each will load independently. Consider spacing them
    with margin/padding for better UX.
  </Accordion>

  <Accordion title="Form styling doesn't match my site">
    Form styling is controlled in your Givebutter Dashboard under campaign settings. Update your campaign's design settings to match your brand.
  </Accordion>
</AccordionGroup>