Signature field

Quform WordPressGuidesAdvancedSignature field

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

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.js file and upload it to the /wp-content/ directory on your server. You can use FTP software such as FileZilla to transfer files to your server, see this guide for help.

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, enable 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
1516
17
18
19
20
21
22
23
2425
26
27
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.js"></script><script>
jQuery(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.js"></script>
<script>
jQuery(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 15, replace every occurrence of iphorm_1_1 with the unique ID of the File Upload element from Step 2.
  • On line 24, replace the script path with the URL to the signature_pad.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.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy