How can I use the signature widget in CFv5?

Posted Apr 23, 2015 19:59

ChronoForms v5 comes with a Signature Widget that you can use to add signature capture to your forms.

For ChronoForms v4 please see this FAQ which uses a different signature package.

There are three steps to using the Signature Widget in your form:

a. In the Designer tab open the Widgets element group and drag a Signature Pad element into your form. Open the settings and configure your pad.

Label: sets the label text
Wrapper ID: sets the id of the wrapping code e.g. signature
Width & Height: set the pad size in pixels
Clear text: sets the label text for the Clear button to remove a signature
Field name: sets the name for the submitted data.

b. In the Setup tab open the Utilities action group and drag a Load Signature Pad action into the On Load event of your form. Move it up before the HTML (Render form) action. Open the settings and check that the action is enabled.

Save your form and test.

c. When the form submits the signature is in the form of a long text string. If you simply need to save it as a record then you can save this to the database in a column of Type TEXT of BLOB.

The long string is actually a Data URI and will display as an image in some browsers and emails. To show it in your form Thank You page you can add this HTML (:

<img src='{signature}' alt='signature' />

Adding CSS to the signature box

You can use CSS like this in a Load CSS action in the On Load event of your form. The example here adds a border round the box.

.gbs3 canvas {
    border: 1px solid silver;
}

Saving the signature as an image

If you want to show the signature as an image then you need to do a little more processing. Add a Custom Code action to the form On Submit event and add code like this:

<?php
$data_pieces = explode(",", $form->data['signature']);
$encoded_image = $data_pieces[1];
$decoded_image = base64_decode($encoded_image);

// set the folder where the images will be saved
$folder = 'components/com_chronoforms5/uploads/'.$form->form['Form']['title'].'/';
$path = JPATH_SITE.'/'.$folder;
$url = JURI::root().$folder;
// sets a file name using a date-time prefix to make sure it is unique
$sig_name = date('Ymd-his').'_signature.png';
file_put_contents( $path.$sig_name, $decoded_image);

// add the file info to the form data
$form->data['signature'] = $sig_name;
$form->files['signature']['name'] = $sig_name;
$form->files['signature']['link'] = $url.$sig_name;
$form->files['signature']['path'] = $path.$sig_name;
// display the image if needed
echo "<img src='{$url}{$sig_name}' />";
// to add the image to an email add this line
// and put {sig_img} in the email template 
$form->data['sig_img'] = "<img src='{$url}{$sig_name}' />";
?>

Notes:

The 'signature' in the first line - and possibly also the later entries needs to be replaced by the Field name you gave the signature pad in the Signature Pad element in the Designer tab.

The folder path here is set to /components/com_chronoforms5/uploads/your_form_name/ you can change this if you want to save the signature images in a different location.

For more information on the Signature Pad jQuery plug-in see here on GitHub.

Saving the image in CFv6

Because CFv6 uses a different syntax for saving data the code for saving the signature as an image has changed.

$data_pieces = explode(",", $this->data[signature]);
$encoded_image = $data_pieces[1];
$decoded_image = base64_decode($encoded_image);

// set the folder where the images will be saved
$folder = 'images/signatures/';
$path = JPATH_SITE.'/'.$folder;
$url = JURI::root().$folder;
// sets a file name using a date-time prefix to make sure it is unique
$sig_name = date('Ymd-his').'_signature.png';
file_put_contents( $path.$sig_name, $decoded_image);

// add the file info into the form data
return array(
  'url' => $url.$sig_name,
  'path' => $path.$sig_name
);

Then you can use {var:php_.path} in the email body or to display on the site and {var:php_.url} in the Attachments list of the Email action. (Replacing php_ with the name of your php action.)

FAQs