Embed guide
Add a form to WordPress
Add a hootform form to a WordPress site with a Custom HTML block: inline, as a popup or slider from a button, or full page.
What works on WordPress
| Way to show a form | On WordPress |
|---|---|
| In the page | ✓ |
| Popup | ✓ |
| Slider | ✓ |
| Full page | ✓ |
Where the snippet goes
WordPress takes custom HTML through the Custom HTML block in the block editor.
- Edit the page or post, add a block, and choose Custom HTML.
- Paste the snippet from your form's Share menu, on the Embed tab.
- Use Preview to see it, then update the page.
For a popup or slider, paste the button version of the snippet. To show the same popup on every page, add the script line once to your theme's footer, or with a plugin that inserts code into the header or footer, and put just the button where you want it.
Tips
- Some hosted WordPress plans strip scripts from posts. If the form doesn't appear, use the Plain iframe option on the Embed tab, which works without scripts but only in the page.
- Security plugins can block frames from other sites. If the frame is blank, check their settings.
- Add
data-hootform-forward-queryto pass your page'sutm_parameters into hidden fields.
The snippets
Replace FORM_ID with your form's id, or copy the finished version from the
form's Share menu, on the Embed tab.
In the page
<div data-hootform="FORM_ID"></div>
<script src="https://hootform.com/embed.js" async></script>Popup
<button type="button" data-hootform="FORM_ID" data-hootform-mode="popup">Open form</button>
<script src="https://hootform.com/embed.js" async></script>Slider
<button type="button" data-hootform="FORM_ID" data-hootform-mode="slider">Open form</button>
<script src="https://hootform.com/embed.js" async></script>Full page
<div data-hootform="FORM_ID" data-hootform-mode="fullpage"></div>
<script src="https://hootform.com/embed.js" async></script>Questions people ask
Does this work with the classic editor?
Yes. Switch the editor to its Text or HTML view and paste the snippet there.
Do I need a plugin?
No. The Custom HTML block is built in. A header and footer plugin only helps if you want the script on every page.
Can I use it with page builders like Elementor?
Most page builders have an HTML widget. Paste the snippet into it, the same way.