Embed guide
Add a form to Carrd
Add a hootform form to a Carrd site with an Embed element: inline in the page, as a popup or slider from a button, or full page.
What works on Carrd
| Way to show a form | On Carrd |
|---|---|
| In the page | ✓ |
| Popup | ✓ |
| Slider | ✓ |
| Full page | ✓ |
Where the snippet goes
Carrd takes custom HTML through its Embed element.
- Edit your site, add an element where the form should go, and choose Embed.
- Set its type to Code, paste the snippet from your form's Share menu, on the Embed tab, and apply.
- Publish and open the live site to check the form.
For a popup, paste the button version of the snippet, or add the form's data-hootform
attributes to an element of your own.
Tips
- Carrd's Embed element is part of its paid plans. On the free plan, link a button to the form's own page instead.
- A one-page Carrd site pairs well with a waitlist form in the page, or a contact form in a popup.
- Add
data-hootform-forward-queryto pass your page'sutm_parameters into the form.
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
Can I use the form on a free Carrd site?
Embeds need a paid Carrd plan. On the free plan, add a button that links to the form's own page.
Why doesn't the form show in the Carrd editor?
Embedded code runs on the published site. Publish and check the live page.
Can the whole Carrd page be the form?
Yes. Use the Full page snippet, or simply link your domain's visitors to the form's own address.