Many Google apps, one platform in the cloud

Increase the power of your favorite Google apps — like Calendar, Docs, Drive, Gmail, Sheets, and Slides.

Apps Script lets you do more with Google, all on a modern JavaScript platform in the cloud. Build solutions to boost your collaboration and productivity.

https://developers.google.com/apps-script

Drive https://drive.google.com/drive/my-drive

Permissions remove https://myaccount.google.com/permissions

const myForm = document.querySelector('#signup');
const output = document.querySelector('.output');
output.style.display = 'none';
const url = 'https://script.google.com/macros/s/AKfycbzGo****XAnGx9m7A76nI0SM/exec';
myForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const ele = myForm.elements;
    //console.log(ele);
    //console.log('Sending Data');
    const holder = {};
    const err = [];
    for (let i = 0; i < ele.length; i++) {
        //console.log(ele[i]);
        const el = ele[i];
        let val = true;
        if (el.getAttribute('type') == 'submit') {
            val = false;
        };
        if (el.name == 'user') {
            if (el.value.length < 5) {
                val = false;
                err.push('Name needs to be 5 or more');
            }
        }
        if (el.name == 'email') {
            let check = validateEmail(el.value);
            console.log(check);
            if (!check) {
                val = false;
                err.push('Not valid email');
            }
        }
        if (val) {
            holder[el.name] = el.value;
        }
    }
    if (err.length > 0) {
        output.innerHTML = '';
        output.style.display = 'block';
        err.forEach(error => {
            output.innerHTML += '<div> ' + error + '</div>';
        })
    } else {
        //form submit
        console.log(holder);
        output.style.display = 'block';
        output.innerHTML = 'Sending...'
        fetch(url, {
                method: 'POST',
                body: JSON.stringify(holder)
            })
            .then(rep => rep.json())
            .then(data => {
                console.log(data);
                clearForm();
            })
    }
})

function clearForm() {
    const ele = myForm.elements;
    output.style.display = 'none';
    output.innerHTML = '';
    for (let i = 0; i < ele.length; i++) {
        if (ele[i].getAttribute('type') != 'submit') {
            ele[i].value = '';
        }
    }
}

function validateEmail(email) {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
}

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript API</title>
    <style>
        .container {
            width: 80%;
            margin: auto;
            background-color: #ddd;
            padding: 15px;
            border-radius: 25px;
        }

        input,
        textarea {
            display: block;
            width: 100%;
            margin: 10px 0;
            font-size: 1.2em;
            border-radius: 5px;
            padding: 5px;
        }

        input[type="submit"] {
            background-color: black;
            color: white;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            opacity: 0.8;
        }

        .output {
            background-color: white;
            padding: 25px;
            text-align: center;
            border: 1px solid red;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

        }

        .output div {
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <form id="signup">
            <div>
                <input type="text" name="user" value="Laurence" required>
            </div>
            <div>
                <input type="text" name="email" value="gappscourses@gmail.com" required> </div>
            <div>
                <textarea name="message">Hi How are You</textarea> </div>
            <div>
                <input type="submit" value="Send Message"> </div>
        </form>
        <div class="output"></div>
    </div>
    <script src="code7.js"></script>
</body>

</html>
function doGet(e){
  Logger.log('hello');
  const obj = {
    parameter : 'test'
  }
  const output = JSON.stringify(e);
  console.log(output);
  const test = ContentService.createTextOutput(output);
  return test;
  //return ContentService.createTextOutput(JSON.stringify(e));
}

function doPost(e){
  const json = JSON.parse(e.postData.contents);
  const email = json.email;
  const user = json.user;
  const message = json.message;
  let valid = true;
  if(!validateEmail(email)){
    valid = false;
  }
  const id = '1LH******6phAOyeb8yEbr7HlNS8';
  const ss = SpreadsheetApp.openById(id);
  const sheet = ss.getSheetByName('Sheet1');
  //sheet.appendRow([e.postData.contents]);
  if(valid){
    mailer(email,user,message);
    sheet.appendRow([email,user,message,'Message Sent']);
  }
  sheet.appendRow([email,user,message,valid]);
  return ContentService.createTextOutput(JSON.stringify(json));
}
function mailer(email,user,message){
  MailApp.sendEmail({
    to: 'gappscourses@gmail.com',
    subject : 'From Web Form',
    htmlBody: 'From Name : ' + user + '<br>Email  '+ email + '<br>Message ' + message
  });
}
function tester(){
  mailer('test','user','message');
}

function validateEmail(email){
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
}