Hey there, did you ever figure this out? I'm having to implement one of these so any details would be helpful. Thanks

Hey guys!. Does anyone have news about it?

Anyone?

I managed to create a custom field type to capture a signature and save it as a data:image/png;base64 string using this javascript library https://github.com/szimek/signature_pad

I was only asked to determine if this was possible so the code is a very quick rough concept. The javascript and css needs moving out of the field partial view file etc I just threw it in there to test it worked.

I added a basic field type :-

using System;
using Umbraco.Forms.Core.Enums;

namespace Progress.Group.Forms.FieldTypes
{
    public class Signature : Umbraco.Forms.Core.FieldType
    {
        public Signature()
        {
            this.Id = new Guid("78f429e3-d27d-4696-8028-5c8830d73909");
            this.Name = "Signature";
            this.Description = "Displays a canvas to capture a signature";
            this.Icon = "icon-edit";
            this.SortOrder = 100;
            this.FieldTypeViewName = "FieldType.Signature.cshtml";
            this.DataType = FieldDataType.LongString;
        }
    }
}

Then the field partial view :-

    @using Umbraco.Forms.Mvc
    @model Umbraco.Forms.Mvc.Models.FieldViewModel
   <!-- The below CSS and JS needs moving out of this file only added here for testing -->  
    @{        Html.AddFormThemeCssFile("~/App_Plugins/UmbracoForms/Assets/signaturepad/signaturepad.css");
    }
    <script src="~/App_Plugins/UmbracoForms/Assets/signaturepad/signaturepad.js"></script>
    <script src="~/App_Plugins/UmbracoForms/Assets/signature.init.js"></script>
    <div id="[email protected]" class="signature-pad">
        <div class="signature-pad--body">
            <canvas></canvas>
        </div>
        <div class="signature-pad--footer">
            <div class="description">Please sign in the box above</div>
            <div class="signature-pad--actions">
                <div>
                    <button type="button" class="button clear" data-action="clear">Clear</button>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="@Model.Name" id="@Model.Id" class="datepickerfieldshadow" value="" />
    <script>
        signaturePad.init("@Model.Id");
    </script>

Then the signature.init.js file to hook it all up :-

var signaturePad = (function () {
    'use strict';

    function init(fieldId) {
        var wrapper = document.getElementById("signature-pad-" + fieldId);
        var canvas = wrapper.querySelector("canvas");
        var field = document.getElementById(fieldId);
        var clearButton = wrapper.querySelector("[data-action=clear]");
        var signaturePad = new SignaturePad(canvas, {
            // It's Necessary to use an opaque color when saving image as JPEG;
            // this option can be omitted if only saving as PNG or SVG
            backgroundColor: 'rgb(255, 255, 255)',
            onEnd: function () {
                field.value = signaturePad.toDataURL();
            }
        });

        clearButton.addEventListener("click", function (event) {
            signaturePad.clear();
            field.value = "";
        });
    }

    return {
        init: init
    };
}());

You can then convert the saved data:image/png;base64 string back to an image file via a custom workflow or whatever your needs are (I was posting the string to an api which created a PDF from the data with the signature in it).

Hope this helps

Hi,

Do you have any ideas about the best way to do PDF export of forms records for Umbraco 10? Still, Js library would be the case?

Ideas on how to make a signature form field for the modern Umbraco?

Thanks,

Alex

is working on a reply...