Scribd
Upload
40 views3 pages

Index

Uploaded by

samiansarigettime77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
40 views3 pages

Index

Uploaded by

samiansarigettime77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
}

.contact-container {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
width: 400px;
padding: 20px;
animation: slideIn 1s ease-out;
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
}

input,
textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
background-color: #4caf50;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<div class="contact-container">
<h2>Contact Us</h2>
<form id="contactForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button type="button" onclick="sendEmail()">Submit</button>
</form>
</div>

<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script>
// Initialize EmailJS with your user ID
emailjs.init("user_your_emailjs_user_id");

function sendEmail() {
// Get form data
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;

// Prepare email parameters


const params = {
name: name,
email: email,
message: message,
};

// Send email
emailjs.send("service_your_emailjs_service_id",
"template_your_emailjs_template_id", params)
.then(function(response) {
console.log("Email sent successfully:", response);
alert("Data has been sent!");
}, function(error) {
console.log("Failed to send email:", error);
alert("Failed to send data. Please try again.");
});
}
</script>
</body>
</html>

You might also like