Receive messages from a Vercel website
A Vercel deployment can post directly to LittleReply from static HTML, React, or Next.js. Configure the exact production origin, decide how previews should be tested, and verify the complete request after deployment.
Create a free formA copyable example
<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="contact-name">Full name *</label>
<input type="text" name="name" id="contact-name" required />
<label for="contact-email">Email address *</label>
<input type="email" name="email" id="contact-email" required />
<label for="contact-message">Message *</label>
<textarea name="message" id="contact-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>The key YOUR_ACCESS_KEY is a placeholder to replace with your form’s public key. The code contains no server key or destination address.
Separate preview and production
Preview URLs may be protected or change for each commit. Use a deliberate preview policy instead of allowing every possible hostname by default.
Production should use the canonical HTTPS domain in metadata, allowed origins, redirects, and provider callbacks.
Avoid an unnecessary serverless proxy
A public form can post directly to the hosted endpoint. A Vercel Function is appropriate when trusted server logic is genuinely required, but it adds another runtime, failure boundary, and log stream.
Verify after deployment
Check the browser request, response code, stored submission, and delivery history on the real host. A successful build alone does not verify runtime recipients or provider callbacks.
Try the template before creating an account
Local preview: changes stay in this browser. No message or email is sent.
HTML contact
Name, email, and message: the essentials for starting a conversation.
LittleReply<!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 stored. We will reply soon.">
<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="fq_name">Your name *</label>
<input type="text" name="name" id="fq_name" required autocomplete="name" />
<label for="fq_email">Your email address *</label>
<input type="email" name="email" id="fq_email" required autocomplete="email" />
<label for="fq_message">Your message *</label>
<textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>
<button type="submit">Send my 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.
Frequently asked questions
Do I need a Vercel Function?
No. Static and client-rendered forms can post directly to the form endpoint.
Should every preview URL be allowed?
Prefer a narrow, intentional preview policy and test the canonical production origin separately.