File: /var/www/html/balajiproperties.org/index-old.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Krisumi — Lead Registration</title>
<meta name="color-scheme" content="light dark" />
<style>
:root {
--bg: #ffffff;
--card: #ffffff;
--muted: #4b5563; /* slate-600 */
--text: #111827; /* gray-900 */
--ring: #2563eb; /* blue-600 */
--brand: #2563eb; /* blue-600 */
--brand-2: #1d4ed8; /* blue-700 */
--danger: #b91c1c; /* red-700 */
--ok: #059669; /* emerald-600 */
--border: #e5e7eb; /* gray-200 */
--input: #ffffff; /* white */
--radius: 16px;
--shadow: 0 6px 20px rgba(0,0,0,.08);
}
html, body {
height: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--text);
background: #ffffff;
display: grid;
justify-items: center; align-items: start;
padding: 32px 16px;
min-height: 100svh;
overflow-x: hidden;
}
.card {
width: 100%;
max-width: 980px;
background: var(--card);
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 8px);
box-shadow: var(--shadow);
overflow: hidden;
}
.card-header {
padding: 28px 28px 0 28px;
}
.logo {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 18px;
letter-spacing: .2px;
color: var(--text);
}
.badge {
display: inline-block;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
color: white;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
margin-left: 8px;
}
.title {
font-size: clamp(22px, 4vw, 38px);
line-height: 1.1;
margin: 14px 0 10px;
letter-spacing: .3px;
}
.subtitle {
color: var(--muted);
font-size: 14px;
margin: 0 0 22px;
}
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
margin: 16px 0 0;
}
form {
padding: 28px;
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px 18px;
}
@media (min-width: 720px) {
.grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.section {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
background: #ffffff;
}
.section h3 {
margin: 0 0 12px;
font-size: 16px;
letter-spacing: .2px;
}
.field {
display: grid;
gap: 8px;
}
label { font-weight: 600; font-size: 13px; color: var(--muted); }
input[type="text"], select, textarea {
background: var(--input);
color: var(--text);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
font-size: 15px;
transition: box-shadow .2s, border-color .2s, transform .02s ease-in-out;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: color-mix(in oklab, var(--ring), white 15%);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring), transparent 80%);
}
.inline-hint {
font-size: 12px;
color: var(--muted);
}
.error { color: var(--danger); font-size: 12px; display: none; }
.field.invalid .error { display: block; }
.actions {
display: flex;
gap: 12px;
align-items: center;
justify-content: flex-end;
padding-top: 8px;
}
.btn {
border: 0;
border-radius: 999px;
padding: 12px 18px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
color: white;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
box-shadow: 0 8px 18px rgba(37, 99, 235, .25);
transition: transform .06s ease-in-out, filter .2s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .7; cursor: not-allowed; }
.note {
font-size: 12px; color: var(--muted); margin-top: 6px;
}
.footer {
padding: 0 28px 28px 28px;
color: var(--muted);
font-size: 12px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
/* a11y only */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Honeypot */
.hp { display:none !important; }
</style>
</head>
<body>
<main class="card" role="main">
<div class="card-header">
<!-- <div class="logo" aria-label="Krisumi">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z" fill="url(#g)"/><defs><linearGradient id="g" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse"><stop stop-color="#2563eb"/><stop offset="1" stop-color="#7c3aed"/></linearGradient></defs></svg>
Krisumi Lead Portal <span class="badge">Sandbox</span>
</div> -->
<h1 class="title">Tell us a bit about yourself</h1>
<p class="subtitle">Submit your interest and our team will reach out shortly. It only takes a minute.</p>
<div class="divider" aria-hidden="true"></div>
</div>
<!-- Replace OID with your sandbox org id after refresh -->
<form id="lead-form" action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" novalidate>
<input type="hidden" name="oid" value="00DBl000001tLks">
<input type="hidden" name="retURL" value="https://krisumi.com/">
<!-- Debug while testing -->
<!--
<input type="hidden" name="debug" value="1" />
<input type="hidden" name="debugEmail" value="shivam.saini@cccinfotech.com" />
-->
<!-- Honeypot field (anti-bot) -->
<div class="hp">
<label>Do not fill</label>
<input type="text" name="company" tabindex="-1" autocomplete="off" />
</div>
<!-- SECTION: Contact Details -->
<section class="section">
<h3>Contact Details</h3>
<div class="grid two-col">
<div class="field" id="f-first">
<label for="first_name">First Name</label>
<input id="first_name" name="first_name" type="text" maxlength="40" autocomplete="given-name" required />
<div class="error">First name is required.</div>
</div>
<div class="field" id="f-last">
<label for="last_name">Last Name</label>
<input id="last_name" name="last_name" type="text" maxlength="80" autocomplete="family-name" required />
<div class="error">Last name is required.</div>
</div>
<div class="field" id="f-email">
<label for="email">Email</label>
<input id="email" name="email" type="text" inputmode="email" maxlength="80" autocomplete="email" placeholder="you@example.com" required />
<div class="error">Enter a valid email address.</div>
</div>
<div class="field" id="f-mobile">
<label for="mobile">Mobile</label>
<input id="mobile" name="mobile" type="text" inputmode="numeric" maxlength="40" autocomplete="tel" placeholder="10-digit mobile" pattern="^\d{10}$" required />
<div class="inline-hint">India format: 10 digits (e.g., 98XXXXXXXX)</div>
<div class="error">Enter a 10-digit mobile number.</div>
</div>
<div class="field" id="f-city">
<label for="city">City</label>
<input id="city" name="city" type="text" maxlength="40" autocomplete="address-level2" required />
<div class="error">City is required.</div>
</div>
<div class="field" id="f-state">
<label for="state">State/Province</label>
<input id="state" name="state" type="text" maxlength="20" autocomplete="address-level1" required />
<div class="error">State is required.</div>
</div>
</div>
</section>
<!-- SECTION: Lead Source -->
<section class="section" aria-labelledby="source">
<h3 id="source">How did you hear about us?</h3>
<div class="grid two-col">
<div class="field" id="f-source">
<label for="lead_source">Lead Source</label>
<select id="lead_source" name="lead_source" required>
<option value="">-- Select --</option>
<option value="CTI">CTI</option>
<option value="Event">Event</option>
<option value="Print Media">Print Media</option>
<option value="Property Portal">Property Portal</option>
<option value="Referral">Referral</option>
<option value="Social Media">Social Media</option>
<option value="Website" selected>Website</option>
</select>
<div class="error">Lead Source is required.</div>
</div>
<div class="field" id="f-subsource">
<label for="lead_sub_source">Lead Sub Source</label>
<!-- IMPORTANT: Replace the id/name below with your *sandbox* custom field id if different -->
<select id="00NBl000003lmQ8" name="00NBl000003lmQ8" title="Lead Sub Source">
<option value="">-- Select --</option>
<option value="99 Acres">99 Acres</option>
<option value="Channel Partner">Channel Partner</option>
<option value="Chatbot">Chatbot</option>
<option value="CommonFloor.com">CommonFloor.com</option>
<option value="Customer">Customer</option>
<option value="Economic Times">Economic Times</option>
<option value="Employee">Employee</option>
<option value="Enquiry Form" selected>Enquiry Form</option>
<option value="Event 1">Event 1</option>
<option value="Event 2">Event 2</option>
<option value="Event 3">Event 3</option>
<option value="Facebook">Facebook</option>
<option value="Google Ads">Google Ads</option>
<option value="Hindustan Times">Hindustan Times</option>
<option value="Housing.com">Housing.com</option>
<option value="Inbound Calls">Inbound Calls</option>
<option value="Instagram">Instagram</option>
<option value="Linkedin">Linkedin</option>
<option value="MagicBricks">MagicBricks</option>
<option value="Magic Bricks">Magic Bricks</option>
<option value="Makaan.com">Makaan.com</option>
<option value="No Broker">No Broker</option>
<option value="Other">Other</option>
<option value="PropTiger">PropTiger</option>
<option value="Quikr Homes">Quikr Homes</option>
<option value="SquareYards.com">SquareYards.com</option>
<option value="TOI">TOI</option>
<option value="WhatsApp">WhatsApp</option>
</select>
</div>
</div>
</section>
<!-- SECTION: Notes -->
<section class="section">
<h3>Anything else we should know?</h3>
<div class="field">
<label for="description">Description</label>
<textarea id="description" name="description" placeholder="Share your requirements, preferred project, budget range, etc."></textarea>
</div>
</section>
<!-- reCAPTCHA (optional, enable in SF if required) -->
<!--
<section class="section">
<div class="field">
<label class="sr-only" for="captcha">Captcha</label>
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
</div>
</section>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
-->
<div class="actions">
<button class="btn" id="submitBtn" type="submit">Submit</button>
</div>
</form>
<footer class="footer">
<span>© <span id="year"></span> Krisumi. All rights reserved.</span>
<span>Environment: Sandbox</span>
</footer>
</main>
<script>
// Current year
document.getElementById('year').textContent = new Date().getFullYear();
const form = document.getElementById('lead-form');
const submitBtn = document.getElementById('submitBtn');
// Minimal client-side validation + better UX
const validators = {
email: (v) => /^[\w.-]+@[\w.-]+\.[A-Za-z]{2,}$/.test(v),
mobile: (v) => /^\d{10}$/.test(v)
};
function setValidity(id, ok) {
const el = document.getElementById(id);
const wrap = el.closest('.field');
if (!wrap) return;
if (ok) wrap.classList.remove('invalid');
else wrap.classList.add('invalid');
}
form.addEventListener('input', (e) => {
const t = e.target;
if (t.id === 'email') setValidity('email', validators.email(t.value.trim()));
if (t.id === 'mobile') setValidity('mobile', validators.mobile(t.value.trim()));
if (t.id === 'first_name') setValidity('first_name', !!t.value.trim());
if (t.id === 'last_name') setValidity('last_name', !!t.value.trim());
if (t.id === 'city') setValidity('city', !!t.value.trim());
if (t.id === 'state') setValidity('state', !!t.value.trim());
if (t.id === 'lead_source') setValidity('lead_source', !!t.value);
});
form.addEventListener('submit', (e) => {
// Basic checks before letting HTML submit to Salesforce
const emailOK = validators.email(document.getElementById('email').value.trim());
const mobileOK = validators.mobile(document.getElementById('mobile').value.trim());
const requiredIds = ['first_name','last_name','city','state','lead_source'];
let requiredOK = true;
requiredIds.forEach(id => {
const v = document.getElementById(id).value.trim();
const ok = !!v;
setValidity(id, ok);
if (!ok) requiredOK = false;
});
setValidity('email', emailOK);
setValidity('mobile', mobileOK);
if (!emailOK || !mobileOK || !requiredOK) {
e.preventDefault();
// Focus first invalid
const firstInvalid = document.querySelector('.field.invalid input, .field.invalid select');
if (firstInvalid) firstInvalid.focus();
return;
}
// UX: prevent double submit
submitBtn.setAttribute('disabled', 'disabled');
submitBtn.textContent = 'Submitting…';
});
</script>
</body>
</html>