How to insert form block in developer mode in Squarespace

I'm working on a Squarespace website in developer mode where I can create the website with code.

In the file site.region, I noticed that I can insert a footer block using this code:

<squarespace:block-field id="footerBlocksMiddle" class="Footer-blocks Footer-blocks--middle sqs-alternate-block-style-container" columns="12" label="{localizedStrings.footerMiddleBlocks}" />

However, I haven't been able to figure out how to insert a form block preferably so that I can set it as email storage.

I tried <squarespace:block-form but that does not work.

The error looks like this on the squarespace configuration page:

&quot;Something went wrong.&quot;

How do I write out this code?

Solution

What's actually going on in the footer code you mentioned, is that a block field is being inserted. Within that block field, you can add whatever blocks in whatever arrangement you like.

So to accomplish your goal, you'll insert a block field and then add only a form block to it. Then, in other places where you want that form block to appear, you add the block field (containing the form block) into the code.

As long as you use the same id, the same block field will be reused, allowing you to edit the form in whatever area you happen to be in, and changes will affect everywhere else the block field was placed.

<squarespace:block-field id="myFormOnlyBlockField" columns="1"/>

Place that where you want the form block to appear. Of course, initially, you have to add the form block to it and configure it. From then on, adding the code above throughout your site template will show the form, and changing any instance of the block will affect all instances.

Note that I've set 'columns' to '1' in the example above, figuring that you're just adding a single block so no need to have more columns. you could set it to something else and it'd work just as well. Also note that the areas where you add the block field might have a bit too much spacing/padding/margin around it, so you may need to CSS to adjust for that.

Alternatively, it is possible to execute JavaScript within a code block to make an AJAX/Fetch request to the page with the form block on it, and have that form block replace the code block within which the JavaScript is executed. Such an approach would work even without developer mode.