Signature field

signature

This guide will show you how to make a signature field using this Signature Pad script. This type of field is not yet built into the Quform plugin but will be added in a future version.

Step 1

Download the signature_pad.min.js file and upload it to the /wp-content/ directory on your server.

Step 2

Add a File Upload element to the form. This element will receive the signature image, give it a label such as “Signature”. If the signature is required, tick the Required option. Go to the element Settings → Advanced tab and make a note of the Unique ID.

Just above the Unique ID section, add a new style for Outer wrapper and enter this CSS to hide this field:

1
display: none;
display: none;

Step 3

Add an HTML element to the form (from the “More” tab where you add elements), in the Settings tick Enable element wrapper and enter this code as the content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1718
19
20
21
22
23
24
25
2627
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<label>Sign below <span class="iphorm-required">(required)</span></label>
<style>
    .signature-pad canvas {
        margin-top: 5px;
        border: 1px solid #ccc;
    }
    .signature-clear {
        width: 300px;
        text-align: center;
        margin-top: -8px;
        font-size: 11px;
        color: #737373;
        cursor: pointer;
    }
    .iphorm_1_1-element-wrap label, .iphorm_1_1-element-wrap .iphorm-input-wrap, .iphorm_1_1-element-wrap .iphorm-swfupload, .iphorm_1_1-element-wrap .iphorm-description {
        display: none !important;
    }</style>
<div class="signature-pad">
    <canvas width="300" height="150"></canvas>
    <div class="signature-clear">Clear</div>
    <input type="hidden" name="signature">
</div>
<script src="http://www.example.com/wp-content/signature_pad.min.js"></script>
<script>
jQuery(document).ready(function ($) {    $('.signature-pad').each(function () {
        var $root = $(this),
            $clear = $root.find('.signature-clear'),
            canvas = $root.find('canvas')[0],
            $output = $root.find('input[name="signature"]'),
            signaturePad;
 
        signaturePad = new SignaturePad(canvas, {
            minWidth: 0.25,
            maxWidth: 2,
            onEnd: function () {
                $output.val(signaturePad.toDataURL());
            }
        });
 
        $clear.click(function() {
            signaturePad.clear();
            $output.val('');
        });
    });
});
</script>
<label>Sign below <span class="iphorm-required">(required)</span></label>
<style>
    .signature-pad canvas {
        margin-top: 5px;
        border: 1px solid #ccc;
    }
    .signature-clear {
        width: 300px;
        text-align: center;
        margin-top: -8px;
        font-size: 11px;
        color: #737373;
        cursor: pointer;
    }
    .iphorm_1_1-element-wrap label, .iphorm_1_1-element-wrap .iphorm-input-wrap, .iphorm_1_1-element-wrap .iphorm-swfupload, .iphorm_1_1-element-wrap .iphorm-description {
        display: none !important;
    }
</style>
<div class="signature-pad">
    <canvas width="300" height="150"></canvas>
    <div class="signature-clear">Clear</div>
    <input type="hidden" name="signature">
</div>
<script src="http://www.example.com/wp-content/signature_pad.min.js"></script>
<script>
jQuery(document).ready(function ($) {
    $('.signature-pad').each(function () {
        var $root = $(this),
            $clear = $root.find('.signature-clear'),
            canvas = $root.find('canvas')[0],
            $output = $root.find('input[name="signature"]'),
            signaturePad;

        signaturePad = new SignaturePad(canvas, {
            minWidth: 0.25,
            maxWidth: 2,
            onEnd: function () {
                $output.val(signaturePad.toDataURL());
            }
        });

        $clear.click(function() {
            signaturePad.clear();
            $output.val('');
        });
    });
});
</script>
  • On line 17, replace every occurrence of iphorm_1_1 with the unique ID of the File Upload element from Step 2.
  • On line 26, replace the script path with the URL to the signature_pad.min.js file you uploaded to your server in Step 1.

Step 4

Add the following code to the wp-content/themes/YOUR_THEME/functions.php file (or create a plugin for it).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2021
22
23
24
25
26
27
28
29
30
31
function my_save_signature($form)
{
    if (isset($_POST['signature']) && is_string($_POST['signature']) && strlen($_POST['signature'])) {
        $tmpDir = untrailingslashit(iphorm_get_temp_dir());
 
        if (is_writable($tmpDir)) {
            $iphormTmpDir = $tmpDir . '/iphorm';
            if (!is_dir($iphormTmpDir)) {
                wp_mkdir_p($iphormTmpDir);
            }
 
            if (is_writable($iphormTmpDir)) {
                // Save to temp location
                $image = explode(',', stripslashes($_POST['signature']));
                $image = base64_decode($image[1]);
                $filename = tempnam($iphormTmpDir, 'iphorm-signature');
                file_put_contents($filename, $image);
 
                // Save the image into $_FILES
                $_FILES['iphorm_1_1'] = array(                    'tmp_name' => $filename,
                    'name' => 'signature-' . uniqid() . '.png',
                    'error' => UPLOAD_ERR_OK,
                    'size' => filesize($filename),
                    'type' => 'image/png'
                );
            }
        }
    }
}
add_action('iphorm_pre_process_1', 'my_save_signature');
function my_save_signature($form)
{
    if (isset($_POST['signature']) && is_string($_POST['signature']) && strlen($_POST['signature'])) {
        $tmpDir = untrailingslashit(iphorm_get_temp_dir());

        if (is_writable($tmpDir)) {
            $iphormTmpDir = $tmpDir . '/iphorm';
            if (!is_dir($iphormTmpDir)) {
                wp_mkdir_p($iphormTmpDir);
            }

            if (is_writable($iphormTmpDir)) {
                // Save to temp location
                $image = explode(',', stripslashes($_POST['signature']));
                $image = base64_decode($image[1]);
                $filename = tempnam($iphormTmpDir, 'iphorm-signature');
                file_put_contents($filename, $image);

                // Save the image into $_FILES
                $_FILES['iphorm_1_1'] = array(
                    'tmp_name' => $filename,
                    'name' => 'signature-' . uniqid() . '.png',
                    'error' => UPLOAD_ERR_OK,
                    'size' => filesize($filename),
                    'type' => 'image/png'
                );
            }
        }
    }
}
add_action('iphorm_pre_process_1', 'my_save_signature');
  • On line 20, replace iphorm_1_1 with the unique ID of the File Upload element from Step 2.
  • On line 31, replace the number 1 with the form ID.

Still having trouble? Head over to the forums.

Forums