Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Email Subscription form with google sheet #162

Merged
merged 3 commits into from
May 19, 2024
Merged

Email Subscription form with google sheet #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c1f1aca
update
Damini2004 May 15, 2024
675fa96
Commit email
Damini2004 May 18, 2024
698b3f1
Merge branch 'Damini' of https://github.com/Damini2004/WebMasterLog i…
Damini2004 May 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions ...la-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<h1 align='center'><b>💥 Email Subscription form with Google Sheet 💥</b></h1>

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h3 align='center'>Tech Stack Used 🎮</h3>


<div align='center'>

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

</div>


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Description 📃

<div>
<p>This project is HTML,CSS and Javascript implementation of a Email Subscription Form with Google Sheets.It aims to Creating an email subscription form with Google Sheets using HTML, CSS, and JavaScript involves building a simple front-end form where users can input their email addresses, and then using JavaScript to send the data to a Google Sheet.This Showcases the power of HTML,CSS and Javascript.</p>
</div>

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: How to run it? 🕹️

<div>
<p>To run this project locally, follow these steps:

- Fork this repository.
- Clone the forked repository.
- Open index.html in your web browser to start your culinary exploration.

</p>
</div>


<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Screenshots 📸
<!-- add the screenshot of the project (Mandatory) -->
<img src='screenshot.webp'>

![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h4 align='center'>Developed By <b><i>Damini Chachane</i></b></h4>
<p align='center'>
<a href='linkedin.com/in/damini-chachane-82a210252'>
<img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
</a>
<a href='https://github.com/Damini2004'>
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
</a>
</p>

<h4 align='center'>Happy Coding 🧑‍💻</h4>

<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
Binary file added Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/bg.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...lla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Subscription</title>
<link rel="stylesheet" href="style.css">
</head>
<body>



<div class="container">
<h3>Coming Soon!</h3>
<h1>Stay tuned,<br> Our exciting new website is launching soon!!!!</h1>
<p>Subscribe for more details.</p>
<form name="submit-to-google-sheet" >
<input type="email" name="Email" placeholder="Enter your Email Id" required >
<button type="submit" ><img src="icon.png" alt="" width="50px" ></button>
</form>
<span id="msg" ></span>
</div>



<script src="script.js" ></script>
</body>
</html>
Binary file added Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/screenshot.webp
View file
Open in desktop
Binary file not shown.
16 changes: 16 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@

const scriptURL = 'https://script.google.com/macros/s/AKfycbxzo8cvSyjB9Ad7cxfwYKMRnyUQ8W_ckB_nGTsE2InLaoTJaIVf8Wwz7-EuovV4AWWE/exec'
const form = document.forms['submit-to-google-sheet']
const msg=document.getElementById("msg")
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
msg.innerHTML="Thank You For Subscribing!"
setTimeout(function(){
msg.innerHTML=""
},5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
59 changes: 59 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
*{
margin: 0;
padding: 0;
font-family: 'Poppins','sans-serif';
box-sizing: border-box;
}
.container{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.7)),url('bg.jpeg');
background-size: cover;
background-position: center;
padding: 10px 10%;
color: #fff;
}

.container h3{
margin-top: 15%;
font-weight: 400;
font-size: 30px;
}
.container h1{
margin-top: 30px;
font-size: 50px;
}
.container p{
margin: 10px 0 60px 0;
font-size: 25px;
}
form{
background: #fff;
display: flex;
width: fit-content;
}
form input{
border: 0;
outline: none;
padding: 10px 20px;
height: 70px;
width: 400px;
font-size: 16px;
}
form button{
background: #22062e;
border: none;
outline: none;
height: 70px;
width: 100px;
cursor: pointer;

}
img{
border-radius: 70%;
}
span{
color: #61b752;
margin-top: 10px;
display: block;
}
3 changes: 2 additions & 1 deletion Vanilla-JS-Projects/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@
| 22 | [Joke Telling Website](./Basic/Joke-Telling-Website/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
| 23 | [Interval Timer](./Intermediate/Interval_Timer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
| 24 | [Language Translator](./Intermediate/Language-Translator/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |

| 25 | [Ceaser-Cipher](./Intermediate/Ceaser-Cipher/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
| 26 | [Email-Subscription-form-with-google-sheet](./Intermediate/Email-Subscription-form-with-google-sheet/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |

</div>

Expand Down