Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript | HTML Form to Email

Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript. Hello, in today's video i will show you how to create a working contact form using HTML, CSS, JavaScript and AppScript.

HTML, CSS , JavaScript Code


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
        form {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        form * {
            width: 100%;
            margin-top: 2px;
        }
    </style>
</head>

<body>
    <form>
        <h2>Contact Us</h2>
        <span class="message"></span>
        <input type="text" name="name" placeholder='Name..'>
        <input type="email" name="email" placeholder='Email..'>
        <textarea name="message" cols="30" rows="10" placeholder='Message..'></textarea>
        <input type="submit" class="submit">
    </form>
    <script>
        let url = "Api End point url";
        let form = document.querySelector("form");
        let submit = document.querySelector(".submit");
        let message = document.querySelector(".message");
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            submit.value = "submitting.."
            fetch(url, {
                    method: "POST",
                    body: new FormData(form)
                })
                .then(res => res.text())
                .then(data => {
                    message.innerHTML = data;
                    submit.value = "submit"

                })
                .catch(err => {
                    message.innerHTML = err;
                    submit.value = "submit"
                })
        })
    </script>
</body>

</html>

AppsScript Code


let sheet = SpreadsheetApp.openByUrl("YOUR_SPREADSHEET_URL")
function doPost(e){
  MailApp.sendEmail("receipent email address",`${e.parameters.name} from new contact form!`,`${e.parameters.message}\n${e.parameters.email}`)
  return ContentService.createTextOutput("Message has been Sent!")
}

Useful Links

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)