<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Modern Contact Form | Learn With Arshyan</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Outfit', sans-serif;
background: linear-gradient(120deg, #6a11cb, #2575fc);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.contact-wrapper {
background: #fff;
width: 90%;
max-width: 950px;
display: flex;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.contact-left {
background: linear-gradient(135deg, #00f2fe, #4facfe);
flex: 1;
color: white;
padding: 50px 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-left h2 {
font-size: 32px;
margin-bottom: 20px;
}
.contact-left p {
font-size: 16px;
margin-bottom: 8px;
}
.contact-right {
flex: 1;
padding: 50px 40px;
background: #ffffff;
}
.contact-right h2 {
color: #333;
margin-bottom: 30px;
font-size: 28px;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
outline: none;
background: transparent;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #2575fc;
}
.form-group label {
position: absolute;
top: -10px;
left: 12px;
background: white;
padding: 0 5px;
font-size: 14px;
color: #2575fc;
}
.form-group textarea {
resize: none;
min-height: 100px;
}
.form-group span {
color: #ff4d4d;
font-size: 13px;
display: none;
}
.form-right button {
width: 100%;
padding: 14px;
border: none;
background: linear-gradient(to right, #4facfe, #00f2fe);
color: white;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
}
.form-right button:hover {
transform: translateY(-2px);
}
@media(max-width: 768px) {
.contact-wrapper {
flex-direction: column;
}
.contact-left,
.contact-right {
padding: 30px 25px;
}
.contact-left h2,
.contact-right h2 {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="contact-wrapper">
<div class="contact-left">
<h2>Get in Touch</h2>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<template id="glpou4vr58N4Ttwu3rfn"></template>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script type="bv_inline_delayed_js" bv_unique_id="QptgNlsZPqRtynuRRqp7" defer="1" data-cfasync="" bv_inline_delayed="1" async="">(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
<p>📧 support@learnwitharshyan.com</p>
<p>📍 Lahore, Pakistan</p>
<p>📞 +92 300 0000000</p>
</div>
<div class="contact-right form-right">
<h2>Contact Us</h2>
<form id="contactForm" onsubmit="return validateForm()">
<div class="form-group">
<input type="text" id="name" required />
<label for="name">Your Name</label>
<span id="nameError">Please enter your name.</span>
</div>
<div class="form-group">
<input type="email" id="email" required />
<label for="email">Your Email</label>
<span id="emailError">Enter a valid email.</span>
</div>
<div class="form-group">
<textarea id="message" required></textarea>
<label for="message">Your Message</label>
<span id="messageError">Message cannot be empty.</span>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</div>
<script type="bv_inline_delayed_js" bv_unique_id="pK3Q1ImH2AytAdDrIrtN" defer="1" data-cfasync="" async="">function validateForm() {
let valid = true;
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const message = document.getElementById("message").value.trim();
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const messageError = document.getElementById("messageError");
nameError.style.display = "none";
emailError.style.display = "none";
messageError.style.display = "none";
if (name === "") {
nameError.style.display = "block";
valid = false;
}
if (!email.match(/^\S+@\S+\.\S+$/)) {
emailError.style.display = "block";
valid = false;
}
if (message === "") {
messageError.style.display = "block";
valid = false;
}
if (valid) {
alert("Message sent successfully!");
document.getElementById("contactForm").reset();
}
return false;
}</script>
</body>
</html>
]]>
There are actually a whole lot of details like that to take into consideration. That could be a nice point to convey up. I offer the ideas above as general inspiration however clearly there are questions just like the one you convey up where an important thing will likely be working in trustworthy good faith. I don?t know if finest practices have emerged round issues like that, however I’m certain that your job is clearly recognized as a good game. Each girls and boys feel the influence of only a second’s pleasure, for the rest of their lives.