Add the form to Webflow

This is the code. Replace hoac_embed_your_key_here with the key from your console. That is the only edit it needs.

<div data-hoacrew-proposal-form data-key="hoac_embed_your_key_here"><a href="https://hoacrew.com/embed/w/hoac_embed_your_key_here">Request a proposal</a></div>
<script src="https://hoacrew.com/embed/v1.js" async></script>

Two lines: the place the form goes, and the script that puts it there. The link inside the first line is a plain one to your hosted form, and it is what a visitor gets if the script never arrives — a browser with scripting off, a corporate proxy, a blocker. The loader clears it the moment it runs, so nobody sees both. That wording is yours: change Request a proposal to whatever you would rather it said and nothing else is affected.

1. 1

   Open the page in the Designer

   Open your project, then the page you want the form on. Click where it should sit so Webflow knows where to put the new element.

2. 2

   Drag in a Code embed element

   Press the + in the top left to open the Add panel, find Code embed under Advanced, and drag it onto the page. A code editor opens as soon as it lands. Older Webflow projects label the same element Embed.

3. 3

   Paste and save

   Paste the snippet into the editor and press Save & Close. The canvas now shows a placeholder block rather than the form — the Designer does not run embedded code, which is normal and is not a failed paste.

4. 4

   Publish

   Press Publish and choose the domains to publish to. The form appears on the published site.

Every Webflow project also answers at an address ending in .webflow.io, and that is where most people look first after publishing. It is a different web address from your real domain, so a form that draws on acme-lawns.com shows the fallback button rather than the form on acme-lawns.webflow.io unless you have listed both.

Add your .webflow.io address on the plugin page while you are building, and take it off once the site is live if you would rather keep the list tidy. Removing it takes effect on the next page load and does not touch anything on the site itself.

1. Open the published page — not the Designer preview, which still shows the placeholder.
2. The form is there with your company’s name on it. Send a test, taking more than a few seconds over it: a submission completed unusually fast is filed as suspected spam.
3. Open Settings → Website plugin in your HOAcrew console. Your test is in the list.

Most websites have no Content-Security-Policy and this section does not apply to them. If yours has one — a security plugin added it, your host sets it, or whoever built the site wrote one — it needs to allow two things from us:

script-src  https://hoacrew.com
frame-src   https://hoacrew.com

The first lets the loader script run. The second lets the form’s frame render. Allow the first and forget the second and you get a blank space where the form should be, with a line in the browser’s developer console naming frame-src. Nothing else is needed: the form loads no fonts, no analytics and no other company’s code, so there is no third allowance hiding behind these two.

Webflow does not give you a place to set one, so this only comes up if your domain is behind something you added yourself — typically a Cloudflare rule that adds headers as pages leave.

Every key also has a plain web address that opens the same form as a full page. Put it behind any button, in an email signature, on a Google Business profile, or on a page you cannot add code to.

https://hoacrew.com/embed/w/hoac_embed_your_key_here

It is the same form, sending to the same place, and requests from it arrive in your console exactly like the ones from the embedded version.

In Webflow that is any Link Block or Button with its link type set to URL. No Embed element, no publish-and-check cycle, and no addresses to register — the list of allowed addresses governs where the form may be shown inside another page, and a link opens it as its own.

Back to the overview, the options and the events