Skip to content

Commit 988e96c

Browse files
CoreJavaPulseCoreJavaPulse
committed
Refactor contact modal JS, add honeypot, auto-close, focus trap, and add JSON-LD structured data
1 parent 563ea53 commit 988e96c

File tree

3 files changed

+402
-25
lines changed

3 files changed

+402
-25
lines changed

‎contact-form.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!-- ================= SECURE CONTACT MODAL ================= -->
2+
<div class="contact-modal" id="contactModal" aria-hidden="true" role="dialog" aria-modal="true"
3+
aria-labelledby="contactModalTitle" aria-describedby="contactModalDesc">
4+
<div class="modal-overlay" id="closeModal"></div>
5+
6+
<div class="modal-content secure-modal">
7+
<button class="modal-close" id="modalCloseBtn" aria-label="Close">&times;</button>
8+
9+
<div class="secure-badge">Secure & Confidential Channel</div>
10+
11+
<h2 id="contactModalTitle">Request a Confidential Discussion</h2>
12+
13+
<p class="modal-note secure-note" id="contactModalDesc">
14+
This channel is intended for sensitive inquiries. Information shared is accessible only to authorized
15+
personnel. Please avoid sharing credentials or account numbers.
16+
</p>
17+
18+
<form class="contact-form" action="https://formspree.io/f/mqedkrpv" method="POST">
19+
20+
<!-- Hidden metadata -->
21+
<input type="hidden" name="source" value="Secure Website Contact">
22+
<input type="hidden" name="confidentiality" value="Privileged & Confidential">
23+
24+
<label>
25+
Full Name *
26+
<input type="text" name="name" required autocomplete="name" placeholder="John Doe">
27+
</label>
28+
29+
<label>
30+
Email Address *
31+
<input type="email" name="email" required autocomplete="email" placeholder="your.email@example.com">
32+
</label>
33+
34+
<label>
35+
Phone
36+
<input type="tel" name="phone" placeholder="+1 (555) 000-0000" autocomplete="tel">
37+
</label>
38+
39+
<label>
40+
Company / Organization
41+
<input type="text" name="company" placeholder="Your organization" autocomplete="organization">
42+
</label>
43+
44+
<label>
45+
Organization / Institution
46+
<input type="text" name="organization" placeholder="Institution name" autocomplete="organization">
47+
</label>
48+
49+
<label>
50+
Service Type *
51+
<select name="service_type" required>
52+
<option value="">Select a service</option>
53+
<option value="fraud_investigation">Fraud Investigation</option>
54+
<option value="financial_risk_advisory">Financial Risk Advisory</option>
55+
<option value="aml_compliance_review">AML & Compliance Review</option>
56+
<option value="due_diligence">Due Diligence</option>
57+
</select>
58+
</label>
59+
60+
<!-- Honeypot field (invisible to users) -->
61+
<label style="display:none;">
62+
Leave this field empty
63+
<input type="text" name="hp_email" autocomplete="off">
64+
</label>
65+
66+
67+
<label>
68+
Nature of Inquiry
69+
<textarea name="message" rows="4"
70+
placeholder="High-level description only. Do not include credentials or account numbers."></textarea>
71+
</label>
72+
73+
<div class="secure-footer">
74+
<span>End-to-end encrypted transmission</span>
75+
<span>Restricted access</span>
76+
</div>
77+
78+
<p id="formFeedback" class="small-note" style="display:none;"></p>
79+
<button type="submit" class="form-submit secure-submit">
80+
Submit Secure Request
81+
</button>
82+
83+
<p class="small-note">
84+
Engagements are subject to independence and conflict-of-interest checks.
85+
</p>
86+
</form>
87+
</div>
88+
</div>

‎css/style.css‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,179 @@ img {
264264
}
265265
}
266266

