Skip to content

Contact page form SMTP server successfully set-up. #45

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

Merged
SaiAryan1784 merged 2 commits into from
Oct 18, 2024
Merged

Contact page form SMTP server successfully set-up. #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1785810
Merge pull request #1 from lavish-agrwl/Contact
lavish-agrwl Oct 10, 2024
bcec305
Contact page done.
lavish-agrwl Oct 13, 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
177 changes: 138 additions & 39 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
<div class="mil-ball">
<span class="mil-icon-1">
<svg viewBox="0 0 128 128">
<path d="M106.1,41.9c-1.2-1.2-3.1-1.2-4.2,0c-1.2,1.2-1.2,3.1,0,4.2L116.8,61H11.2l14.9-14.9c1.2-1.2,1.2-3.1,0-4.2 c-1.2-1.2-3.1-1.2-4.2,0l-20,20c-1.2,1.2-1.2,3.1,0,4.2l20,20c0.6,0.6,1.4,0.9,2.1,0.9s1.5-0.3,2.1-0.9c1.2-1.2,1.2-3.1,0-4.2 L11.2,67h105.5l-14.9,14.9c-1.2,1.2-1.2,3.1,0,4.2c0.6,0.6,1.4,0.9,2.1,0.9s1.5-0.3,2.1-0.9l20-20c1.2-1.2,1.2-3.1,0-4.2L106.1,41.9 z" />
<path
d="M106.1,41.9c-1.2-1.2-3.1-1.2-4.2,0c-1.2,1.2-1.2,3.1,0,4.2L116.8,61H11.2l14.9-14.9c1.2-1.2,1.2-3.1,0-4.2 c-1.2-1.2-3.1-1.2-4.2,0l-20,20c-1.2,1.2-1.2,3.1,0,4.2l20,20c0.6,0.6,1.4,0.9,2.1,0.9s1.5-0.3,2.1-0.9c1.2-1.2,1.2-3.1,0-4.2 L11.2,67h105.5l-14.9,14.9c-1.2,1.2-1.2,3.1,0,4.2c0.6,0.6,1.4,0.9,2.1,0.9s1.5-0.3,2.1-0.9l20-20c1.2-1.2,1.2-3.1,0-4.2L106.1,41.9 z" />
</svg>
</span>
<div class="mil-more-text">More</div>
Expand All @@ -43,14 +44,14 @@
<div class="mil-preloader">
<div class="mil-preloader-animation">
<div class="mil-pos-abs mil-animation-1">
<p class="mil-h3 mil-muted mil-thin">Pioneering</p>
<p class="mil-h3 mil-muted">Creative</p>
<p class="mil-h3 mil-muted mil-thin">Collaboration</p>
<p class="mil-h3 mil-muted">Coding</p>
<p class="mil-h3 mil-muted mil-thin">Excellence</p>
</div>
<div class="mil-pos-abs mil-animation-2">
<div class="mil-reveal-frame">
<p class="mil-reveal-box"></p>
<p class="mil-h3 mil-muted mil-thin">ashley.com</p>
<p class="mil-h3 mil-muted mil-thin">CodeChef ABESEC Chapter</p>
</div>
</div>
</div>
Expand All @@ -67,7 +68,8 @@
<div class="mil-menu-frame">
<!-- frame clone -->
<div class="mil-frame-top">
<a href="home-1.html" class="mil-logo">A.</a>
<!-- <a href="home-1.html" class="mil-logo">A.</a> -->
<img src="./img/logos/LogoCC.png" alt="CodeChef_ABESEC" style="height: 100px; width: 100px;">
<div class="mil-menu-btn">
<span></span>
</div>
Expand All @@ -89,28 +91,24 @@
</ul>
</li>
<li class="mil-has-children">
<a href="#.">Portfolio</a>
<a href="#.">Events</a>
<ul>
<li><a href="portfolio-1.html">Grid type 1</a></li>
<li><a href="portfolio-2.html">Grid type 2</a></li>
<li><a href="portfolio-3.html">Slider</a></li>
</ul>
</li>
<li class="mil-has-children">
<a href="#.">Services</a>
<a href="#.">Team</a>
<ul>
<li><a href="services.html">Services List</a></li>
<li><a href="service.html">Single service</a></li>
</ul>
</li>
<li class="mil-has-children">
<a href="#.">Newsletter</a>
<ul>
<li><a href="blog.html">Blog List</a></li>
<li><a href="publication.html">Publication</a></li>
</ul>
</li>
<li class="mil-has-children mil-active">
<a href="contact.html">Contact</a>
</li>
<li class="mil-has-children">
<a href="#.">Other pages</a>
<ul>
<li><a href="team.html">Team</a></li>
Expand All @@ -127,7 +125,9 @@
<div class="mil-menu-right-frame">
<div class="mil-animation-in">
<div class="mil-animation-frame">
<div class="mil-animation mil-position-1 mil-scale" data-value-1="2" data-value-2="2"></div>
<div class="mil-animation mil-position-1 mil-scale" data-value-1="2"
data-value-2="2">
</div>
</div>
</div>
<div class="mil-menu-right">
Expand All @@ -137,12 +137,21 @@
<h6 class="mil-muted mil-mb-30">Projects</h6>

