Setup Video Guide Video
Please Follow The Steps Here
Now Click on Extension and Choose a Appscript Option
After Deploy Allow Permission After Permission Given a URL Comes Which
is Used to Access Your Web App and if You change in codes after
deployment You need to apply Changes Need Deploy Again or Manage
Deployments,
Code.js
function doGet() { return HtmlService.createHtmlOutputFromFile('//// YOUR PAGE NAME /////'); } function saveFormData(formData) { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheetByName("/// YOUR SHEET NAME ///"); var studentsData = []; for (var i = 0; i < formData.length; i += 3) { var student = [ formData[i].value, formData[i + 1].value, formData[i + 2].value ]; studentsData.push([new Date()].concat(student)); } studentsData.forEach(function(student) { sheet.appendRow(student); }); }
PASTE CODE IN STYLE TAG IN INDEX
html,body{ height: 100%; margin: 0; background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%); } .myForm{ background-color: rgba(0,0,0,0.5) !important; padding: 15px !important; border-radius: 15px !important; color: white; width : 1000px; } input{ border-radius:0 15px 15px 0 !important; } input:focus{ outline: none; box-shadow:none !important; border:1px solid #ccc !important; } .br-15{ border-radius: 15px 0 0 15px !important; } #add_more{ color: white !important; background-color: #fa8231 !important; border-radius: 15px !important; border: 0 !important; } #remove_more{ color: white !important; background-color: #fc5c65 !important; border-radius: 15px !important; border: 0 !important; display: none; } .submit_btn{ border-radius: 15px !important; background-color: #95c714 !important; border: 0 !important; }
Index.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap
/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NX
FoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2
/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<style>
</style>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<h4>Students Contact Details</h4>
</div>
<div class="card-body">
<form id="studentForm">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15">
<i class="fas fa-user-graduate"></i></span>
</div>
<input type="text" name="name" placeholder="Student Name"
class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i
class="fas fa-phone-square"></i></span>
</div>
<input type="number" name="phone" placeholder="Student Phone"
class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-at">
</i></span>
</div>
<input type="email" name="email" placeholder="Student Email"
class="form-control"/>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button class="btn btn-secondary btn-sm" id="add_more"><i
class="fas fa-plus-circle"></i> Add</button>
<button class="btn btn-secondary btn-sm" id="remove_more"><i
class="fas fa-trash-alt"></i> Remove</button>
<button class="btn btn-success btn-sm float-right submit_btn"
id="submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script>
var i = 0;
$(document).ready(function() {
$('#add_more').on('click', function() {
i++;
var html = '<div id="append_no_' + i + '" class="animated bounceInLeft">' +
'<div class="input-group mt-3">' +
'<div class="input-group-prepend">' +
'<span class="input-group-text br-15"><i class="fas fa-user-graduate">
</i></span>' +
'</div>' +
'<input type="text" name="name_' + i + '"
placeholder="Student Name" class="form-control"/>' +
'</div>' +
'<div class="input-group mt-3">' +
'<div class="input-group-prepend">' +
'<span class="input-group-text br-15"><i class="fas fa-phone-square">
</i></span>' +
'</div>' +
'<input type="text" name="phone_' + i + '" placeholder=
"Student Phone" class="form-control"/>' +
'</div>' +
'<div class="input-group mt-3">' +
'<div class="input-group-prepend">' +
'<span class="input-group-text br-15"><i class="fas fa-at"></i></span>' +
'</div>' +
'<input type="email" name="email_' + i + '" placeholder="Student Email"
class="form-control"/>' +
'</div></div>';
$('#dynamic_container').append(html);
$('#remove_more').fadeIn(function() {
$(this).show();
});
});
$('#remove_more').on('click', function() {
$('#append_no_' + i).removeClass('bounceInLeft').addClass('bounceOutRight')
.fadeOut(function() {
$(this).remove();
});
i--;
if (i == 0) {
$('#remove_more').fadeOut(function() {
$(this).hide();
});
}
});
});
$(document).ready(function() {
$('#submit_btn').on('click', function() {
// Validation for name
var name = $('input[name="name"]').val();
if (name.trim() === '') {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Please enter a valid name!',
});
return false;
}
// Validation for phone
var phone = $('input[name="phone"]').val();
if (phone.trim() === '' || !/^\d{10}$/.test(phone)) {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Please enter a valid 10-digit phone number!',
});
return false;
}
// Validation for email
var email = $('input[name="email"]').val();
if (email.trim() === '' || !/\S+@\S+\.\S+/.test(email)) {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Please enter a valid email address!',
});
return false;
}
// If all validations pass, proceed with form submission
var formData = $('#studentForm').serializeArray();
Swal.fire({
title: 'Sending Data to Server',
html: 'Please wait...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
}
});
google.script.run.withSuccessHandler(function() {
Swal.close();
Swal.fire(
'Success!',
'Data successfully saved.',
'success'
);
}).saveFormData(formData);
});
});
</script>
</body>
</html>
Terms of Use
If you want to use this Code in your posts, please don't remove the
attributes from the codes, it will not be visible on your website.
If you want to rewrite an article on this Codebox by using these codes, you
must add a Reference with visible and clickable link redirecting to our
website: https://www.rameezimdad.blogspot.com. If you rewrite without
Reference, Legal Actions will be taken.
Conclusion
This is all about to help uou to Automate Your Business. I hope you enjoy
this article. Please do share this article. And if you are facing problem in
any section or you have any question then ask us in comment box. Thank
you!