Skip to content

Commit 8d8952a

Browse files
0r-gh00r-gh0
committed
Update contact form and add email sending functionality
1 parent e3e079a commit 8d8952a

9 files changed

+371
-7
lines changed

‎ICONS/CONTACT_US_IMG.jpg

139 KB
Loading

‎ICONS/reset.png

42.9 KB
Loading

‎ICONS/submit.png

22.7 KB
Loading

‎MOBILE_FRONT_VIEW.jpg

6.74 MB
Loading

‎MOBILE_FRONT_VIEW_NEW.jpg

2.15 MB
Loading

‎V_1.3_FORM_REPSONSE/script.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ function validate() {
1111
let errors = [];
1212

1313
if (form_name.length < 3) {
14-
errors.push("Please Enter a Valid Name");
14+
errors.push("Please enter a Valid Name");
1515
}
1616
if (subject.length < 5) {
17-
errors.push("Please Enter a Correct Subject");
17+
errors.push("Please enter a correct Subject");
1818
}
1919
if (isNaN(phone) || phone.length <= 6) {
20-
errors.push("Please Enter a Valid Phone Number");
20+
errors.push("Please enter a valid Phone Number");
2121
}
2222
if (!/^\S+@\S+\.\S+$/.test(email)) {
23-
errors.push("Please Enter a Valid Email");
23+
errors.push("Please enter a valid Email");
2424
}
2525
if (message.length <= 20) {
26-
errors.push("Please Enter More Than 20 Characters");
26+
errors.push("Please enter a message of more than 20 characters");
2727
}
2828

2929
if (errors.length > 0) {

‎index.html

+71
Original file line numberDiff line numberDiff line change
@@ -1330,6 +1330,77 @@ <h3><br><i>
13301330
</div>
13311331
</section>
13321332

1333+
<section class="student-profile">
1334+
1335+
<header class="header-rev">
1336+
<div class="photo">
1337+
<img src="ICONS/CONTACT_US_IMG.jpg" alt="CONTACT_US">
1338+
</div>
1339+
<div class="info">
1340+
<h1 class="name-b">CONTACT US</h1>
1341+
</div>
1342+
</header>
1343+
1344+
<div class="content-student-email">
1345+
1346+
<div class="right-pane">
1347+
<div id="error_message"></div>
1348+
1349+
<form action="" id="myform" onsubmit="return validate();">
1350+
<input type="hidden" name="access_key" value="206cec56-fb01-4a94-ba20-c4f90f54d2b9">
1351+
1352+
<div class="input_field">
1353+
<input type="text" placeholder="Email" id="email" name="email" required>
1354+
</div>
1355+
<div class="input_field">
1356+
<input type="text" placeholder="Name" id="form_name" name="name" required>
1357+
</div>
1358+
<div class="input_field">
1359+
<input type="text" placeholder="Subject" id="subject" name="subject" required>
1360+
</div>
1361+
<div class="input_field">
1362+
<input type="text" placeholder="Phone" id="phone" name="phone" required>
1363+
</div>
1364+
<div class="input_field">
1365+
<textarea placeholder="Message" id="message" name="message" required></textarea>
1366+
</div>
1367+
<!-- FIX THESE BUTTONS -->
1368+
1369+
<div class="info-button">
1370+
<div class="btn">
1371+
<input type="reset" value="Reset" >
1372+
</div>
1373+
<div class="btn">
1374+
<input type="submit" id="submit_button" >
1375+
</div>
1376+
</div>
1377+
<div id="result"></div>
1378+
</form>
1379+
</div>
1380+
1381+
<div class="left-pane">
1382+
<div class="info-pane">
1383+
<i class="fas fa-phone"></i>
1384+
<span><b>Phone (Class Representative) </b>: +91 80173 06564 (Subhradip)</span>
1385+
</div>
1386+
<div class="info-pane">
1387+
<i class="fas fa-phone"></i>
1388+
<span><b>Phone (Placement Representative) </b>: +91 86178 59360 (Soham) </span>
1389+
</div>
1390+
<div class="info-pane">
1391+
<i class="fas fa-envelope"></i>
1392+
<span><b>Email </b>: isi-mtech-crs-2023-25 [at] googlegroups [dot] com</span>
1393+
</div>
1394+
<div class="info-pane">
1395+
<i class="fas fa-map-marker-alt"></i>
1396+
<span><b>Address </b>: Indian Statistical Institute, 203 Barrackpore Trunk Road, Kolkata 700108, India</span>
1397+
</div>
1398+
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script><dotlottie-player src="https://lottie.host/8c0938aa-5e57-4498-8f7b-6d6eb713972c/eXsV4UNukX.json" background="transparent" speed="1" style="width: 200px; height: 200px" direction="1" playMode="bounce" loop autoplay></dotlottie-player>
1399+
<!-- CHECK THIS WEBSITE : https://lottiefiles.com/ -->
1400+
</div>
1401+
</div>
1402+
</section>
1403+
13331404
</div>
13341405

13351406
<footer>

‎script.js

+93
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,97 @@ document.addEventListener('DOMContentLoaded', function () {
1313
studentButton.addEventListener('click', function () {
1414
studentSection.scrollIntoView({ behavior: 'smooth' });
1515
});
16+
17+
// Form submission logic
18+
const form = document.getElementById('myform');
19+
const submitButton = document.getElementById('submit_button');
20+
const error_message = document.getElementById('error_message');
21+
22+
submitButton.addEventListener('click', function (e) {
23+
e.preventDefault();
24+
console.log("Form submitted Successfully");
25+
validate(); // Call the validate function before sending the email
26+
});
27+
28+
function validate() {
29+
let form_name = document.getElementById("form_name").value.trim();
30+
let subject = document.getElementById("subject").value.trim();
31+
let phone = document.getElementById("phone").value.trim();
32+
let email = document.getElementById("email").value.trim();
33+
let message = document.getElementById("message").value.trim();
34+
35+
error_message.style.padding = "10px";
36+
37+
let errors = [];
38+
39+
if (form_name.length < 3) {
40+
errors.push("Please enter a Valid Name");
41+
}
42+
if (subject.length < 5) {
43+
errors.push("Please enter a correct Subject");
44+
}
45+
if (isNaN(phone) || phone.length <= 6) {
46+
errors.push("Please enter a valid Phone Number");
47+
}
48+
if (!/^\S+@\S+\.\S+$/.test(email)) {
49+
errors.push("Please enter a valid Email");
50+
}
51+
if (message.length <= 20) {
52+
errors.push("Please enter a message of more than 20 characters");
53+
}
54+
55+
if (errors.length > 0) {
56+
// Show the error message and set its content
57+
error_message.style.display = "block";
58+
error_message.innerHTML = errors.join("<br>");
59+
return false;
60+
} else {
61+
// Hide the error message if there are no errors
62+
error_message.style.display = "none";
63+
// Disable the submit button to prevent multiple submissions
64+
submitButton.disabled = true;
65+
// Send email only if validation passes
66+
sendEmail();
67+
68+
return true;
69+
}
70+
}
71+
72+
function sendEmail() {
73+
const result = document.getElementById('result');
74+
75+
const formData = new FormData(form);
76+
const object = Object.fromEntries(formData);
77+
const json = JSON.stringify(object);
78+
result.innerHTML = "Please wait ..."
79+
80+
fetch('https://api.web3forms.com/submit', {
81+
method: 'POST',
82+
headers: {
83+
'Content-Type': 'application/json',
84+
'Accept': 'application/json'
85+
},
86+
body: json
87+
})
88+
.then(async (response) => {
89+
let jsonResponse = await response.json();
90+
if (response.status == 200) {
91+
result.innerHTML = jsonResponse.message;
92+
} else {
93+
console.log(response);
94+
result.innerHTML = jsonResponse.message;
95+
}
96+
})
97+
.catch(error => {
98+
console.log(error);
99+
result.innerHTML = "Something went wrong!";
100+
})
101+
.then(function () {
102+
form.reset();
103+
setTimeout(() => {
104+
result.style.display = "none";
105+
submitButton.disabled = false; // Re-enable submit button after a timeout
106+
}, 3000);
107+
});
108+
}
16109
});

0 commit comments

Comments
 (0)