Hi! (Before I get on with my question I should mention that I know very very little about coding or java script.) … now … I have an online art portfolio through Wix. On a page I have a form made with Wix’s “Epic Form Builder” designed to let potential clients submit an application form for an art commission project. The form making process is well and good, but I need my clients to sign the application digitally. I found a video (https://youtu.be/IPYYPi91UC8) that explains how to add an E-Sign pad to the page using an html i-frame. I’ve just been introduced to Corvid and Wix-based coding. To be honest, the lady in the video really easily confused me and I felt like she was skipping important details. I managed to get the E-sign pad on the page, but now I need to store those signatures somewhere. The video tried to explain but it lost me. I understand a Wix database/datasets are a thing. I’ve got everything (print name and date above signature) except the actual application form and E-sign connected to the database. Here’s what I’m looking for: I need potential clients to be able to fill out the application, E-sign it, name and date it, and Submit all of this information into the database where I can view the application and signature and store it. I would prefer there to be a restriction where you cannot submit the application until the E-sign has been signed and submitted. I’m open to all help. Thank you!
Check this out: https://support.wix.com/en/article/adding-and-setting-up-a-signature-field-on-your-form
It looks like the way to do that is to pay for the upgrade for $4.50/month. I may just go ahead and sacrifice that payment, but for those who can’t afford that and have to stick to the free version, can someone show a way to do this with the coding?
You were watching a video from @code-queen and that video and tutorial for it is a great example for if you don’t want to use the new e-sign option in the Wix Forms app as it is available to Premium Ascend users only.
Youtube Video.
https://www.youtube.com/watch?v=IPYYPi91UC8&feature=youtu.be
Written Tutorial.
https://support.totallycodable.com/en/article/create-an-electronic-signature-with-wix-code-corvid-custom-form
Plus, using Nayeli’s version means that you can add it to your own user input form and not have to use the Wix Forms app either.
I think to be honest, it might have been more of a case that you are struggling to understand some parts of it, so this is why you should always use her written tutorial and watch her youtube video if you need more info on it.
Remember that with the video you can always stop and go back to a certain part, the same as the tutorial itself.
So you would be best to follow the links that Heath has supplied and have a read about Wix Corvid and using it so that you can get to understand it and what it can do for you.
As for the tutorial, if you follow the written one then Nayeli clearly shows you in step 5 where you add code to the page which will retrieve the image and then add it to your dataset through the setFieldValue function before saving it to your dataset and then showing a thank you strip.
Step 5: Add the Code to your Page
Now you will write a code to retrieve the image created by the HTML code to be set as the value in our dataset and then save the dataset. The code in our example looks like this:
$w.onReady(function () {
$w("#html1").onMessage((event) => {
let signStamp = event.data;
console.log(signStamp);
$w("#saveSignatureDataset").setFieldValue("signature", signStamp);
$w("#saveSignatureDataset").save()
.then(() => {
//do something after the code saves, such as redirect to another page or show a thank you message.
// In our example we collapse and expand a thank you strip.
})
.catch((err) => {
let errMsg = err;
});
});
});
So the code from Nayeli’s great example is just this…
Add an HTML (iframe) element
We will be using an HTML (iframe) element to create the signature drawing pad.
The 3rd party code for this element.
<!doctype html>
<html lang="en">
<head>
<metacharset="utf-8">
<scriptsrc="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<title>digitalSign</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
padding: 0px 0px;
background: ()
repeat scroll center center #b3b3b3;
font-family: Helvetica, Sans-Serif;
}
.signature-pad {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 10px;
width: 100%;
height: 100%;
max-width: 600px;
max-height: 200px;
border: 0px solid #e8e8e8;
background-color: #323232;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
border-radius: 4px;
padding: 2px;
}
.signature-pad::before,
.signature-pad::after {
position: absolute;
z-index: -1;
content: "";
width: 40%;
height: 10px;
bottom: 10px;
background: transparent;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}
.signature-pad::before {
left: 20px;
-webkit-transform: skew(-3deg) rotate(-3deg);
transform: skew(-3deg) rotate(-3deg);
}
.signature-pad::after {
right: 20px;
-webkit-transform: skew(3deg) rotate(3deg);
transform: skew(3deg) rotate(3deg);
}
.signature-pad--body {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid #f4f4f4;
}
.signature-pad--footer {
color: #C3C3C3;
text-align: center;
font-size: 1.2em;
margin-top: 25px;
}
.signature-pad--actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 8px;
}
.text {
font-style: bold;
font-size: 22px;
font-family: "Montserrat", "Montserrat", sans-serif;
color: #ffffff;
}
.button {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: #164EDB;
color: white;
width: 204px;
height: 40px;
border: 0px solid #164EDB;
border-radius: 38px;
align-items: center;
padding: 0px;
font-style: bold;
font-size: 15px;
font-family: "Montserrat", "Montserrat", sans-serif;
color: #ffffff;
}
.button2 {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: #EBEDEE;
color: black;
width: 204px;
height: 40px;
border: 0px solid #EBEDEE;
border-radius: 38px;
align-items: center;
padding: 0px;
font-style: bold;
font-size: 15px;
font-family: "Montserrat", "Montserrat", sans-serif;
color: #000000;
}
.button:hover {
background-color: #000000;
color: white;
}
</style>
</head>
<body>
<div>
<canvasid="signature-pad" class="signature-pad" width=750 height=200></canvas>
<divclass="signature-pad--footer">
<div class="signature-pad--actions">
<div>
<button type="button" id="save-png" class="button" data-action="save-png">Submit</button>
</div>
<div>
<button type="button" id="clear" class="button2" data-action="clear">Clear Signature</button>
</div>
</div>
</div>
</div>
</div>
<script>
var canvas = document.getElementById('signature-pad');
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
var signaturePad = newSignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});
function signStamp(data) {
var data = signaturePad.toDataURL('image/png');
window.parent.postMessage(data, "*");
signaturePad.clear();
}
document.getElementById('save-png').addEventListener('click', function () {
if(signaturePad.isEmpty()) {
return alert("Signature pad is empty.")
}
else {
signStamp();
}
});
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
</script>
</body>
</html>
Add the Code to your Page
Now you will write a code to retrieve the image created by the HTML code to be set as the value in our dataset and then save the dataset. The code in our example looks like this:
$w.onReady(function () {
$w("#html1").onMessage((event) => {
let signStamp = event.data;
console.log(signStamp);
$w("#saveSignatureDataset").setFieldValue("signature", signStamp);
$w("#saveSignatureDataset").save()
.then(() => {
//do something after the code saves, such as redirect to another page or show a thank you message.
// In our example we collapse and expand a thank you strip.
})
.catch((err) => {
let errMsg = err;
});
});
});