Signature Pad (Canvas) to Google Sheets

I’m attempting to create a form which auto populates into Google Sheets. At the moment, I am able to use <input/> to auto populate basic text fields into Google Sheets, but I now need to try to have the user write a digital signature and for that to be put into Google Sheets too – presumably by using toDataURL and then having that be sent to the Google Sheet?

But… I have very little experience with anything like this and have absolutely no idea how to achieve this!

I have taken code from various sources and videos so far to get to the stage I’m at, but now it is getting messy.

Some of the content on the page is somewhat sensitive, so I’ll post whatever code I can here.

This is some of the HTML currently being used – sorry that it is a little messy! (Some of it might not even have use, I’ve been messing around with it so much that I’m lost at this point!)

    <h4>Billing Address</h4>
        <input type="text" name="address-number" placeholder="House/Apartment Number">
            <input type="text" name="address-street" placeholder="Street Name">
        <input type="text" name="address-town" placeholder="Town/City">
        <input type="text" name="address-county" placeholder="County">
            <input type="text" name="address-postcode" placeholder="Postcode">
                    
                    
    <div class="flex-row">
                <div class="wrapper">
                     <canvas id="signature-pad" width="400" height="200"></canvas>
                </div>
                <div>
                     <input type="hidden" name="signature-pad" />
                </div>
                     <div class="clear-btn">
                     <button id="clear"><span> Clear </span></button>
                </div>
                </div> 
                
                 <div>
                
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.5/signature_pad.min.js" integrity="sha512-kw/nRM/BMR2XGArXnOoxKOO5VBHLdITAW00aG8qK4zBzcLVZ4nzg7/oYCaoiwc8U9zrnsO9UHqpyljJ8+iqYiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

   <input type="submit" value="Submit" id="submit">
</div>
</form>

And this is the Javascript currently being used – it’s even more messy and I’m sure a lot of it is doing nothing. Apologies once again.

const form = document.forms['contact-form']


form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, { method: 'POST', body: new FormData(form)})
  .then(response => alert("Thank you! your form is submitted successfully." ))
  .then(() => { window.location.reload(); })
  .catch(error => console.error('Error!', error.message))
})

 
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 = new SignaturePad(canvas, {
        backgroundColor: 'rgb(250,250,250)'
       });

       document.getElementById("clear").addEventListener('click', function(){
        signaturePad.clear();
       });
       
       
function onSubmit(e) {
    console.log({
        'signature-pad' : dataURL,
    });
}

And this is all connected up to Google Sheets with some kind of script – I honestly have no idea how that is working at all. It’s all a bit dark magic to me. If I need to provide any more code or info then let me know.

Fundamentally, I’d like to be able to get the signature pad to out put the signature image in some way which I can then have auto populate into Google Sheets when the user submits.

Thanks so much for any help with this and to anyone who can decipher my descent into madness. It is VERY much appreciated!

I’ve tried many different variations of code, most of which I have since lost. Apologies. Most of the time, I would half-expect it to work (with little confidence) and it simply would not. The Google Sheet would auto populate as usual, but without any signature section filled. I have attempted to alter the onSubmit section to generate a URL, though I don’t think I did it correctly. And I have tried things such as having other “var” segments at the beginning of the code such as with this example: Create an HTML form with Digital / Electronic Signature using php – but I’ve found that those “var”s at the beginning seem to break the signature pad in WordPress and it will not allow a user to even draw in the box. As soon as I remove them, the signature pad works again.

I’ve tried using both the code I currently have, and the one linked but neither work. The one I currently have allows me to use the pad properly but I cannot work out how to generate the URL and send it to Google Sheets as the other code might allow. However the linked code will not allow the user to use the signature pad. I am unsure as to why and I have tried merging the code in different places and taking bits from each, but to no success, everytime I fail due to it not being able to be drawn in, or not knowing how to send to URL to Google Sheets.

Thank you for any help!