267+
/* =========================================================
268+
CONTACT MODAL
269+
========================================================= */
270+
.contact-modal {
271+
position: fixed;
272+
inset: 0;
273+
display: none;
274+
z-index: 2000;
275+
}
276+
277+
.contact-modal.active {
278+
display: block;
279+
}
280+
281+
.modal-overlay {
282+
position: absolute;
283+
inset: 0;
284+
background: rgba(2, 8, 23, 0.75);
285+
backdrop-filter: blur(6px);
286+
}
287+
288+
/* Modal Content Scrollable */
289+
.modal-content.secure-modal {
290+
position: relative;
291+
max-width: 480px;
292+
max-height: 80vh; /* Make modal scrollable if too tall */
293+
overflow-y: auto;
294+
margin: 5vh auto; /* Center vertically */
295+
background: linear-gradient(#ffffff, #ffffff) padding-box,
296+
linear-gradient(135deg, #0dcaf0, #fcd34d) border-box;
297+
border: 1px solid rgba(13, 202, 240, 0.45);
298+
padding: 32px;
299+
border-radius: 14px;
300+
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
301+
animation: modalFadeUp 0.4s ease;
302+
}
303+
304+
@keyframes modalFadeUp {
305+
from { opacity: 0; transform: translateY(30px); }
306+
to { opacity: 1; transform: translateY(0); }
307+
}
308+
309+
.modal-close {
310+
position: absolute;
311+
top: 14px;
312+
right: 16px;
313+
background: none;
314+
border: none;
315+
font-size: 26px;
316+
cursor: pointer;
317+
color: #64748b;
318+
}
319+
320+
.secure-badge {
321+
display: inline-flex;
322+
align-items: center;
323+
gap: 6px;
324+
background: rgba(13, 202, 240, 0.12);
325+
color: #075985;
326+
font-size: 12px;
327+
font-weight: 700;
328+
padding: 6px 14px;
329+
border-radius: 999px;
330+
margin-bottom: 14px;
331+
letter-spacing: 0.3px;
332+
}
333+
334+
.secure-badge::before {
335+
content: "🔒";
336+
font-size: 13px;
337+
}
338+
339+
.modal-note.secure-note {
340+
font-size: 13px;
341+
color: #475569;
342+
border-left: 3px solid #0dcaf0;
343+
padding-left: 10px;
344+
margin-bottom: 20px;
345+
}
346+
347+
/* =========================================================
348+
CONTACT FORM
349+
========================================================= */
350+
.contact-form label {
351+
display: block;
352+
font-size: 12.5px;
353+
font-weight: 600;
354+
color: #334155;
355+
margin-bottom: 10px;
356+
}
357+
358+
.contact-form input,
359+
.contact-form textarea,
360+
.contact-form select {
361+
width: 100%;
362+
margin-top: 6px;
363+
padding: 12px 14px;
364+
font-family: inherit;
365+
font-size: 14px;
366+
border-radius: 8px;
367+
border: 1px solid #cbd5e1;
368+
background: #ffffff;
369+
color: #334155;
370+
transition: 0.3s;
371+
}
372+
373+
.contact-form input::placeholder,
374+
.contact-form textarea::placeholder,
375+
.contact-form select option {
376+
color: #94a3b8;
377+
font-size: 13px;
378+
}
379+
380+
.contact-form input:focus,
381+
.contact-form textarea:focus,
382+
.contact-form select:focus {
383+
outline: none;
384+
border-color: #0dcaf0;
385+
box-shadow: 0 0 0 2px rgba(13, 202, 240, 0.2);
386+
}
387+
388+
.contact-form select {
389+
appearance: none;
390+
-webkit-appearance: none;
391+
-moz-appearance: none;
392+
background: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path fill='%2394a3b8' d='M4 6l4 4 4-4z'/></svg>") no-repeat right 12px center;
393+
background-size: 12px;
394+
padding-right: 36px;
395+
cursor: pointer;
396+
}
397+
398+
/* Footer & Submit */
399+
.secure-footer {
400+
display: flex;
401+
justify-content: space-between;
402+
gap: 10px;
403+
font-size: 12px;
404+
color: #475569;
405+
margin: 12px 0 18px;
406+
flex-wrap: wrap;
407+
}
408+
409+
.secure-footer span {
410+
display: flex;
411+
align-items: center;
412+
gap: 6px;
413+
}
414+
415+
.form-submit.secure-submit {
416+
background: linear-gradient(135deg, #020617, #0dcaf0);
417+
color: #ffffff;
418+
letter-spacing: 0.3px;
419+
font-weight: 600;
420+
padding: 14px;
421+
width: 100%;
422+
border-radius: 8px;
423+
border: none;
424+
cursor: pointer;
425+
transition: 0.3s;
426+
}
427+
428+
.form-submit.secure-submit:hover {
429+
background: linear-gradient(135deg, #020617, #0891b2);
430+
}
431+
432+
.small-note {
433+
font-size: 12px;
434+
color: #64748b;
435+
margin-top: 12px;
436+
}
437+
438+
439+
267440
/* =========================================================
268441
SECTIONS
269442
========================================================= */

0 commit comments

Comments
 (0)