Embed a Fillout form in a WordPress website
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 only recently 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 using the Visual editor
First,
Publish your form and then head to the Share tab. Copy the URL from the Form Link field.
In WordPress, open the page where you want to embed the form.
Click the
+ symbol in the upper left corner of the page editor to open the Block Inserter (or press Ctrl + Alt + Y to insert a block below your cursor’s current position), search for the Embed block, and add it to the page.
Paste the
Form Link from your Form’s Share tab into the block’s text field and click Embed.
This is the quickest and easiest way to embed a Fillout form in a WordPress website. But it’s also the most limited in terms of design and layout. You have limited control over the block’s size and positioning on the page.
Add a Fillout embed code to a Custom HTML block using the Visual editor
The best way to add a Fillout form to your WordPress website is 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.After publishing your form, open the Share tab. Select your preferred embed style (Standard, Full screen, Popup, or Slider) and click
Use this embed.Adjust your embed style settings to fit your use case (more info on embed style settings here), then click
Copy..png%3Ftable%3Dblock%26id%3D7c25dc51-8c3c-451b-86a8-304484f9fb9b%26cache%3Dv2&w=3840&q=75)
On the WordPress page where you want to embed the form, click the
+ symbol in the upper left corner of the page editor to open the Block Inserter (or press Ctrl + Alt + Y to insert a block below your cursor’s current position), search for the Custom HTML block, and add it to the page.
Paste the embed code from your Form’s Share tab into the block’s text field and click Update.
Add a Fillout embed code to your page’s HTML code using the Code editor
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. That will help you make granular adjustments or troubleshoot code or style-related issues.
After publishing your form, open the Share tab. Select your preferred embed style (Standard, Full screen, Popup, or Slider) and click
Use this embed.Adjust your embed style settings to fit your use case (more info on embed style settings here), then click
Copy..png%3Ftable%3Dblock%26id%3D867a0418-c98f-49ad-86a3-a2ace2e6c35d%26cache%3Dv2&w=3840&q=75)
In WordPress, use the visual editor to open the page where you want to embed your form. Click the three vertical dots in the upper right corner of the screen, followed by
Code Editor (or press Ctrl+Shift+Alt+M from anywhere in the visual editor).
Paste the embed code from your Form’s Share tab into the block’s text field and click
Update.