<ul class="mil-menu-list">
<li><a href="project-1.html" class="mil-light-soft">Interior design studio</a></li>
<li><a href="project-2.html" class="mil-light-soft">Home Security Camera</a></li>
<li><a href="project-3.html" class="mil-light-soft">Kemia Honest Skincare</a></li>
<li><a href="project-4.html" class="mil-light-soft">Cascade of Lava</a></li>
<li><a href="project-5.html" class="mil-light-soft">Air Pro by Molekule</a></li>
<li><a href="project-6.html" class="mil-light-soft">Tony's Chocolonely</a></li>
<li><a href="project-1.html" class="mil-light-soft">Interior design
studio</a>
</li>
<li><a href="project-2.html" class="mil-light-soft">Home Security
Camera</a>
</li>
<li><a href="project-3.html" class="mil-light-soft">Kemia Honest
Skincare</a>
</li>
<li><a href="project-4.html" class="mil-light-soft">Cascade of Lava</a>
</li>
<li><a href="project-5.html" class="mil-light-soft">Air Pro by
Molekule</a></li>
<li><a href="project-6.html" class="mil-light-soft">Tony's
Chocolonely</a></li>
</ul>

</div>
Expand All @@ -166,14 +175,17 @@ <h6 class="mil-muted mil-mb-30">Useful links</h6>

<h6 class="mil-muted mil-mb-30">Canada</h6>

<p class="mil-light-soft mil-up">71 South Los Carneros Road, California <span class="mil-no-wrap">+51 174 705 812</span></p>
<p class="mil-light-soft mil-up">71 South Los Carneros Road, California
<span class="mil-no-wrap">+51 174 705 812</span>
</p>

</div>
<div class="col-lg-4 mil-mb-60">

<h6 class="mil-muted mil-mb-30">Germany</h6>

<p class="mil-light-soft">Leehove 40, 2678 MC De Lier, Netherlands <span class="mil-no-wrap">+31 174 705 811</span></p>
<p class="mil-light-soft">Leehove 40, 2678 MC De Lier, Netherlands <span
class="mil-no-wrap">+31 174 705 811</span></p>

</div>
</div>
Expand All @@ -194,7 +206,8 @@ <h6 class="mil-muted mil-mb-30">Germany</h6>
<!-- frame -->
<div class="mil-frame">
<div class="mil-frame-top">
<a href="home-1.html" class="mil-logo">A.</a>
<!-- <a href="home-1.html" class="mil-logo">A.</a> -->
<img src="./img/logos/LogoCC.png" alt="CodeChef_ABESEC" style="height: 100px; width: 100px;">
<div class="mil-menu-btn">
<span></span>
</div>
Expand Down Expand Up @@ -235,18 +248,34 @@ <h1 class="mil-mb-60">Get in touch!</h1>
<section id="contact">
<div class="container mil-p-120-90">
<h3 class="mil-center mil-up mil-mb-120">Let's <span class="mil-thin">Talk</span></h3>
<!-- FORM STARTS -->
<form class="row align-items-center">
<div class="col-lg-6 mil-up">
<input type="text" placeholder="What's your name">
<!-- NAME -->
<input type="text" placeholder="What's your name" id="name">
</div>
<div class="col-lg-6 mil-up">
<input type="email" placeholder="Your Email">
<!-- EMAIL -->
<input type="email" placeholder="Your Email" id="email">
</div>
<div class="col-lg-12 mil-up">
<textarea placeholder="Tell us about our project"></textarea>
<!-- SUBJECT -->
<textarea placeholder="Subject" style="height: 50px;" id="subject"></textarea>
</div>
<div class="col-lg-8">
<p class="mil-up mil-mb-30"><span class="mil-accent">*</span> We promise not to disclose your personal information to third parties.</p>
<div class="col-lg-12 mil-up">
<!-- MESSAGE -->
<textarea placeholder="Write your message here" id="message"></textarea>
</div>
<div class="col-lg-16">
<p class="mil-up mil-mb-30"><span class="mil-accent">*</span> We promise not to disclose
your personal information to third parties.</p>
</div>
<div class="col-lg-4">
<div class="mil-adaptive-right mil-up mil-mb-30">
<button type="reset" class="mil-button mil-arrow-place">
<span>Reset</span>
</button>
</div>
</div>
<div class="col-lg-4">
<div class="mil-adaptive-right mil-up mil-mb-30">
Expand All @@ -273,7 +302,8 @@ <h3 class="mil-center mil-up mil-mb-120">Let's <span class="mil-thin">Talk</span

<form class="mil-subscribe-form mil-up">
<input type="text" placeholder="Enter our email">
<button type="submit" class="mil-button mil-icon-button-sm mil-arrow-place"></button>
<button type="submit"
class="mil-button mil-icon-button-sm mil-arrow-place"></button>
</form>

</div>
Expand Down Expand Up @@ -325,14 +355,18 @@ <h3 class="mil-center mil-up mil-mb-120">Let's <span class="mil-thin">Talk</span

