Signature field

Quform WordPress v2 DocumentationGuidesAdvancedSignature field

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<span class="quform-required">*</span></label></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<span class="quform-required">*</span></label></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(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(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.min.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.min.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.min.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.min.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
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy