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

# Embed in WordPress

> Add a FormHug form to any WordPress page or post using the Custom HTML block, with responsive sizing that works on any device.

WordPress is the most common place to embed a FormHug form. You can add a form to any page or post in minutes using the block editor — no plugins required.

Embedded forms work well for <a href="https://formhug.ai/templates/lead-capture-form-template" target="_blank">lead capture</a>, <a href="https://formhug.ai/templates/contact-us-form-template" target="_blank">contact pages</a>, newsletter signups, and event registrations.

## Before You Start

Get your embed code from FormHug first: open the form → click **Publish** → **Share** → **Add to website** → choose your embed type → click **Get the code**. Keep it ready before opening WordPress.

## Add the Form to Your Page

<Steps>
  <Step title="Open the Page or Post">
    In your WordPress dashboard, open or create the page where the form should appear.
  </Step>

  <Step title="Add a Custom HTML Block">
    Click **+** to add a block → search for **Custom HTML** → select it.
  </Step>

  <Step title="Paste the Embed Code">
    Paste your FormHug embed code into the Custom HTML block.
  </Step>

  <Step title="Adjust the Height">
    Find the `height` attribute in the embed code and set it to match your form's length. A short contact form typically needs 400–500px; a longer survey needs 700px or more.
  </Step>

  <Step title="Update the Page">
    Click **Update** or **Publish**. The form displays on the live page — the block editor shows a placeholder, not the actual form.
  </Step>
</Steps>

<Note>
  The WordPress editor won't render the form inline. Open the published page in a new tab to see exactly what visitors see.
</Note>

## Responsive Sizing

The default embed code sets the form width to 100%, which works on desktop and mobile. To cap the width on wide screens, wrap the embed in a container:

```html theme={null}
<div style="max-width: 680px; margin: 0 auto;">
  <!-- paste FormHug embed code here -->
</div>
```

<Tip>
  After publishing, open the live page on your phone to confirm the form renders correctly at mobile screen sizes before sharing the link.
</Tip>

## Related

<CardGroup cols={2}>
  <Card title="Embed Options" icon="code" href="/features/sharing/embed">
    All embed types available in FormHug
  </Card>

  <Card title="Embed in Webflow" icon="globe" href="/guides/embed/webflow">
    Instructions for Webflow sites
  </Card>

  <Card title="Lead Generation Guide" icon="book-open" href="https://formhug.ai/blog/how-to-build-a-lead-generation-form" target="_blank">
    Learn how to place forms on pages that convert visitors into leads
  </Card>

  <Card title="Contact Form Template" icon="envelope" href="https://formhug.ai/templates/contact-us-form-template" target="_blank">
    Start with a simple form for website inquiries
  </Card>
</CardGroup>