<h6 class="mil-muted mil-up mil-mb-30">Canada</h6>

<p class="mil-light-soft mil-up">71 South Los Carneros Road, California <span class="mil-no-wrap">+51 174 705 812</span></p>
<p class="mil-light-soft mil-up">71 South Los Carneros Road, California
<span class="mil-no-wrap">+51 174 705 812</span>
</p>

</div>
<div class="col-md-6 col-lg-5 mil-mb-60">

<h6 class="mil-muted mil-up mil-mb-30">Germany</h6>

<p class="mil-light-soft mil-up">Leehove 40, 2678 MC De Lier, Netherlands <span class="mil-no-wrap">+31 174 705 811</span></p>
<p class="mil-light-soft mil-up">Leehove 40, 2678 MC De Lier, Netherlands
<span class="mil-no-wrap">+31 174 705 811</span>
</p>

</div>
</div>
Expand All @@ -343,13 +377,18 @@ <h6 class="mil-muted mil-up mil-mb-30">Germany</h6>
<div class="mil-vert-between">
<div class="mil-mb-30">
<ul class="mil-social-icons mil-up">
<li><a href="#." target="_blank" class="social-icon"> <i class="far fa-circle"></i></a></li>
<li><a href="#." target="_blank" class="social-icon"> <i class="far fa-circle"></i></a></li>
<li><a href="#." target="_blank" class="social-icon"> <i class="far fa-circle"></i></a></li>
<li><a href="#." target="_blank" class="social-icon"> <i class="far fa-circle"></i></a></li>
<li><a href="#." target="_blank" class="social-icon"> <i
class="far fa-circle"></i></a></li>
<li><a href="#." target="_blank" class="social-icon"> <i
class="far fa-circle"></i></a></li>
<li><a href="#." target="_blank" class="social-icon"> <i
class="far fa-circle"></i></a></li>
<li><a href="#." target="_blank" class="social-icon"> <i
class="far fa-circle"></i></a></li>
</ul>
</div>
<p class="mil-light-soft mil-up">© Copyright 2023 - Mil. All Rights Reserved.</p>
<p class="mil-light-soft mil-up">© Copyright 2023 - Mil. All Rights Reserved.
</p>
</div>

</div>
Expand All @@ -364,7 +403,67 @@ <h6 class="mil-muted mil-up mil-mb-30">Germany</h6>
<!-- content -->
</div>
<!-- wrapper end -->

<!-- SMTP js -->
<script src="https://smtpjs.com/v3/smtp.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const form = document.querySelector("form");

form.addEventListener("submit", (e) => {
let username = document.querySelector("#name").value;
let email = document.querySelector("#email").value;
let message = document.querySelector("#message").value;
let subject = document.querySelector("#subject").value;
let messageBody = `Name: ${username} \n Email: ${email} \n Message: ${message}`;
e.preventDefault();
if (validateInputs(username, email, message)) {
sendEmail(messageBody, subject);
}
});
let validateInputs = (username, email, message) => {
if (username === "" || email === "" || message === "") {
Swal.fire({
title: "Error!",
text: "Please fill all the fields!",
icon: "error",
});
return false;
} else if (!validateEmail(email)) {
Swal.fire({
title: "Error!",
text: "Please enter a valid email!",
icon: "error",
});
return false;
} else {
return true;
}
};
let validateEmail = (email) => {
const re = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,3})(\.[a-z]{2,3})?$/;
return re.test(email);
};

let sendEmail = (messageBody, Subject) => {
Email.send({
SecureToken: "539a95a0-ee77-4607-bf1b-67a1cc15a033",
To: "codechef@abes.ac.in",
From: "codechef@abes.ac.in",
Subject: Subject,
Body: messageBody,
}).then((message) => {
if (message === "OK") {
Swal.fire({
title: "Success!",
text: "Message sent succesfully!",
icon: "success",
});
}
});
};

</script>
<!-- jQuery js -->
<script src="js/plugins/jquery.min.js"></script>
<!-- swup js -->
Expand All @@ -386,4 +485,4 @@ <h6 class="mil-muted mil-up mil-mb-30">Germany</h6>

</body>

</html>
</html>
8 changes: 4 additions & 4 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ p.s. I am available for Freelance hire (UI design, web development). email: mill
- scrollbar
- frame
- menu button
- menu
- menu
- banner
- circle text
- lines
Expand Down Expand Up @@ -685,7 +685,7 @@ textarea {
padding: 0 30px;
width: 100%;
font-size: 12px;
text-transform: uppercase;
/* text-transform: uppercase; */
letter-spacing: 2px;
font-weight: 500;
font-family: "Outfit", sans-serif;
Expand All @@ -700,7 +700,7 @@ textarea:focus {
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
font-size: 12px;
text-transform: uppercase;
/* text-transform: uppercase; */
letter-spacing: 2px;
font-weight: 500;
color: rgba(0, 0, 0, 0.5);
Expand Down Expand Up @@ -737,7 +737,7 @@ textarea::placeholder {

textarea {
padding: 15px 30px;
height: 300px;
height: 150px;
}

/* -------------------------------------------
Expand Down