Would I be able to setup a credit application form with webinone? There is no signature field yet is there and would it be secure? Does anyone know what’s the is best way to do this?
Also want to integrate a form with this for bookings
They are saying on their end they will build a custom API and seems pricey
Any idea if there would be a cheaper option
Hey Luke, don’t know if this will help in any way, but I have used https://snapforms.com.au/ a good way to manage complex forms, especially where signatures or conditional info, takes payments and more. Aussie support is great. Used by Medibank, AFT, Victoria State Government. Form created on Snap Forms console, you embed it with JavaScript on your website. Might not be the answer, but it’s a fab platform. I have a dentist and racetrack using it. Free 30 day trial Free Trial - Snapforms. Has Booking Forms too.
@luke you can use signature_pad.js to add a signature. I have done this with a few forms. I have it save the signature in base64. This way, I don’t have to secure and deal with an image separately.
Here is some code to get you started.
<style>
canvas {
border: 2px solid #e5e7eb;
border-radius: 0.5rem;
background-color: #f9fafb;
}
.signature-pad {
width: 100%;
max-width: 600px;
height: 250px;
margin-bottom: 1rem; /
}
.signature-clear-button {
background-color: #dc2626;
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
cursor: pointer;
font-size: 0.875rem;
transition: background-color 0.3s ease;
margin-top: 0.5rem;
}
.signature-clear-button:hover {
background-color: #b91c1c;
}
.submit-button {
background-color: #3b82f6; /* Tailwind bg-blue-500 */
color: #ffffff; /* Tailwind text-white */
padding: 0.75rem 1.5rem; /* Tailwind px-6 py-3 */
border-radius: 0.375rem; /* Tailwind rounded-md */
cursor: pointer;
font-size: 1rem; /* Tailwind text-base */
transition: background-color 0.3s ease; /* Smooth transition */
margin-top: 1rem;
width: 100%;
max-width: 400px;
text-align: center;
}
.submit-button:hover {
background-color: #2563eb; /* Tailwind bg-blue-700 */
}
</style>
<form id="signup-form" action="/forms/cases.ashx?form=test_signature&isSubscription={{this.isSubscription}}" name="test_signature" method="post" enctype="multipart/form-data">
<label for="Email">Email</label>
<input type="email" id="Email" name="Email" required>
<label for="FirstName">First Name</label>
<input type="text" id="FirstName" name="FirstName" >
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" >
<label for="Signature">Signature</label><br>
<canvas id="signature-pad" class="signature-pad"></canvas><br>
<button type="button" class="signature-clear-button" id="clear-signature">Clear Signature</button><br>
<input type="hidden" id="Signature" name="Signature" >
<script>
'use strict';grecaptcha.ready(function(){function e(a){grecaptcha.execute("{{this.recaptcha_sitekey}}",{action:'general_form_{{this.Alias | replace: "-","_"}}'}).then(function(b){document.querySelector(".g-recaptcha-response-v3-{{this.Alias}}").value=b;a&&a()})}window.customFormSubmit=new Event("customFormSubmit");let a=document.querySelector(".g-recaptcha-response-v3-{{this.Alias}}").closest("form");if(null!=a){let d=!0,b=0,c=document.getElementById("paymentFields_"+a.getAttribute("name"));a.onsubmit = function(f){f.preventDefault(); if (!a.classList.contains("form-validation-error")){if(d)return b++,d=!1,a.CMS_CustomSubmit=new Event("CMS_CustomSubmit",{cancelable:!0}),e(function(){c?"true"===c.dataset.paymentEnabled?(a.dispatchEvent(window.customFormSubmit),b=0,d=!0):a.dispatchEvent(window.customFormSubmit):(a.CMS_CustomSubmit.data={form:a},a.dispatchEvent(a.CMS_CustomSubmit))}),!1;0<b&&b++;if(1<b)return alert("Form submission is in progress."),!1}};c||a.addEventListener("CMS_CustomSubmit",function(c){ c.defaultPrevented ? (b = 0, d = !0) : a.submit()})}else e()});
</script>
<input type="hidden" class="g-recaptcha-response-v3-{{this.Alias}}" name="g-recaptcha-response-v3">
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script>
const canvas = document.getElementById('signature-pad');
const clearButton = document.getElementById('clear-signature');
const form = document.getElementById('signup-form');
const signatureInput = document.getElementById('Signature');
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(249, 250, 251, 0)',
penColor: 'rgb(55, 65, 81)'
});
function resizeCanvas() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
clearButton.addEventListener('click', (e) => {
e.preventDefault();
signaturePad.clear();
signatureInput.value = '';
});
form.addEventListener('submit', (event) => {
event.preventDefault();
if (signaturePad.isEmpty()) {
alert('Please provide a signature.');
return;
}
const firstName = document.getElementById('FirstName').value;
const lastName = document.getElementById('LastName').value;
const email = document.getElementById('Email').value;
const signatureData = signaturePad.toDataURL();
signatureInput.value = signatureData;
});
</script>
Ok thank you I did see this one and was wondering if anyone had used them, will check them out thanks
I did see your post a few years back and thought I might try it, wasn’t sure on the legal side of things as their customers are filling out a credit application form though. Will check it out thanks