Jetformbuilder custom code and DomPDF file for Signature ( Esign )

gistfile1.txt

Jetformbuilder custom code and DomPDF file for Signature ( Esign )

1. Create a Hidden field, and name the field name: signature, and CSS classname : signature-field, save and done.

2. Create your field, and then u dont need to add it to Jetformbuilder content manually, its now dynamicly by using the custom code. 
In Content field, u can just add something like that:

Hello,
Thank you for your message. Please find the friends list attached for your reference.

Best regards,

3. Last:  in Jetformbuilder Post submit action , send email, Subject, add something like that:
My form, and after you copy it and paste in to this custom code here:
$expected_subject_line = 'My form';


4. Submit button, add this classname: submit-classname

5. If you allready have the Dompdf in wp-content, u dont need to add the file there, and if you dont have it , then download the file,
upload it to wp-content as it, then extract the zip file to a folder.

DomPDF file link:
https://github.com/dompdf/dompdf/releases/download/v2.0.3/dompdf_2-0-3.zip


Here's a brief explanation:
1. Including the Dompdf Library: It checks if the Dompdf library (a PHP library for generating PDF files) is already included. 
If not, it includes the library from a specified path in the WordPress content directory.

2. Adding a Signature Field to a Form: It adds a JavaScript-based signature field to a form on a specific page (identified as '
signature'). This is done by injecting HTML and JavaScript into the page's footer. The JavaScript code uses the Signature Pad library 
to create an interactive canvas where users can draw their signature. The signature is then converted to a data URL and stored in a 
hidden input field when the form is submitted. If the signature field is empty upon form submission, an alert prompts the user to 
provide a signature.

3. Modifying Emails with a PDF Attachment: The code also includes a function to modify outgoing emails sent through WordPress's wp_mail 
function. If the email subject matches a specific Jetformbuilder subject line (in this case, 'Book car | Signature form'), it generates 
a PDF attachment using Dompdf. This PDF includes all form submission data, including the signature image. The PDF is then attached to 
the email.

4. Retrieving Form Submission Data: There's a function to retrieve data from the form submission. It filters out certain POST variables 
based on predefined patterns (like those starting with 'wp_' or 'jet_', ending with 'id', or starting with '') and includes the 
signature data if available.

Overall, this code enhances a WordPress site by allowing users to add signatures to forms and automatically attaching a PDF with form 
data, including the signature, to specific outgoing emails.



// Include the Dompdf library if it's not already included
if (!class_exists('Dompdf\Dompdf')) {
    require_once(WP_CONTENT_DIR . '/dompdf/autoload.inc.php');
}

use Dompdf\Dompdf;

// Add the signature field to the form on the 'contact' page
if (!has_action('wp_footer', 'my_custom_add_signature_field_to_contact_form')) {
    add_action('wp_footer', 'my_custom_add_signature_field_to_contact_form');
}

if (!function_exists('my_custom_add_signature_field_to_contact_form')) {
    function my_custom_add_signature_field_to_contact_form() {
        if (is_page('signature')) {
            ?>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
            <script type="text/javascript">
                jQuery(document).ready(function($) {
                    if ($('#signature-pad').length === 0) {
                        var signatureFieldHTML = `
                            <div class="signature-field">
                                <label for="signature">Signature:</label>
                                <canvas id="signature-pad" width="400" height="200"></canvas>
                                <button type="button" id="clear-button">Clear</button>
                                <input type="hidden" name="signature" id="signature">
                            </div>`;
                        
                        var submitButton = $('form .submit-classname').first();
                        submitButton.parent().before(signatureFieldHTML);

                        var canvas = document.getElementById('signature-pad');
                        var signaturePad = new SignaturePad(canvas);

                        $('#clear-button').on('click', function() {
                            signaturePad.clear();
                        });

                        $('form').on('submit', function(e) {
                            if (signaturePad.isEmpty()) {
                                e.preventDefault();
                                alert('Please provide a signature.');
                            } else {
                                $('#signature').val(signaturePad.toDataURL());
                            }
                        });
                    }
                });
            </script>
            <style>
                .signature-field {
                    text-align: left;
                    padding: 15px 0;
                }
                .signature-field label {
                    display: block;
                    margin-bottom: 5px;
                }
                #signature-pad {
                    width: auto !important;
                    height: auto !important;
                    border: 1px solid #000;
                    border-radius: 10px;
                }
                		@media only screen and (max-width: 768px) {
                #signature-pad {
                    width: 95% !important;
                    height: auto !important;
                    
}
                #clear-button {
                    background-color: #ffffff; 
                    color: #000000;
                    font-size: 12px;
                    font-weight: 400;
                    padding: 15px;
                    border: 1px solid #333333;
                    border-radius: 6px;
                    cursor: pointer;
                    display: block;
                    margin-top: 5px; 
                    margin-bottom: 5px;
                    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
                }
                #clear-button:hover {
                    background-color: #164afe; 
                    color: #ffffff;
                    border: 1px solid #164afe;
                }
            </style>
            <?php
        }
    }
}

// Add a filter to wp_mail to modify the email before sending
if (!has_filter('wp_mail', 'my_custom_attach_pdf_to_wp_mail')) {
    add_filter('wp_mail', 'my_custom_attach_pdf_to_wp_mail', 10, 1);
}

if (!function_exists('my_custom_attach_pdf_to_wp_mail')) {
    function my_custom_attach_pdf_to_wp_mail($args) {
        $expected_subject_line = 'Book car | Signature form';

        if (strpos($args['subject'], $expected_subject_line) !== false) {
            $form_data = my_custom_get_form_submission_data();

            $dompdf = new Dompdf();
            $html_content = "<h1>Submission Details</h1>";
            foreach ($form_data as $field_name => $value) {
                if ($field_name === 'signature' && !empty($value)) {
                    $html_content .= "<p>Signature:</p><img src='$value' style='max-width:100%;height:auto;'>";
                } else {
                    $html_content .= "<p><strong>" . ucfirst(str_replace('_', ' ', $field_name)) . ":</strong> " . nl2br($value) . "</p>";
                }
            }

            $dompdf->loadHtml($html_content);
            $dompdf->setPaper('A4', 'portrait');
            $dompdf->render();
            $pdf_output = $dompdf->output();
            $pdf_file_path = sys_get_temp_dir() . '/form_submission_' . time() . '.pdf';
            file_put_contents($pdf_file_path, $pdf_output);

            $args['attachments'] = array($pdf_file_path);
        }

        return $args;
    }
}

// Function to retrieve form submission data
if (!function_exists('my_custom_get_form_submission_data')) {
    function my_custom_get_form_submission_data() {
        $form_data = array();
        $excluded_patterns = array('/^wp_/', '/^jet_/', '/_id$/', '/^_/');

        foreach ($_POST as $key => $value) {
            foreach ($excluded_patterns as $pattern) {
                if (preg_match($pattern, $key)) continue 2;
            }
            $form_data[$key] = $value;
        }

        if (isset($_POST['signature'])) {
            $form_data['signature'] = $_POST['signature'];
        }

        return $form_data;
    }
}