<!doctype html>
<title>Echo_Chat — Account Creation</title> <style> :root{ --accent:#6a3fb8; --accent-2:#9b6df0; --bg:#f6f2fb; --card:#fff; --muted:#666; --radius:14px; --maxw:900px; } *{box-sizing:border-box;font-family:Inter,Segoe UI,system-ui,Arial;} body{margin:0;background:linear-gradient(180deg,var(--bg),#f3eefb);color:#111;display:flex;align-items:center;justify-content:center;padding:28px;} .container{width:100%;max-width:var(--maxw);} .card{background:var(--card);border-radius:var(--radius);box-shadow:0 6px 30px rgba(60,30,90,0.08);overflow:hidden;} header{padding:22px 26px;border-bottom:4px solid rgba(106,63,184,0.06);display:flex;align-items:center;gap:16px;} .logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px} header h1{margin:0;font-size:20px} header p{margin:0;color:var(--muted);font-size:13px} main{padding:20px 26px;} .progress{height:10px;background:#eee;border-radius:10px;margin-bottom:18px;overflow:hidden} .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s} .step-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .step-title h2{margin:0;font-size:16px} form{display:grid;gap:14px;} .row{display:flex;gap:14px;flex-wrap:wrap} label{font-size:13px;color:var(--muted);display:block;margin-bottom:6px} input[type="text"],input[type="email"],input[type="tel"],select,textarea{ width:100%;padding:12px 14px;border-radius:10px;border:1px solid #e6e1ee;background:transparent;font-size:14px; } .radio-row{display:flex;gap:12px;align-items:center} .actions{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:6px} button{padding:10px 14px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:600;cursor:pointer} button.secondary{background:transparent;color:var(--accent);border:1px solid rgba(106,63,184,0.12)} .hidden{display:none} .muted{color:var(--muted);font-size:13px} .small{font-size:13px} .center{display:flex;align-items:center;gap:10px} .faq{padding:12px;border-radius:10px;background:#fbf8ff;border:1px solid rgba(106,63,184,0.04)} @media(max-width:720px){header{padding:16px}main{padding:16px}} /* quiz modal */ .modal-backdrop{position:fixed;inset:0;background:rgba(8,6,12,0.45);display:none;align-items:center;justify-content:center;padding:18px;z-index:60} .modal{background:#fff;padding:18px;border-radius:12px;max-width:720px;width:100%;box-shadow:0 12px 40px rgba(15,10,30,0.25)} .question{margin-bottom:12px} .badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(106,63,184,0.1);color:var(--accent);font-weight:600;font-size:13px} .success{color:green;font-weight:700} .danger{color:red;font-weight:700} .u-sm{font-size:12px;color:var(--muted)} .file{display:flex;align-items:center;gap:12px} </style>EC
This is ECHO_CHAT APPLICATION FORM. Please fill in your details accurately. You will go through a short pre-qualification quiz before your account can be issued.
<main>
<div class="progress" aria-hidden="true"><div class="bar" id="progressBar"></div></div>
<form id="regForm" autocomplete="on">
<!-- Step 1: Email -->
<section class="step" data-step="1">
<div class="step-title"><h2>Section 1 — Contact</h2><div class="badge">Step 1/10</div></div>
<label for="email">Email *</label>
<input id="email" name="email" type="email" required placeholder="name@example.com" />
</section>
<!-- Step 2: Personal Details -->
<section class="step hidden" data-step="2">
<div class="step-title"><h2>Section 2 — Personal Details</h2><div class="badge">Step 2/10</div></div>
<label for="fullname">Full Name *</label>
<input id="fullname" name="fullname" type="text" required placeholder="Your full name" />
</section>
<!-- Step 3: Telegram -->
<section class="step hidden" data-step="3">
<div class="step-title"><h2>Section 3 — Telegram</h2><div class="badge">Step 3/10</div></div>
<label for="telegram">Telegram Username *</label>
<input id="telegram" name="telegram" type="text" required placeholder="@username or username" />
<p class="u-sm">Please provide your username as it appears on your profile. If you don't have one, create one. Eg: @cosmastrades</p>
</section>
<!-- Step 4: Required Info -->
<section class="step hidden" data-step="4">
<div class="step-title"><h2>Section 4 — Required Information</h2><div class="badge">Step 4/10</div></div>
<div class="row">
<div style="flex:1">
<label>Gender *</label>
<div class="radio-row">
<label><input type="radio" name="gender" value="Male" required/> Male</label>
<label><input type="radio" name="gender" value="Female" /> Female</label>
<label><input type="radio" name="gender" value="Other" /> Other</label>
</div>
</div>
<div style="width:220px">
<label for="phone">Phone Number *</label>
<input id="phone" name="phone" type="tel" required placeholder="+2547..." />
</div>
</div>
</section>
<!-- Step 5: Location -->
<section class="step hidden" data-step="5">
<div class="step-title"><h2>Section 5 — Location</h2><div class="badge">Step 5/10</div></div>
<label for="country">Country</label>
<input id="country" name="country" type="text" placeholder="Country" />
<label for="city">City</label>
<input id="city" name="city" type="text" placeholder="City" />
</section>
<!-- Step 6: Experience -->
<section class="step hidden" data-step="6">
<div class="step-title"><h2>Section 6 — Experience</h2><div class="badge">Step 6/10</div></div>
<label for="experience">Have you used Echo_Chat or similar before?</label>
<select id="experience" name="experience">
<option value="">Select</option>
<option>Yes — I have</option>
<option>No — First time</option>
<option>I've trialed it</option>
</select>
<label for="years">Years of experience (if any)</label>
<input id="years" name="years" type="text" placeholder="0" />
</section>
<!-- Step 7: Referral -->
<section class="step hidden" data-step="7">
<div class="step-title"><h2>Section 7 — Referral</h2><div class="badge">Step 7/10</div></div>
<label for="referrer">How did you hear about us?</label>
<input id="referrer" name="referrer" type="text" placeholder="Friend, Telegram, Social media..." />
</section>
<!-- Step 8: Upload -->
<section class="step hidden" data-step="8">
<div class="step-title"><h2>Section 8 — Profile Pic (optional)</h2><div class="badge">Step 8/10</div></div>
<label for="avatar">Upload profile picture (optional)</label>
<input id="avatar" name="avatar" type="file" accept="image/*" />
<p class="u-sm">Max 5MB. This will not be published publicly without permission.</p>
</section>
<!-- Step 9: Terms -->
<section class="step hidden" data-step="9">
<div class="step-title"><h2>Section 9 — Terms & Policies</h2><div class="badge">Step 9/10</div></div>
<div class="faq">
<p><strong>Pre-qualification:</strong> You'll take a short multiple choice quiz next. Accounts are issued after passing the quiz and verification.</p>
<p class="muted">By continuing you agree to Echo_Chat terms and the privacy policy.</p>
</div>
<label style="margin-top:10px"><input id="agree" type="checkbox" required /> I agree to the terms & policy *</label>
</section>
<!-- Step 10: Final -->
<section class="step hidden" data-step="10">
<div class="step-title"><h2>Section 10 — Finalize</h2><div class="badge">Step 10/10</div></div>
<p class="muted">Before submission you must complete the pre-qualification quiz. Submissions will be recorded and you'll receive a confirmation message.</p>
<div class="row" style="margin-top:8px">
<button type="button" id="startQuiz">Take Pre-Qualification Quiz</button>
<div class="muted" style="align-self:center">or you can <button type="button" class="secondary" id="downloadCSVbtn">Download CSV</button> as a copy.</div>
</div>
</section>
<div class="actions">
<div>
<button type="button" id="prevBtn" class="secondary">← Previous</button>
</div>
<div>
<button type="button" id="nextBtn">Next →</button>
<button type="submit" id="submitBtn" class="hidden">Submit</button>
</div>
</div>
</form>
<hr style="margin:18px 0;border:none;border-top:1px solid #f0edf6" />
<div style="display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between">
<div>
<h3 style="margin:0">About Echo_Chat</h3>
<p class="muted" style="margin:4px 0 0">A platform to connect, respond and scale customer conversations through Telegram and other channels.</p>
</div>
<div style="text-align:right">
<p class="small muted">Have questions? Read the FAQ below or contact <a href="mailto:support@example.com">support@example.com</a></p>
</div>
</div>
</main>
1) What is the primary goal when handling customer chats?
Increase response rate
Ensure correct and helpful answers
Send promotional content only
<div class="question">
<label>2) When receiving a customer payment query, you should:</label>
<div><label><input type="radio" name="q2" value="a" /> Share your personal number</label></div>
<div><label><input type="radio" name="q2" value="b" /> Ask for details and follow the payment guide</label></div>
<div><label><input type="radio" name="q2" value="c" /> Ignore it</label></div>
</div>
<div class="question">
<label>3) If unsure about a policy, you should:</label>
<div><label><input type="radio" name="q3" value="a" /> Guess and reply quickly</label></div>
<div><label><input type="radio" name="q3" value="b" /> Consult sales guide or supervisor</label></div>
<div><label><input type="radio" name="q3" value="c" /> Forward to random colleague</label></div>
</div>
<div style="display:flex;gap:10px;margin-top:12px;justify-content:flex-end">
<button id="submitQuiz">Submit Quiz</button>
</div>
</div>
<div id="quizResult" class="hidden" style="margin-top:12px"></div>
Passed — score: ' + score + '/3. You may now submit your application.
'; // allow submit submitBtn.classList.remove('hidden'); quizBackdrop.style.display='none'; quizBackdrop.setAttribute('aria-hidden','true'); } else { quizResult.innerHTML = 'Not yet qualified — score: ' + score + '/3. Please review the Sales Guide and try again.
'; } }); // CSV download fallback document.getElementById('downloadCSVbtn').addEventListener('click', ()=> { const data = gatherFormData(); const csv = toCSV([data]); const blob = new Blob([csv], {type:'text/csv;charset=utf-8;'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'echo_chat_registration.csv'; a.click(); URL.revokeObjectURL(url); }); // Form gatherer (incl. file names) function gatherFormData(){ const fd = new FormData(form); // include file file name const avatar = document.getElementById('avatar'); const avatarName = avatar.files && avatar.files[0] ? avatar.files[0].name : ''; const obj = {}; for (const [k,v] of fd.entries()){ obj[k] = v; } obj.avatarFilename = avatarName; obj.submittedAt = new Date().toISOString(); return obj; } // Convert to CSV (single row or more) function toCSV(rows){ if (!rows.length) return ''; const keys = Object.keys(rows[0]); const lines = [keys.join(',')]; for (const r of rows){ const vals = keys.map(k => { const v = r[k] === undefined ? '' : String(r[k]).replace(/"/g,'""'); return `"${v}"`; }); lines.push(vals.join(',')); } return lines.join('\\n'); } // Submission: choose destination via JS constant // Options: // 1) GOOGLE_SHEETS_WEBHOOK: set to your Google Apps Script web app URL (recommended). // 2) GOOGLE_FORM_ACTION: set to your Google Form 'formResponse' POST endpoint (if you have it). // 3) If neither is provided the site will prompt to download CSV instead. const CONFIG = { GOOGLE_SHEETS_WEBHOOK: '', // <-- Paste your deployed Apps Script WebApp URL here GOOGLE_FORM_ACTION: '', // <-- Optional: Google Form POST endpoint (formResponse URL) SUBMIT_VIA: 'webhook' // 'webhook' | 'google_form' | 'download' }; // Handle actual submit form.addEventListener('submit', async (e)=>{ e.preventDefault(); // ensure quiz passed (submitBtn only shown when passed) if (submitBtn.classList.contains('hidden')) { alert('Please complete the pre-qualification quiz before submitting.'); return; } const data = gatherFormData(); if (CONFIG.SUBMIT_VIA === 'webhook' && CONFIG.GOOGLE_SHEETS_WEBHOOK){ try { const res = await fetch(CONFIG.GOOGLE_SHEETS_WEBHOOK, { method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(data) }); if (res.ok){ alert('Submission successful — thank you! We will review and get back to you.'); form.reset(); showStep(0); } else { const txt = await res.text(); alert('Submission failed: ' + (txt || res.status)); } } catch(err){ alert('Error sending submission: ' + err.message + '. You can download CSV instead.'); } return; } if (CONFIG.SUBMIT_VIA === 'google_form' && CONFIG.GOOGLE_FORM_ACTION){ // Convert keys to the form's entry. names — user must map them manually // This example tries to post plain key/value pairs; you will likely need to map to entry.XXXXX keys for a real Google Form. try { const formData = new URLSearchParams(); for (const k in data) formData.append(k, data[k]); const res = await fetch(CONFIG.GOOGLE_FORM_ACTION, { method:'POST', body: formData }); if (res.ok) { alert('Submitted to Google Form — thank you.'); form.reset(); showStep(0); } else alert('Failed to submit to Google Form: ' + res.status); } catch(err){ alert('Error posting to Google Form: ' + err.message); } return; } // fallback: download CSV const csv = toCSV([data]); const blob = new Blob([csv], {type:'text/csv;charset=utf-8;'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'echo_chat_registration.csv'; a.click(); URL.revokeObjectURL(url); alert('No submission endpoint configured. A CSV was downloaded for manual import.'); }); })(); </script>