HOAcrew

Add the form to WordPress

One Custom HTML block on the page you want it on. About five minutes, and you do not need a developer.

Where the code goes
a Custom HTML block
How the form arrives
Inside your page
the visitor never leaves your site
What you paste
Two lines of HTML
Addresses per key
10
list every spelling your site answers on

Paste it into a Custom HTML block

You need your key first.

It is on the plugin page in your console, under Settings, Website plugin. That page is also where you list the web addresses your form is allowed to appear on, and it will not work anywhere you have not listed. The overview walks through getting one.

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

The snippet

<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 for editing

    In the WordPress admin, go to Pages, find the page you want the form on, and press Edit. Your Contact or Services page is the usual choice.

  2. 2

    Add a Custom HTML block

    Click where you want the form to sit, press the black + button, type Custom HTML into the search box, and choose it. You get an empty box with the word Write HTML… in it.

  3. 3

    Paste the two lines

    Paste the snippet straight into that box. Do not put it inside a Paragraph block or a Code block — a Code block displays code rather than running it, which gets you a page showing the snippet as text.

  4. 4

    Publish, then open the live page

    Press Update (or Publish on a new page), then press View Page. The editor shows the raw code where the block is; the live page shows the form. That difference is normal and is not a sign of a problem.

Register both spellings of your address.

To a browser, acme-lawns.com and www.acme-lawns.com are two different places. If your site answers on both, list both on the plugin page. The same goes for http:// against https://. This is the reason behind almost every form that never appears.

The Classic editor

If your editor is one long box with a toolbar above it rather than a stack of blocks, you are on the Classic editor. Above the top-right corner of the box there are two tabs, Visual and Text.

Switch to Text first, then paste. Pasting into Visual turns the code into something WordPress displays rather than something it runs, and switching tabs afterwards does not undo that.

Elementor, Divi and other builders

Page builders replace the WordPress editor with their own, and every one of them has a block for raw code. The names differ; the job is the same.

  • Elementor — drag in the widget called HTML and paste the snippet into it.
  • Divi — add a Code module and paste the snippet into the content box.
  • Beaver Builder, WPBakery and the rest — look for a module named HTML, Raw HTML, or Code. If a builder offers both HTML and Text, choose HTML.

Builders usually preview their own canvas without running scripts, so the form will not appear inside the builder. Save, then open the live page.

How to tell it worked

  1. Open the live page in a normal browser tab, not the editor.
  2. The form should be there, with your company’s name on it. Fill it in and send it — take more than a few seconds over it, because a submission completed unusually fast is filed as suspected spam.
  3. Open your console at Settings → Website plugin. Your test is in the list.

If the code is not in the page at all

Right-click the live page and choose View page source, then search it for hoacrew. If nothing is found, WordPress removed the script tag when you saved — which it does for any login that is not a full Administrator on a multisite install, and on some managed hosts. Ask whoever administers the site to paste it, or use the link at the bottom of this page instead.

If your site has a security policy

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:

The two allowances

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.

On WordPress this almost always comes from a security plugin — Wordfence, iThemes Security, Really Simple SSL and similar all offer to add one. Find the plugin’s headers or Content-Security-Policy screen and add the two lines there. If you cannot find where it is set, turn the plugin’s header feature off for a moment and reload the page: if the form appears, that plugin is the place to add them.

The same form, somewhere else

Squarespace

Every plan has code blocks; Core and above can run one.

Wix

Wix runs pasted code on its own address, so this one is different.

Webflow

Custom code needs a paid plan. Register the webflow.io address too.

Shopify

Theme Customizer, no code editor needed.

A plain HTML site

Two lines, wherever you want the form. A complete worked example.

React or Next.js

A script tag written in JSX never runs — use the component instead.

Back to the overview, the options and the events