Menu
Contact

A modern contact form for business enquiries

Collect business context without making every optional detail a barrier to starting the conversation.

Local preview: changes stay in this browser. No message or email is sent.

Modern contact

Room for every detail.

1 / 1
LittleReply
Customize the template
Labels and required fields

Add your identity, purpose, applicable basis, retention, rights contact, and privacy link. This example is not legal advice.

Standalone HTML / CSS
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Contact form</title>
<style>form[data-littlereply]{max-width:640px;margin:2rem auto;padding:1.5rem;font:16px/1.6 system-ui,sans-serif;color:#202033;background:white;border:1px solid #e4e4ee;border-radius:16px;box-sizing:border-box}form[data-littlereply] label{display:block;margin-top:1rem;font-weight:600}form[data-littlereply] input,form[data-littlereply] textarea,form[data-littlereply] select{box-sizing:border-box;width:100%;padding:.75rem;font:inherit;border:1px solid #727285;border-radius:8px;background:white;color:#202033}form[data-littlereply] input[type=checkbox],form[data-littlereply] input[type=radio]{width:auto}form[data-littlereply] button{margin-top:1rem;padding:.8rem 1.1rem;font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--form-accent,#4f46e5);color:white;cursor:pointer}form[data-littlereply] :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}form[data-littlereply] button:disabled{opacity:.6}form[data-littlereply] [role=status]{min-height:1.6em}form[data-littlereply] fieldset{border:0;padding:0}form[data-littlereply] .privacy-notice{font-size:.875rem;color:#4b4b60}
form[data-littlereply]{--form-accent:#4f46e5;--form-ink:#ffffff}
form[data-littlereply] button{color:var(--form-ink)}form[data-littlereply] button[data-fq-back]{background:#eee;color:#202033}form[data-littlereply] [hidden]{display:none}</style></head><body>
<form action="https://littlereply.com/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="en" data-success="Your message has been received.">
  <input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />

  <label for="modern-name">Full name *</label>
  <input type="text" name="name" id="modern-name" required />

  <label for="modern-email">Email address *</label>
  <input type="email" name="email" id="modern-email" required />

  <label for="modern-company">Company (optional)</label>
  <input type="text" name="company" id="modern-company" />

  <label for="modern-phone">Phone number (optional)</label>
  <input type="tel" name="phone" id="modern-phone" />

  <label for="modern-message">Message *</label>
  <textarea name="message" id="modern-message" required rows="5"></textarea>

  <button type="submit">Send message</button>
  <p role="status" aria-live="polite"></p>
</form>
<!-- Accessible AJAX errors and duplicate-safe retries -->
<script src="https://littlereply.com/client/v1.js" data-api="https://littlereply.com" defer></script>
</body></html>

Replace YOUR_ACCESS_KEY with your form's public key. The code includes its styles and an AJAX enhancement; the native HTML POST also works without JavaScript.

Install this template

  1. Keep company and phone optional unless every request truly needs them.
  2. Use the message prompt to tell visitors which context helps your team reply.
  3. Assign stored enquiries in the workspace instead of routing only through inbox forwarding.
  4. Select “Use this template” to carry the current configuration into signup.
  5. Verify recipients, publish the form, and replace the example key in the generated code.
  6. Send a recognizable test and inspect storage and delivery separately.

Frequently asked questions

Does this template send a real submission in preview?

No. The public preview stays in your browser. Create and publish a form before using its public key on a live site.

Can I change the fields and styling?

Yes. Customize labels, requirements, colors, confirmation text, and the published schema before installing the generated code.