Signature field

The Quform WordPress v2 documentation is not yet finished. Please post on the forums if you have any questions in the mean time.

Click here to visit the complete documentation for Quform 1.x

An example of the signature field

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. You can use FTP software such as FileZilla to transfer files to your server, see this guide for help.

Step 2

Add an HTML element to the form and enter this code as the content:

12
3
4
5
6
7
8
9
10
<div class="quform-label"><label class="quform-label-text">Sign below</label><span class="quform-required">*</span></div><div class="quform-inner quform-inner-text">
    <div class="quform-input quform-input-text quform-cf">
        <div class="signature-pad">
            <canvas width="300" height="150"></canvas>
            <div class="signature-clear">Clear</div>
            <input type="hidden" name="signature">
        </div>
    </div>
</div>
<div class="quform-label"><label class="quform-label-text">Sign below</label><span class="quform-required">*</span></div>
<div class="quform-inner quform-inner-text">
    <div class="quform-input quform-input-text quform-cf">
        <div class="signature-pad">
            <canvas width="300" height="150"></canvas>
            <div class="signature-clear">Clear</div>
            <input type="hidden" name="signature">
        </div>
    </div>
</div>
  • On line 1, replace Sign below with the desired label text

Step 3

Add a File Upload element to the form below the HTML element. This element will receive the signature image, give it a label such as “Signature”. If the signature is required, enable the Required option.

Step 4

Go to Forms → Settings → Custom CSS & JS and at the Custom CSS (All devices) field enter the following code.

1
2
3
4
5
6
7
8
9
10
11
12
1314
15
16
171819
20
.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;
}
.quform-element-1_4 .quform-spacer {    margin: 0;
    padding: 0;
}
.quform-element-1_4 .quform-label,.quform-element-1_4 .quform-input {    display: none !important;
}
.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;
}
.quform-element-1_4 .quform-spacer {
    margin: 0;
    padding: 0;
}
.quform-element-1_4 .quform-label,
.quform-element-1_4 .quform-input {
    display: none !important;
}
  • On lines 13, 17 and 18, replace 1_4 with the unique ID of the File Upload element from Step 3

At the Custom JavaScript field enter the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
jQuery(document).ready(function ($) {
    if (!window.SignaturePad) {
        return;
    }
 
    $('.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('');
        });
    });
});
jQuery(document).ready(function ($) {
    if (!window.SignaturePad) {
        return;
    }

    $('.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('');
        });
    });
});

Step 5

Add the following code to the theme functions.php file (or create a plugin for it.)

12
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1718
19
20
21
22
23
24
25
26
27
28
29
30
31
32
add_action('quform_pre_process_1', function (array $result, Quform_Form $form) {    if (isset($_POST['signature']) && Quform::isNonEmptyString($_POST['signature'])) {
        $tmpDir = Quform::getTempDir('quform/uploads');
 
        if (!is_dir($tmpDir)) {
            wp_mkdir_p($tmpDir);
        }
 
        if (is_writable($tmpDir)) {
            // Save to temp location
            $image = explode(',', stripslashes($_POST['signature']));
            $image = base64_decode($image[1]);
            $filename = tempnam($tmpDir, 'quform-signature');
            file_put_contents($filename, $image);
 
            // Save the image into $_FILES
            $_FILES['quform_1_4'] = array(                'tmp_name' => array($filename),
                'name' => array('signature-' . uniqid() . '.png'),
                'error' => array(UPLOAD_ERR_OK),
                'size' => array(filesize($filename)),
                'type' => array('image/png')
            );
        }
    }
 
    return $result;
}, 10, 2);
 
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('signature-pad', content_url('signature_pad.js'), array(), '2.3.2', true);
});
add_action('quform_pre_process_1', function (array $result, Quform_Form $form) {
    if (isset($_POST['signature']) && Quform::isNonEmptyString($_POST['signature'])) {
        $tmpDir = Quform::getTempDir('quform/uploads');

        if (!is_dir($tmpDir)) {
            wp_mkdir_p($tmpDir);
        }

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

            // Save the image into $_FILES
            $_FILES['quform_1_4'] = array(
                'tmp_name' => array($filename),
                'name' => array('signature-' . uniqid() . '.png'),
                'error' => array(UPLOAD_ERR_OK),
                'size' => array(filesize($filename)),
                'type' => array('image/png')
            );
        }
    }

    return $result;
}, 10, 2);

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('signature-pad', content_url('signature_pad.js'), array(), '2.3.2', true);
});
  • On line 1, replace the number 1 with the form ID
  • On line 17, replace 1_4 with the unique ID of the File Upload element from Step 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1718
19
20
21
22
23
24
25
26
27
28
2930
31
32
33
function my_signature_field(array $result, Quform_Form $form) {
    if (isset($_POST['signature']) && Quform::isNonEmptyString($_POST['signature'])) {
        $tmpDir = Quform::getTempDir('quform/uploads');
 
        if (!is_dir($tmpDir)) {
            wp_mkdir_p($tmpDir);
        }
 
        if (is_writable($tmpDir)) {
            // Save to temp location
            $image = explode(',', stripslashes($_POST['signature']));
            $image = base64_decode($image[1]);
            $filename = tempnam($tmpDir, 'quform-signature');
            file_put_contents($filename, $image);
 
            // Save the image into $_FILES
            $_FILES['quform_1_4'] = array(                'tmp_name' => array($filename),
                'name' => array('signature-' . uniqid() . '.png'),
                'error' => array(UPLOAD_ERR_OK),
                'size' => array(filesize($filename)),
                'type' => array('image/png')
            );
        }
    }
 
    return $result;
}
add_action('quform_pre_process_1', 'my_signature_field', 10, 2); 
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('signature-pad', content_url('signature_pad.js'), array(), '2.3.2', true);
});
function my_signature_field(array $result, Quform_Form $form) {
    if (isset($_POST['signature']) && Quform::isNonEmptyString($_POST['signature'])) {
        $tmpDir = Quform::getTempDir('quform/uploads');

        if (!is_dir($tmpDir)) {
            wp_mkdir_p($tmpDir);
        }

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

            // Save the image into $_FILES
            $_FILES['quform_1_4'] = array(
                'tmp_name' => array($filename),
                'name' => array('signature-' . uniqid() . '.png'),
                'error' => array(UPLOAD_ERR_OK),
                'size' => array(filesize($filename)),
                'type' => array('image/png')
            );
        }
    }

    return $result;
}
add_action('quform_pre_process_1', 'my_signature_field', 10, 2);

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('signature-pad', content_url('signature_pad.js'), array(), '2.3.2', true);
});
  • On line 17, replace 1_4 with the unique ID of the File Upload element from Step 3
  • On line 29, replace the number 1 with the form ID

Still having trouble? Head over to the forums.

Forums