Custom Form With Signature Capture

नमस्‍कार दोस्‍तों,

इस ब्‍लॉग में हम आपको बताये की किस प्रकार ऑनलाईन फाॅर्म में आवेदक के हस्‍ताक्षर कैसे केपचर करते है ा

Learn to Online Form to Signature capture by Web app Script

Practical

Please Follow following Step

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :-Copy Custom Online Form With Signature Google Sheet

Step 3 :- Click to Google Sheet>> Extensions Click >> App Script>>

Step 4 :-then Create three file in App Script File

backend.gs

index.html

vuejs.html

Step 5:- Copy of backend.gs File below file and paste to Script Editor

backend.gs

function doGet(e) { const SETTINGS = { APP_NAME: "Custom Form with Signature", SHEET_NAME: { RESPONSES: "Responses" }, HEADERS: [ { key: "timestamp", value: "Timestamp" }, { key: "id", value: "ID" }, { key: "name", value: "Name" }, { key: "email", value: "Email" }, { key: "phone", value: "Mobile No" }, { key: "gender", value: "Gender" }, { key: "city", value: "City" }, { key: "date", value: "Date" }, { key: "signature", value: "Signature" }, { key: "Remarks", value: "Remarks" }, ] } function link(filename) { return HtmlService.createTemplateFromFile(filename).evaluate().getContent() } function doGet() { return HtmlService.createTemplateFromFile("index.html") .evaluate() .setTitle(SETTINGS.APP_NAME) .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) } function submit(data) { data = JSON.parse(data) const headers = SETTINGS.HEADERS.map(({value}) => value) const id = Utilities.getUuid() const signatures = [] const values = SETTINGS.HEADERS.map(({key}, index) => { if (key === "id") return id if (key === "timestamp") return new Date() if (!key in data) return null if (Array.isArray(data[key])) return data[key].join(",") if (data[key].startsWith("data:image")) { signatures.push(index) return SpreadsheetApp.newCellImage().setSourceUrl(data[key]).build().toBuilder() } return data[key] }) const ws = SpreadsheetApp.getActive().getSheetByName(SETTINGS.SHEET_NAME.RESPONSES) || SpreadsheetApp.getActive().insertSheet(SETTINGS.SHEET_NAME.RESPONSES) ws.getRange(1,1, 1, headers.length).setValues([headers]) const lastRow = ws.getLastRow() ws.getRange(lastRow + 1, 1, 1, values.length).setValues([values]) signatures.forEach(index => { ws.getRange(lastRow + 1, index + 1).setValue(values[index]) }) return JSON.stringify({success: true, message: `Your Form Submit submission! ID: ${id}`}) }

Step 6:- Copy of index.html File below file and paste to Script Editor

index.html

<!DOCTYPE html> <html> <head> <base target="_top"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-main> <v-container> <v-form ref="form" @submit.prevent="submit" :disabled="loading"> <v-card :loading="loading" outlined> <v-img class="white--text align-end" height="100px" src="https://source.unsplash.com/random"> <v-card-title>{{ title }}</v-card-title> <v-card-subtitle v-if="subtitle">{{ subtitle }}</v-card-subtitle> </v-img> <v-card-text> <v-row> <v-col cols="12" sm="12" md="6" lg="4" xl="3"> <my-input :item="form.name"></my-input> </v-col> <v-col cols="12" sm="12" md="6" lg="3" xl="3"> <my-input :item="form.email"></my-input> </v-col> <v-col cols="12" sm="12" md="6" lg="3" xl="3"> <my-input :item="form.phone"></my-input> </v-col> <v-col cols="12" sm="12" md="6" lg="2" xl="3"> <my-input :item="form.gender"></my-input> </v-col> <v-col cols="12" sm="12" md="6" lg="2" xl="3"> <my-input :item="form.city"></my-input> </v-col> <v-col cols="12" sm="12" md="6" lg="3" xl="3"> <my-input :item="form.date"></my-input> </v-col> <v-col cols="12" sm="12" md="6" lg="4" xl="3"> <my-input :item="form.signature"></my-input> </v-col> <v-col cols="12" sm="12" md="6" lg="3" xl="3"> <my-input :item="form.Remarks"></my-input> </v-col> <v-col cols="12"> <v-btn type="submit" color="primary" :disabled="loading" large depressed>Submit</v-btn> </v-col> </v-row> </v-card-text> </v-form> <v-snackbar v-model="snackbar.show" :color="snackbar.color" bottom> {{ snackbar.message }} <template v-slot:action="{ attrs }"> <v-btn color="white" text v-bind="attrs" :timeout="snackbar.timeout" @click="snackbar.show = false"> <v-icon>mdi-close</v-icon> </v-btn> </template> </v-snackbar> </v-container> </v-main> </v-app> </div> <?!= link("vuejs.html"); ?> </body> </html>

Step 7:- Copy of vuejs.html File below file and paste to Script Editor

vuejs.html

Step 9:- for More Details See Video

2 Comments

TODATHJuly 21, 2022 at 1:50 PM
Step 1 :- Click to Google Sheet Copy With Source Code
link dead!! please share Google Sheet Copy With Source Code
ABDOSHOctober 1, 2022 at 1:00 AM
Very wonderful work sir.. can you show how we can add dependent drop-down for example (countries : Cities) in this form.. i mean the code in vue.js.. if possible you can make a video for us.. many thanks Sir

Custom Form With Signature Capture

Step 5:- Copy of backend.gs File below file and paste to Script Editor

Step 6:- Copy of index.html File below file and paste to Script Editor

Step 7:- Copy of vuejs.html File below file and paste to Script Editor

2 Comments

Donation and Support

Contact Form