Show last authors
1 {{content/}}
2
3 You can add a form field that lets the user draw their own signature with the mouse or a stylus on a touch-sensitive screen. This makes use of the [[JavaScript library jSignature>>url:https://willowsystems.github.io/jSignature||rel="noopener noreferrer" target="_blank"]]. {{formcycle/}} already includes this library and makes it available to all forms. To use the handwritten signature feature, you do not need to take any futher steps or include the library manually.
4
5 For the standard use case, there is no need to interact with the library via own custom JavaScript. Advanced users may initialize a signature field manually with the corresponding jQuery method, see also the documentation on {{jsdoc page="jquery" name="jsignature"/}}.
6
7 == Enabling handwritten signatures ==
8
9 {{figure image="designer_advanced_signature_en.png" width="500"}}
10 Add the attribute //signature// to a textarea. This converts it to an input field for a handwritten signature.
11 {{/figure}}
12
13 To convert an input field to an input field for a handwritten signature:
14
15 * Add a form element of type [[textarea>>doc:Formcycle.Designer.Form.FormElements.Textarea]] to the form
16 * Give this textarea the [[attribute>>doc:Formcycle.Designer.Form.ElementProperties.Attributes]] //data-signature// with the value //data-signature//. If the form does not use the [[W3C compliant mode>>doc:Formcycle.Designer.Form.FormProperties]], the [[attribute>>doc:Formcycle.Designer.Form.ElementProperties.Attributes]] //signature// with the value //signature// has to be used instead.
17
18 {{info}}
19 You should also set the //Max. length// to 0 in the [[constraints>>doc:Formcycle.Designer.Form.ElementProperties.Constraints]] section of the properties panel. This removes the length restriction for the textarea. The image is saved as a base64 string which may be long.
20 {{/info}}
21
22 == Working with the signature image ==
23
24 When you open a form record in the inbox, the signature shows up as an image, exactly as drawn by the user.
25
26 Internally, the signature is encoded as a base64 string and saved in the textarea.
27
28 When you want to add the signature to a PDF document via an action of type [[PDF (Fill)>>doc:Formcycle.Designer.Workflow.Actions.FillPdfDocument.WebHome]], you can use the function //b64image//. See the help page on [[preparing a PDF document>>doc:Formcycle.Designer.Workflow.Actions.FillPdfDocument.PreparationPDF]] for further details.