-
Notifications
You must be signed in to change notification settings - Fork 186
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #162 from Damini2004/Damini
Email Subscription form with google sheet
- Loading branch information
Showing
8 changed files
with
169 additions
and
1 deletion.
There are no files selected for viewing
64 changes: 64 additions & 0 deletions
64
...la-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'> | ||
|
|
||
|  | ||
|  | ||
|  | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :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'> | ||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <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 ❤️ by 🌟 this repository!</h3> |
Binary file added
BIN
+1.16 MB
Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/bg.jpeg
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
BIN
+4.02 KB
...lla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/icon.png
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
28
Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
BIN
+68.2 KB
Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/screenshot.webp
Binary file not shown.
16 changes: 16 additions & 0 deletions
16
Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
59
Vanilla-JS-Projects/Intermediate/Email-Subscription-form-with-google-sheet/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters