Where can I find documentation on how to render a signature field? This is the only documentation I can find for how to do that:

https://formidableforms.com/knowledgebase/formidable-signature/#kb-display-signature-fields

...but it doesn't seem to work: all that renders is the typed name. I have some code from a working example, but I can't see anything in the documentation that corresponds to it. Here's the code I've got:

<div id="sigPad8161" class="sigPad" style="max-width: 350px;">
<div class="sig sigWrapper" style="height: 150px; border-color: #cccccc; --bg-color: #ffffff; --active: #008ec2; --inactive: #dddddd; --active-text: #ffffff; --inactive-text: #ffffff; --button-margin: 27px; --button-size: 16px; --button-padding: 8px; --button-s <div class="sigPad" id="sigPad8161" style="max-width:350px;">
<div class="sig sigWrapper" style="height:150px;border-color:#cccccc;--bg-color:#ffffff;--active:#008ec2;--inactive:#dddddd;--active-text:#ffffff;--inactive-text:#ffffff;--button-margin:27px;--button-size:16px;--button-padding:8px;--button-side-margin:27px;--icon:20px"><ul class="sigNav frm_hidden "><li class="drawIt"> <a href="#" class="" title="Draw It" aria-label="Draw It"> <svg viewBox="0 0 22 20" class="frmsvg"><title>signature</title> <path d="M19.7 2.2A3.5 3.5 0 0 0 14 1.1L1.7 13.4a1 1 0 0 0-.3.4l-1.3 5a.9.9 0 0 0 0 .5 1 1 0 0 0 1 .6l5-1.3c.2 0 .4-.1.5-.3L18.9 6a3.5 3.5 0 0 0 .7-3.8zm-6.8 2.6L15.2 7l-8.6 8.7-2.4-2.4zm-10.7 13l1-3.3L5.4 17zM18 4.2l-.4.5L16.3 6 14 3.7l1.3-1.3A1.7 1.7 0 0 1 18 3.6l-.1.6zM9 17.9h11v1H9v-1z"></path> </svg> </a></li><li class="typeIt"> <a href="#" class="frm-active-sig-type" title="Type It" aria-label="Type It"> <svg viewBox="0 0 22 20" class="frmsvg"><title>keyboard</title> <path d="M20.6 2.5H2c-1 0-1.9.8-1.9 1.9v11.2c0 1 .8 1.9 1.9 1.9h18.7c1 0 1.9-.8 1.9-1.9V4.4c0-1-.8-1.9-1.9-1.9zm.3 13.1c0 .2-.1.3-.3.3H2a.3.3 0 0 1-.3-.3V4.4c0-.2.1-.3.3-.3h18.7c.2 0 .3.1.3.3v11.2zm-14.3-5V9.4c0-.3-.2-.5-.4-.5H5c-.3 0-.5.2-.5.5v1c0 .3.2.5.5.5h1c.3 0 .5-.2.5-.5zm3.8 0V9.4c0-.3-.2-.5-.5-.5H9c-.3 0-.5.2-.5.5v1c0 .3.2.5.4.5H10c.3 0 .5-.2.5-.5zm3.7 0V9.4c0-.3-.2-.5-.4-.5h-1.1c-.3 0-.5.2-.5.5v1c0 .3.2.5.5.5h1c.3 0 .5-.2.5-.5zm3.8 0V9.4c0-.3-.2-.5-.5-.5h-1c-.3 0-.5.2-.5.5v1c0 .3.2.5.4.5h1.1c.3 0 .5-.2.5-.5zM4.8 7.2v-1c0-.3-.2-.5-.5-.5H3.2c-.3 0-.5.2-.5.4v1.1c0 .3.2.5.5.5h1.1c.3 0 .5-.2.5-.5zm3.7 0v-1c0-.3-.2-.5-.5-.5H7c-.3 0-.5.2-.5.4v1.1c0 .3.2.5.5.5h1c.3 0 .5-.2.5-.5zm3.8 0v-1c0-.3-.2-.5-.5-.5h-1.1c-.3 0-.5.2-.5.4v1.1c0 .3.2.5.5.5h1.1c.3 0 .5-.2.5-.5zm3.7 0v-1c0-.3-.2-.5-.5-.5h-1c-.3 0-.5.2-.5.4v1.1c0 .3.2.5.5.5h1c.3 0 .5-.2.5-.5zm3.8 0v-1c0-.3-.2-.5-.5-.5h-1.1c-.3 0-.5.2-.5.4v1.1c0 .3.2.5.5.5h1.1c.3 0 .5-.2.5-.5zm-2 6.2V13c0-.3-.2-.5-.6-.5h-12c-.3 0-.6.2-.6.5v.6c0 .3.3.5.7.5h12c.3 0 .6-.2.6-.5z"></path> </svg> </a></li></ul> <span class="frm-typed-drawline" style="width: 259px; height: 1px; background-color: rgb(204, 204, 204);"></span>
<div class="typed" style="visibility: visible;">
<input readonly="readonly" type="text" name="item_meta[8161][typed]" class="name" id="field_b1chh5" autocomplete="off" value="" style="width:350px" maxlength="150">
</div>
<canvas class="pad" data-fieldid="8161" data-fieldname="item_meta[8161]" width="346" height="150" style="touch-action: none; user-select: none; visibility: hidden;"></canvas>
</div>
</div>ide-margin: 27px; --icon: 20px;">
<ul class="sigNav frm_hidden ">
<li class="drawIt"> </li>
<li class="typeIt"> </li>
</ul>
<div class="typed" style="visibility: visible;"><input id="field_b1chh5" class="name" style="width: 350px;" autocomplete="off" maxlength="150" name="item_meta[8161][typed]" readonly="readonly" type="text" value="" /></div>
<canvas class="pad" style="touch-action: none; user-select: none; visibility: hidden;" width="346" height="150" data-fieldid="8161" data-fieldname="item_meta[8161]"></canvas></div>
</div>

I've tried doing a search & replace on the field ID & that results in a signature block being rendered with no signature included.