Member Avatar for Chris_53

I have tried my best to find an info about this on the internet, but had no luck, sadly. So I would ask here:

Please take a look on this [spam link removed]

Can anybody tell me please how to make the same contact form (at the bottom-right corner)?

Edited by happygeek because: spam link deleted, accept this as a warning not to do this again - thanks
  • 2 Contributors
  • 1 Reply
  • 279 Views
  • 35 Minutes Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

A common pattern for that bottom‑right contact widget is either a hosted chat/contact script (as pointed out) or a lightweight off‑canvas form implemented with HTML/CSS/JS. Below is a compact, practical DIY pattern that recreates the same appearance and behaviour while keeping full control over accessibility, validation and data handling — useful when a hosted script is not desirable.

<button class="contact-toggle" aria-expanded="false" aria-controls="contactPanel" aria-label="Open contact form">Contact</button>

<div id="contactPanel" class="contact-panel" role="dialog" aria-hidden="true">
  <form id="contactForm" action="/contact" method="post" novalidate>
    <input name="name" type="text" placeholder="Name" required>
    <input name="email" type="email" placeholder="Email" required>
    <textarea name="message" placeholder="Message" required></textarea>
    <input name="hp" type="text" tabindex="-1" autocomplete="off" style="position:absolute; left:-9999px;">
    <button type="submit">Send</button>
    <button type="button" class="close">Close</button>
  </form>
</div>
.contact-toggle { position:fixed; right:20px; bottom:20px; z-index:1000; }
.contact-panel { position:fixed; right:20px; bottom:70px; width:320px; max-width:90vw;
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.2); transform:translateY(10px);
  opacity:0; transition:.22s; pointer-events:none; }
.contact-panel[aria-hidden="false"] { transform:translateY(0); opacity:1; pointer-events:auto; }
const t = document.querySelector('.contact-toggle');
const p = document.getElementById('contactPanel');
const f = document.getElementById('contactForm');

t.addEventListener('click', () => {
  const open = t.getAttribute('aria-expanded') === 'true';
  t.setAttribute('aria-expanded', String(!open));
  p.setAttribute('aria-hidden', String(open));
  if (!open) p.querySelector('[name=name]').focus();
});

f.addEventListener('submit', async (e) => {
  e.preventDefault();
  if (f.hp.value) return; // simple honeypot
  const data = new FormData(f);
  const res = await fetch(f.action, { method: 'POST', body: data });
  if (res.ok) { /* show success, reset form */ }
});

Notes and troubleshooting: always validate and sanitize on the server, include CSRF protection and rate limiting, and log minimal personal data to meet privacy requirements. Replace the honeypot with CAPTCHA or rate limits if spam persists. For accessibility, trap focus inside the panel while open, support Esc to close, ensure labels/contrast and test with a screen reader. On small screens prefer a full‑width bottom sheet instead of a tiny floating box. This approach complements ’s hosted‑widget suggestion while giving a controllable, audit‑friendly implementation to adapt.

Member Avatar for gentlemedia

I assume you mean the realtime chat/messaging functionality which iis a free script to implement from https://www.tawk.to/

But the link (and anchor text you used) to that site smells spammy to me too.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.