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

# Embed Fillout forms on WordPress

> Learn how to embed a Fillout form in WordPress. You can add the HTML code directly to your site or use a WordPress Embed block to add a form to a webpage.

## Overview

[WordPress](https://wordpress.com) released form blocks, and their logic features and results tracking aren’t as powerful as those that come with a dedicated form builder.

There are three basic ways to embed a Fillout form in WordPress:

* Add a Fillout Form URL to an Embed block using the Visual editor
* Add a Fillout embed code to a Custom HTML block using the Visual editor
* Add a Fillout embed code to your page’s HTML code using the Code editor

## Add a Fillout Form URL to an Embed block

<Steps>
  <Step title="Copy form link">
    First, `Publish` your form and `Copy` the link. Alternatively, you can go to the `Share` tab.

    <img src="https://mintcdn.com/fillout-005a867b/-FxY044VaxOfLQSj/images/Screenshot2025-12-01at5.53.03PMcopy2.png?fit=max&auto=format&n=-FxY044VaxOfLQSj&q=85&s=9d74768d8f9b7fb4e202250d4fcd7b09" alt="Screenshot 2025-12-01 at 5.53.03 PM copy 2.png" title="Screenshot 2025-12-01 at 5.53.03 PM copy 2.png" style={{ width:"41%" }} width="846" height="898" data-path="images/Screenshot2025-12-01at5.53.03PMcopy2.png" />
  </Step>

  <Step title="Add an embed block">
    In WordPress, open the page where you want to embed the form. Click `+` in the upper left corner of the page editor to open the **Block Inserter** in the left side (or press Ctrl + Alt + Y to insert a block below your cursor’s current position) and search for the `Embed` block.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-19.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=6fba8d6d1b7b0b8404ad68a2426e47ca" alt="" width="1416" height="402" data-path="images/sharing-and-embedding/image-19.png" />
  </Step>

  <Step title="Paste form link">
    Paste the `Form Link` into the block’s text field and click `Embed`.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-20.gif?s=0d8f82805b496d841fecda44cb631c8a" alt="" style={{ width:"85%" }} width="600" height="271" data-path="images/sharing-and-embedding/image-20.gif" />
  </Step>
</Steps>

This is the quickest way to embed a Fillout form in WordPress, but it offers limited design and layout control, including the block’s size and positioning.

## Add a Fillout embed code to a Custom HTML block (Recommended)

The best way to add a Fillout form to your WordPress website is by using one of the embed codes since it gives you more control over the layout and often looks better on the page than using the `Form Link`.

<Steps>
  <Step title="Choose an embed style">
    Start by clicking `Publish` in the upper right corner of the Fillout form editor. A popup will show up where you can pick an **embed style**.

    <img src="https://mintcdn.com/fillout-005a867b/8xPSE_gltIWkl-pC/images/image.png?fit=max&auto=format&n=8xPSE_gltIWkl-pC&q=85&s=7dbcd6fa7b9a41bd1cbd1163d7f11065" alt="image.png" width="1780" height="440" data-path="images/image.png" />

    If you've already published your form, click `Share` in the top middle or top right. Adjust your embed style settings to fit your use case. Then, `Get the code`
  </Step>

  <Step title="Add a custom HTML block">
    On the WordPress page where you want to embed the form, click `+` in the upper left corner of the page editor to open the **Block Inserter** in the left side (or press Ctrl + Alt + Y to insert a block below your cursor’s current position) and search for the `Custom HTML` block.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-21.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=e49d94971a1b159b1d06a51290df8399" alt="" width="2878" height="1488" data-path="images/sharing-and-embedding/image-21.png" />
  </Step>

  <Step title="Paste embed code">
    Paste the embed code from Fillout into the block’s text field and click `Update`.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-22.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=ffface93a62b50629c22876e7d2e88d7" alt="" width="1910" height="650" data-path="images/sharing-and-embedding/image-22.png" />
  </Step>
</Steps>

## Add a Fillout embed code to your page’s HTML code

If you want or need to see all of a page’s HTML before adding your embed code, you need to switch to WordPress’s **Code editor**. This will help you make granular adjustments or troubleshoot code or style-related issues.

<Steps>
  <Step title="Choose an embed style">
    Start by clicking `Publish` in the upper right corner of the Fillout form editor. A popup will show up where you can pick an **embed style**.

    <img src="https://mintcdn.com/fillout-005a867b/8xPSE_gltIWkl-pC/images/image.png?fit=max&auto=format&n=8xPSE_gltIWkl-pC&q=85&s=7dbcd6fa7b9a41bd1cbd1163d7f11065" alt="image.png" width="1780" height="440" data-path="images/image.png" />

    If you've already published your form, click `Share` in the top middle or top right. Adjust your embed style settings to fit your use case. Then, `Get the code`
  </Step>

  <Step title="Navigate to code editor">
    In WordPress, use the visual editor first to open the page where you want to embed your form. Then, click <Icon icon="ellipsis-vertical" /> in the upper right corner of the screen, followed by `Code Editor` (or press Ctrl+Shift+Alt+M from anywhere in the visual editor).

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-23.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=9c6cda2619aad04b64592e0ce01647bc" alt={true} style={{ width:"27%" }} width="527" height="771" data-path="images/sharing-and-embedding/image-23.png" />
  </Step>

  <Step title="Paste embed code">
    Paste the embed code from Fillout into the block’s text field and click `Update`.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-24.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=b4c44719fc82211b41a0ca6307f0e3ed" alt="" width="1599" height="696" data-path="images/sharing-and-embedding/image-24.png" />
  </Step>
</Steps>

## Related article

<CardGroup cols={3}>
  <Card title="Share & embed" icon="arrow-up-right-from-square" iconType="regular" color="#FFC738" href="/sharing">
    Share your form by link or embed it on your website.
  </Card>
</CardGroup>
