Custom Control - Digital Signature

Signature Pad Custom Control For XMod Pro

This Custom Control for XMod Pro Forms gives you the ability to take true digital signatures through a Signature Pad field for your DNN Forms!
 
Benefits & Features: We developed this Custom Control for a project where the client needed to capture a written digital signature.
  • Great for iPad and Android Tablet use for forms that need digital signatures from users.
  • The digital signature is effective when used with a mouse or trackpad, and is excellent when using a pen, stylus or touch/tablet
  • SignaturePad is a jQuery plugin for creating an HTML5 canvas-based signature pad.
  • Signatures drawn in the field are recorded in a JSON array that can be saved to the database as a string, and can be called later to regenerate and display a signature in the canvas. An included XMod Pro demo Template shows a generated signature.
  • We recommend that, in addition to saving the signature, that you setup db fields for recording FirstName, LastName, DateCreated, and UserIPAddress, all of which are easy to do with standard XMod Pro fields/Tokens.
  • The Module Kit installer will setup an XMod Pro form example using countries/states as a starter example for you to work from.
  • New In Version 1.1.0 - Control Width & Height of signature canvas area with values in the control as well as style css edits.
  • New In Version 1.1.0 - Set the position of the gray "signature guideline" within the signature canvas area.
  • New In Version 1.1.0 - Download / Save signature as JPG Image with additional download control for use in Forms / Templates that creates a "save as image" link.

 
This Kit & Code Are Made For XMod Pro

Made For XMod Pro

This Kit / Code works in XMod Pro and is a collection of Forms, Templates and Feeds that together create a solution or module for DNN. This code will not work without XMod Pro 3+ installed in your DNN instance. If you do not already have a licensed copy of XMod Pro, go get one!
Get XMod Pro now from The DotNetNuke Store »

This item is a Custom Control produced for use in XMod Pro forms and is a control built for SignaturePad, an HTML5 canvas signature field built by Thomas J Bradley. Further details, instructions, and additional features/elements for the concept can be found at the source articles. SignaturePad requires jQuery, Douglas Crockford’s json2.js and FlashCanvas 1.5. All dependencies retain their own original licenses.

Notes & Instructions

You have two options on how to install and begin using the module kit:
  • Option 1. Install Manually
    With the provided .ZIP file of contents, you will find the necessary XMod Pro custom control and example form code that you can copy and paste into new forms that you create within the XMod Pro Control Panel. Additionally, if there are associated images and JavaScript files you will find these in the .ZIP as well.
  • Option 2. Use the Kit Module Installer
    The kit module installer allows you to use the standard DotNetNuke module install process to install the XMod Pro forms and template files as well as create the example database table necessary.
    • To use the kit installer, simply install it in the same manner as a standard module.
    • Then, place the module on a page
    • follow the instructions displayed on the module and click a button to complete installation
    • the completion of the installation process will remove the temporary kit installer module from the page and your DNN instance
    • you are now ready to specify the template, forms, etc within a module of XMod Pro like normal

 

 

Demo Digital Signature For DNN Form

This is a working demo of the MooreCreative Digital Signature Custom Form Control for DNN XMod Pro forms

 

Draw your signature



Load a few demo example signatures in the demo form above:
Demo Signature 1  |  Demo Signature 2  |  Demo Signature 3  | 

XMP Template Display of Signature / Signature Pad

The XModPro Template for the Digital Signature Pad simply renders the signature path output for use on a standard screen or display outside of a form element.

Read The Blog!

Ideas, tips and information on what we're developing for XMod Pro!

Moore Creative's XMod Pro Blog »

Modules On Snowcovered

See all of the modules on store.DotNetNuke.com, several are free DNN modules!

Custom DNN Development

Let us build custom DNN solutions for you! l

Need Support?

Want to see a demo? Need help setting up a module or XMod Pro custom control?
Contact Us