← back to Butlr
views/public/new.ejs
162 lines
<%- include('../partials/head', { title, meta_desc }) %>
<%- include('../partials/header') %>
<main class="new-call">
<section class="section">
<div class="wrap narrow">
<header class="form-header">
<p class="muted small"><a href="/">← Home</a></p>
<h1>Start a call</h1>
<p class="muted">Tell us who to call and what you need done. Fields that look sensitive are sensitive — we mask them in lists and only show them on this call's detail page when you click "Reveal".</p>
</header>
<% if (errors && errors.length) { %>
<div class="form-errors">
<strong>Fix these:</strong>
<ul>
<% errors.forEach(function(e) { %><li><%= e %></li><% }); %>
</ul>
</div>
<% } %>
<form method="POST" action="/new" class="call-form" autocomplete="off">
<fieldset>
<legend>1. What kind of call</legend>
<p class="muted small">Pick the closest fit. The form below adjusts to show what's typically needed.</p>
<div class="category-pick">
<% categories.forEach(function(c) {
var selected = preset ? (preset.id === c.id) : (form.category === c.id);
%>
<label class="category-pick-card <%= selected ? 'selected' : '' %>">
<input type="radio" name="category" value="<%= c.id %>" <%= selected ? 'checked' : '' %> required>
<span class="category-pick-icon"><%= c.icon %></span>
<span class="category-pick-label"><%= c.label %></span>
</label>
<% }); %>
</div>
</fieldset>
<fieldset>
<legend>2. Who to call</legend>
<label class="field">
<span class="field-label">Business name <em>required</em></span>
<input type="text" name="business_name" value="<%= form.business_name || '' %>" maxlength="120" placeholder="e.g. Chase Sapphire customer service" required>
</label>
<label class="field">
<span class="field-label">Phone number to call <em>required</em></span>
<input type="tel" name="business_phone" value="<%= form.business_phone || '' %>" maxlength="20" placeholder="1-800-..." required>
<span class="field-hint">US format works. International numbers — use full E.164 (+44...).</span>
</label>
</fieldset>
<fieldset>
<legend>3. What you want done</legend>
<label class="field">
<span class="field-label">The goal of the call <em>required, ≥8 chars</em></span>
<textarea name="goal" rows="5" maxlength="1500" placeholder="<%= preset && preset.defaultGoal ? preset.defaultGoal : 'Be specific. \\\'Request credit limit increase from $5,000 to $10,000\\\' is better than \\\'help with credit card\\\'.' %>" required><%= form.goal || (preset && preset.defaultGoal) || '' %></textarea>
</label>
<label class="field">
<span class="field-label">Anything else the rep should know <span class="muted">— optional</span></span>
<textarea name="notes" rows="3" maxlength="500" placeholder="Context, history, prior case numbers, etc."><%= form.notes || '' %></textarea>
</label>
</fieldset>
<fieldset>
<legend>4. Account info <span class="muted">(only if the rep will ask)</span></legend>
<p class="muted small">Stored encrypted-at-rest in Phase 2; masked in all list views. Only shown on this call's detail page when you click Reveal.</p>
<div class="field-row">
<label class="field">
<span class="field-label">Account number</span>
<input type="text" name="account_number" value="<%= form.account_number || '' %>" maxlength="40" placeholder="Last 4 minimum, full if needed" autocomplete="off">
</label>
<label class="field">
<span class="field-label">Last 4 of SSN</span>
<input type="text" name="last4_ssn" value="<%= form.last4_ssn || '' %>" maxlength="4" inputmode="numeric" pattern="\d{4}" placeholder="1234" autocomplete="off">
</label>
</div>
<div class="field-row">
<label class="field">
<span class="field-label">Billing ZIP</span>
<input type="text" name="billing_zip" value="<%= form.billing_zip || '' %>" maxlength="5" inputmode="numeric" pattern="\d{5}" placeholder="90210" autocomplete="off">
</label>
<label class="field">
<span class="field-label">Date of birth</span>
<input type="text" name="date_of_birth" value="<%= form.date_of_birth || '' %>" maxlength="10" placeholder="MM/DD/YYYY" autocomplete="off">
</label>
</div>
<label class="field">
<span class="field-label">Verbal-auth password / security answer</span>
<input type="text" name="auth_password" value="<%= form.auth_password || '' %>" maxlength="60" placeholder='e.g. "Maiden name: Smith"' autocomplete="off">
<span class="field-hint">Some lines ask "what's your verbal password?" — give it here and we'll have it ready.</span>
</label>
</fieldset>
<fieldset>
<legend>5. How to reach you back</legend>
<div class="field-row">
<label class="field">
<span class="field-label">Your name <em>required</em></span>
<input type="text" name="callback_name" value="<%= form.callback_name || '' %>" maxlength="80" required>
</label>
<label class="field">
<span class="field-label">Your phone <em>required</em></span>
<input type="tel" name="callback_phone" value="<%= form.callback_phone || '' %>" maxlength="20" placeholder="for the bridge when a human picks up" required>
</label>
</div>
<label class="field">
<span class="field-label">Your email <span class="muted">— optional</span></span>
<input type="email" name="callback_email" value="<%= form.callback_email || '' %>" maxlength="120">
</label>
<label class="field">
<span class="field-label">Best time window <span class="muted">— optional</span></span>
<input type="text" name="best_time_window" value="<%= form.best_time_window || '' %>" maxlength="60" placeholder='e.g. "weekdays 9am-6pm PT"'>
</label>
</fieldset>
<fieldset>
<legend>6. Limits</legend>
<div class="field-row">
<label class="field">
<span class="field-label">Max hold time</span>
<select name="max_hold_minutes">
<option value="15" <%= form.max_hold_minutes === '15' ? 'selected' : '' %>>15 min — quick try</option>
<option value="30" <%= form.max_hold_minutes === '30' ? 'selected' : '' %>>30 min</option>
<option value="60" <%= !form.max_hold_minutes || form.max_hold_minutes === '60' ? 'selected' : '' %>>60 min (default)</option>
<option value="120" <%= form.max_hold_minutes === '120' ? 'selected' : '' %>>2 hours</option>
<option value="180" <%= form.max_hold_minutes === '180' ? 'selected' : '' %>>3 hours (worst-case insurance/IRS)</option>
</select>
</label>
<label class="field">
<span class="field-label">Max spend (¢)</span>
<select name="max_spend_cents">
<option value="100" <%= form.max_spend_cents === '100' ? 'selected' : '' %>>$1.00</option>
<option value="250" <%= form.max_spend_cents === '250' ? 'selected' : '' %>>$2.50</option>
<option value="500" <%= !form.max_spend_cents || form.max_spend_cents === '500' ? 'selected' : '' %>>$5.00 (default)</option>
<option value="1000" <%= form.max_spend_cents === '1000' ? 'selected' : '' %>>$10.00</option>
<option value="2500" <%= form.max_spend_cents === '2500' ? 'selected' : '' %>>$25.00</option>
</select>
</label>
</div>
</fieldset>
<fieldset>
<legend>7. Notifications & consent</legend>
<label class="check"><input type="checkbox" name="notify_sms" <%= form.notify_sms === 'on' ? 'checked' : 'checked' %>> Text me when an agent picks up</label>
<label class="check"><input type="checkbox" name="notify_email" <%= form.notify_email === 'on' ? 'checked' : '' %>> Email me the call summary afterwards</label>
<label class="check"><input type="checkbox" name="consent_recording" <%= form.consent_recording === 'on' ? 'checked' : '' %>>I consent to recording the call (recording laws vary by state; we follow two-party-consent where required)</label>
<label class="check req"><input type="checkbox" name="consent_terms" <%= form.consent_terms === 'on' ? 'checked' : '' %> required> I authorize Butlr to dial the business number on my behalf and bridge me when a human answers <em>required</em></label>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn primary">Queue this call →</button>
<a class="btn ghost" href="/">Cancel</a>
</div>
</form>
</div>
</section>
</main>
<%- include('../partials/footer') %>
<script src="/js/form.js" defer></script>