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! This video will share new-coder-friendly information to spice up your website. This video is for beginner, intermediate, and expert level learners.

Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

Add Elements to Editor

Create and Code the Validation Function

Create the Save Function

Create the Clear All Function

Create Database For Form

Save and Preview Results in Preview Mode

Code Snippet to follow along with the video:

Page Code

// 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();
}

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2022: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!