Create Custom Electronic Signature Form using Velo

Create an electronic signature on your website using Wix Code a.k.a. Velo using a custom form. No 3rd party plugins or add ons needed. Save time and money to simply create and capture an electronic signature!

---

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world

import wixData from 'wix-data';

$w.onReady(function () {

});

function validation() {
    let validationMessage = "";
    if ($w('#input1').valid && $w("#input2").valid && $w('#input3').valid && $w('#input4').valid && $w('#signatureInput1').valid) {
        saveEmployeeInfo();
    } else {
        if (!$w('#input1').valid) {
            validationMessage += "Please enter in a first name.\n";
        }
        if (!$w('#input2').valid) {
            validationMessage += "Please enter in a last name.\n";
        }
        if (!$w('#input3').valid) {
            validationMessage += "Please enter in an email.\n";
        }
        if (!$w('#input4').valid) {
            validationMessage += "Please enter in an address.\n";
        }
        if (!$w('#signatureInput1').valid) {
            validationMessage += "Please sign your name.\n";
        }
        $w('#text81').text = validationMessage;
        $w('#text81').show().then(() => {
            $w('#input1, #input2, #input3, #input4, #signatureInput1').updateValidityIndication();
        })
    }
}

function saveEmployeeInfo() {
    $w('#button1').disable();

    let theSignature = $w('#signatureInput1').value;

    let toInsert = {
        "firstName": $w('#input1').value,
        "lastName": $w('#input2').value,
        "email": $w('#input3').value,
        "address": $w('#input4').value,
        "signature": theSignature
    }

    wixData.insert("employeeform", toInsert)
        .then((results) => {
            let item = results;
            console.log(item);
            $w('#text81').text = "Your signature and information was sent in. Thank you! We will be with you shortly.";
            $w('#text81').show().then(() => {
                setTimeout(() => {
                    $w('#text81').hide();
                }, 5000);
            }).catch((err) => {
                let errorMsg = err;
            })
        })
}

function clearAllElements(){
    $w('#input1, #input2, #input3, #input4, #signatureInput1').value = null;
    $w('#input1, #input2, #input3, #input4, #signatureInput1').resetValidityIndication();
}

export function button2_click(event){
    validation();
}