Skip to content

Contact form working now #94

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
vimal-java-dev merged 1 commit into from
Apr 14, 2026
Merged

Contact form working now #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 4 additions & 2 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"liveServer.settings.port": 5501,
"liveServer.settings.port": 3000,
"files.refactoring.autoSave": false,
"notebook.codeActionsOnSave": {}
"notebook.codeActionsOnSave": {},
"liveServer.settings.cors": false,
"liveServer.settings.AdvanceCustomBrowserCmdLine": ""
}
42 changes: 30 additions & 12 deletions contactUs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,41 +232,59 @@ <h4 class="mobile-card-content">Official Registration</h4>
<div class="contact-form-wrapper glass-panel">
<h3 style="margin-bottom: 20px; font-family: var(--font-primary);">Start a Conversation</h3>

<form action="#" method="POST" class="contact-form fade-in" style="--delay: 0.3s;">
<form id="contactForm" class="contact-form fade-in" style="--delay: 0.3s;" novalidate>

<div class="input-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" placeholder="e.g., John Doe" required
autocomplete="name">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" autocomplete="name" required
placeholder="e.g., John Doe">
<span class="field-error" id="error-name"></span>
</div>

<div class="input-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="john@example.com" required
autocomplete="email">
<input type="email" id="email" name="email" autocomplete="email" required
placeholder="john@example.com">
<span class="field-error" id="error-email"></span>
</div>

<div class="input-group">
<label for="service">How can we help?</label>
<label for="service">How can we help? <span
style="font-weight: normal; font-size: 0.8rem; color: var(--color-muted);">(optional)</span></label>
<select id="service" name="service" required>
<option value="" disabled selected>Select a service...</option>
<option value="backend">Java Backend / API Development</option>
<option value="fullstack">Full-Stack Web Development</option>
<option value="vps">Deployment / Server Setup</option>
<option value="other">General Inquiry / Consultation</option>
</select>
<span class="field-error" id="error-service"></span>
</div>

<div class="input-group">
<label for="message">Project Requirements</label>
<textarea id="message" name="message" rows="5"
placeholder="Tell me about your vision, tech stack, or timeline..." required></textarea>
<textarea id="message" name="message" rows="5" required
placeholder="Share a brief overview of your project, goals, and timelines."></textarea>
<div class="char-count-wrapper">
<span class="field-error" id="error-message"></span>
<span class="char-count" id="charCount">0 / 1000</span>
</div>
</div>

<button type="submit" class="btn primary glow-btn"
style="width: 100%; border: none; cursor: pointer; margin-top: 10px;">
Send Message <i class="fas fa-paper-plane" style="margin-left: 8px;"></i>
<button type="submit" class="btn primary glow-btn" id="submitBtn"
style="width: 100%; border: none; cursor: pointer; margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px;">
<span class="btn-text">Send Message</span>
<i class="fas fa-paper-plane submit-icon"></i>
</button>

<div class="form-success" id="formSuccess">
<i class="fas fa-check-circle" style="margin-right: 8px;"></i> Your message has been sent. I’ll
get back to you soon.
</div>

<p class="fallback-text">
Having trouble? Please use the provided email, phone, or WhatsApp to reach out directly.
</p>
<p style="font-size: 0.8rem; color: var(--color-muted); text-align: center; margin-top: 10px;">
I typically respond within <strong>24 hours</strong>.
</p>
Expand Down
103 changes: 101 additions & 2 deletions css/contactUs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ body.dark #particles-js canvas {
}

.mobile-card-content {
margin-top: 5px;
margin-top: 10px;
}

.mobile-new-line-msme {
Expand Down Expand Up @@ -189,7 +189,7 @@ body.dark .input-group textarea:focus {
}

.info-card:hover {
transform: translateY(-5px);
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

Expand Down Expand Up @@ -494,4 +494,103 @@ body.dark .udyam-box {
font-size: 1rem;
/* Prevents iOS Safari from auto-zooming on focus */
}
}

/* --- Form Validation & State Styling --- */

/* Error Messages */
.field-error {
color: #ef4444;
/* Red */
font-size: 0.8rem;
font-weight: 500;
margin-top: 4px;
display: none;
}

.field-error.visible {
display: block;
animation: fadeIn 0.3s ease;
}

/* Input Error State */
.input-error {
border-color: #ef4444 !important;
background-color: rgba(239, 68, 68, 0.05) !important;
}

/* Character Counter Layout */
.char-count-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 6px;
width: 100%;
/* Ensures it stretches across the bottom */
}

.char-count {
font-size: 0.8rem;
/* Changed from white to a sleek slate/gray color for light backgrounds */
color: #64748b;
margin-left: auto;
transition: color 0.3s ease;
font-weight: 500;
}

.char-count.near-limit {
color: #f59e0b;
/* Amber/Warning */
}

.char-count.at-limit {
color: #ef4444;
/* Red/Error */
}

/* Success Message */
.form-success {
display: none;
margin-top: 15px;
padding: 12px 15px;
background: rgba(46, 204, 113, 0.1);
/* Transparent Green */
border: 1px solid rgba(46, 204, 113, 0.3);
border-radius: 8px;
color: #2ecc71;
font-size: 0.9rem;
font-weight: 500;
text-align: center;
}

.form-success.visible {
display: block;
animation: fadeIn 0.4s ease;
}

/* Button Loading State */
button.loading {
opacity: 0.7;
pointer-events: none;
}

/* Fallback Text */
.fallback-text {
font-size: 0.8rem;
color: rgba(0, 0, 0, 0.4);
text-align: center;
margin-top: 15px;
line-height: 1.5;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}

to {
opacity: 1;
transform: translateY(0);
}
}
Loading
Loading