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

# Embedding forms in ButterCMS fields

> Embed third-party forms directly in any ButterCMS WYSIWYG field, or create a custom ButterCMS component to host form source code.

{/* /SOURCE */}

<Info>
  Need rendering guidance and security tips? See [Rendering Embedded Forms](../../../build-your-app/rendering-complex-field-types/embedding-forms).
</Info>

## Embedding via WYSIWYG editor

### Step 1: Copy your form embed code

To insert a form into ButterCMS, you need to embed the code from your third-party form tool into your Blog Post or Page's WYSIWYG field. Here's an example using Wufoo:

1. Login to your form provider account.
2. Navigate to the form you want to embed.
3. Find the "Share" or "Embed" option.
4. Copy the embed code.

![Wufoo Form Manager](https://cdn.buttercms.com/ThsxBFQ7RWK8bpdNHHMf)

![Getting embed code from form provider](https://cdn.buttercms.com/fCHevkDxSSWARCarw931)

{/* SOURCE: file_path="knowledge-base/how-to/embedding-forms.md" section="Pasting form embed code" */}

### Step 2: Paste into WYSIWYG field

1. In ButterCMS, navigate to your page or blog post.
2. Click on the WYSIWYG field where you want to embed the form.
3. Click on the **Source code** button (`<>`) in the toolbar.

![WYSIWYG source code button](https://cdn.buttercms.com/fD2XhBY6QDCIphUalpuX)

4. Paste your embed code into the source view

![Pasting embed code in source view](https://cdn.buttercms.com/2Lj7TUFRtCmoUsNiFfwH)

5. Click **Save** to apply the changes

### Step 3: Preview your form

Depending on what code you embed, you will either see a link to your form or the actual form on your WYSIWYG field.

![Form preview in WYSIWYG](https://cdn.buttercms.com/tnivBbTgSTyGlAgXpvRG)

You can preview your post before publishing it to see how it will look on your live site.

![Form rendered on live site](https://cdn.buttercms.com/8AZK1ovGRqaT41kfZ9ym)

***

## Creating a form embed Component

For more control and reusability, create a dedicated Component for form embeds:

### Component schema

Create a new Component called **Form Embed** with these fields:

| Field Name      | Field Type | Description                                      |
| --------------- | ---------- | ------------------------------------------------ |
| `form_title`    | Short Text | Display title for the form                       |
| `form_provider` | Dropdown   | Options: HubSpot, Mailchimp, Google Forms, Other |
| `embed_code`    | Long Text  | The iframe or script embed code                  |
| `form_height`   | Number     | Height in pixels (default: 500)                  |
| `show_title`    | Checkbox   | Whether to display the form title                |

***

## Best practices

<Info>
  **Performance tip**: Forms with heavy JavaScript (100KB+) can impact page load times. Consider lazy-loading forms using the Intersection Observer API to load them only when scrolled into view.
</Info>

### Accessibility

1. **Form labels** - Ensure embedded forms have proper labels
2. **Keyboard navigation** - Test that forms can be completed using keyboard only
3. **Screen readers** - Verify form fields are announced correctly
4. **Color contrast** - Check that form elements meet WCAG guidelines

***

## Troubleshooting

| Issue               | Solution                                                   |
| ------------------- | ---------------------------------------------------------- |
| Form not displaying | Check that the embed code is valid HTML/JavaScript         |
| Form cut off        | Adjust the iframe height or use responsive embed styles    |
| Submission errors   | Verify the form action URL is accessible                   |
| Styling conflicts   | Add CSS scoping or use an iframe to isolate styles         |
| CORS errors         | Ensure the form provider allows embedding from your domain |

## Next steps

<CardGroup cols={2}>
  <Card title="Custom form handling" icon="code" href="./custom-form-handling">
    Build custom forms using Collections
  </Card>

  <Card title="Form integrations" icon="puzzle-piece" href="./form-integrations">
    Use native Typeform, Jotform, Formstack integrations
  </Card>
</CardGroup>