Ayushparikh-code · JashSanka · Oct 2, 2025 · Oct 2, 2025
diff --git a/BasicContactForm/README.md b/BasicContactForm/README.md
@@ -0,0 +1,39 @@
+<h1>Basic Contact Form</h1>
+
+<p>A Basic Contact Form written in HTML, CSS and JAVASCRIPT .</p>
+
+### Use of the Project:
+
+<p>This basic contact form can be added to any website to make it attractive. </p>
+
+<h3>Used Technologies</h3>
+<ul>
+    <li>HTML5</li>
+    <li>CSS3</li>
+    <li>JavaScript</li>
+</ul>
+
+#### Steps to Use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the index.html file
+- Result is here!!!
+
+<h3> Screenshot:</h3>
+<img src="https://user-images.githubusercontent.com/66966120/125250300-ec32c500-e2aa-11eb-8a50-31d4cf729d72.png" alt="Screenshot (19)" style="max-width:100%;">
+
+
+<h3> Demo </h3>
+
+<a href="https://sonamgupta136.github.io/Basic-Contact-Form.io/">Demo</a>
+
+<br>
+
diff --git a/BasicContactForm/app.js b/BasicContactForm/app.js
@@ -0,0 +1,35 @@
+let sendButton = document.getElementById('send');
+let resetButton = document.getElementById('reset');
+let form = document.getElementById('form');
+
+
+form.addEventListener('submit', function (e) {
+    e.preventDefault();
+})
+
+resetButton.addEventListener('click', function () {
+    let name = document.getElementById('name');
+    let email = document.getElementById('email');
+    let message = document.getElementById('message');
+
+    name.value = '';
+    email.value = '';
+    message.value = '';
+})
+
+sendButton.addEventListener('click', function (e) {
+    let name = document.getElementById('name');
+    let email = document.getElementById('email');
+    let message = document.getElementById('message');
+
+    name = name.value;
+    localStorage.setItem('name', name);
+
+    email = email.value;
+    localStorage.setItem('email', email);
+
+    message = message.value;
+    localStorage.setItem('message', message);
+
+})
+
diff --git a/BasicContactForm/index.html b/BasicContactForm/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>Contact Form</title>
+</head>
+
+<body>
+    <form id="form">
+        <h1>Please Contact me</h1>
+        <div>
+            <label for="name">Name</label></br>
+            <input id="name" name="name">
+        </div>
+        <div>
+            <label for="phone">Phone Number</label></br>
+            <input type="tel" id="phone" name="phone">
+        </div>
+        <div>
+            <label for="email">Email</label><br>
+            <input type="email" id="email" name="email">
+        </div>
+        <div>
+            <label for="message">Message</label><br>
+            <textarea id="message" name="message"></textarea>
+        </div>
+        <div id="buttons-row">
+            <div class="buttons">
+                <button type="submit" id="send">Send</button>
+            </div>
+            <div class="buttons">
+                <button id="reset">Reset</button>
+            </div>
+        </div>
+    </form>
+    <script src="app.js"></script>
+</body>
+
+</html>
+
diff --git a/BasicContactForm/style.css b/BasicContactForm/style.css
@@ -0,0 +1,65 @@
+form {
+    background-color: black;
+    width: 500px;
+    border-radius: 25px;
+    height: 400px;
+    padding: 25px;
+    font-family: Arial, Helvetica, sans-serif;
+    box-sizing: border-box;
+    margin: 50px auto;
+
+}
+
+form h1 {
+    color: white;
+    text-align: center;
+    font-size: 22px;
+}
+
+label {
+    color: rgb(43, 134, 209);
+    font-weight: bold;
+    padding-bottom: 5px;
+    padding-top: 15px;
+    display: inline-block;
+}
+
+input,
+textarea {
+    box-sizing: border-box;
+    width: 450px;
+    height: 30px;
+    padding-left: 5px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+textarea {
+    height: 50px;
+}
+
+#buttons-row {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+button {
+    flex-grow: 1;
+    width: 125px;
+    margin: 25px;
+    border: none;
+    border-radius: 15px;
+    height: 35px;
+    font-size: 20px;
+    margin-top: 35px;
+}
+
+button#send {
+    background-color: rgb(211, 59, 59);
+    color: white;
+}
+
+button#reset {
+    background-color: rgb(253, 253, 54);
+    color: black;
+}
+