Search This Blog

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">

    <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>
        form {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        form * {
            width: 100%;
            margin-top: 2px;

        <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">
        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) => {
            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"


AppsScript Code

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

No comments:

Post a Comment