How To Make Working Email Subscription Form With Google Sheets Using HTML CSS & JavaScript

 




https://github.com/jamiewilson/form-to-google-sheets
https://docs.google.com/spreadsheets/u/0/

create index.html file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="content">
<span>Coming Soon</span>
<h1>Our Brand new website<br/> is on it's way</h1>
<span>Subscribe for more details</span>

<form class="inputfield" name="submit-to-google-sheet">
<input type="text" name="email" placeholder="Your email id">
<button type="submit" class="btn">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</button>
</form>
<span class="subscriptiontext">Thank your for subscribing</span>
</div>
</div>
</body>
<script src="script.js"></script>
</html>



create style.css file

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

@font-face {
font-family: font1;
src: url("./NBInternationalProBoo.ttf");
}

@font-face {
font-family: font2;
src: url("./Rejouice-Headline.ttf");
}

.container{
width: 100%;
height: 100vh;
background-image:
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url("https://images.unsplash.com/photo-1723984834599-5357b87f727c?q=80&w=1529&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
object-fit: cover;
color: white;
padding: 10px 10%;
}

.content{
margin-top: 30px;
font-family: sans-serif;
}

.content span{
letter-spacing: 3px;
margin: 20px 0;
font-family: font1;
}

.content h1{
font-size: 40px;
font-family: font2;
letter-spacing: 3px;
margin: 20px 0;
line-height: 4rem;
}

.inputfield{
display: flex;
width: 300px;
margin: 30px 0 10px 0;
align-items: center;
justify-content: start;
}

.inputfield input{
border: none;
width: 80%;
outline: none;
font-family: font1;
padding: 0.9rem 2rem 0.9rem 1rem;
font-size: 14px;
}

.inputfield input::placeholder{
text-transform: capitalize;
font-weight: 600;
letter-spacing: 2px;
font-family: font1;
color: gray;
}

.btn{
background-color: blueviolet;
color: white;
padding: 0.9rem 2rem 0.9rem 1rem;
cursor: pointer;
outline: none;
border: none;
}

.btn i{
width: 100%;
margin-left: 10px;
}

.subscriptiontext{
color: rebeccapurple;
font-weight: normal;
background-color: #fecaca;
padding: 0.3rem 2rem;
border-radius: 10px;
margin-top: 20px;
visibility: hidden;
}


script.js file

let subscriptiontext = document.querySelector(".subscriptiontext");
const scriptURL = 'https://script.google.com/macros/s/AKfycbx56V2waasD9oUREfpWSXwBROLMSlATafn5I1pWbzNYGAfICFyXLxkG6m-AkEmD6a9W/exec'
const form = document.forms['submit-to-google-sheet']

form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
if(response){
setTimeout(()=>{
subscriptiontext.style.visibility = "visible";
},3000)

setTimeout(()=>{
subscriptiontext.style.visibility = "hidden";
},5000)
// subscriptiontext.innerHTML = `<h2>Thank you for subsription</h2>`;
// setTimeout(() => {
// subscriptiontext.innerHTML = "";
// }, 3000)
}
}
)
.catch(error => console.error('Error!', error.message))
})



Add these code in appscript google sheet 

// Original code from https://github.com/jamiewilson/form-to-google-sheets
// Updated for 2021 and ES6 standards

const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()

function initialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}


Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more

Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

Image
  Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic. File Structure: index.html - The main structure of the app style.css - Custom styles (if needed) script.js - JavaScript logic for the app You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles. Features Breakdown: Login/Logout : The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen. To-Do Management : The user can add, edit, and delete items from the to-do list. Local Storage : All data is stored in the browser's local storage, so the data persists even after the page is refreshed. Tailwind CSS : The app uses Tailwind CSS to create a clean, responsive, and modern design. You can run this code by creating th...
Read more