Integration

Connect a Webflow form to your email workflow

Webflow already includes form handling. An external endpoint is useful when you need the same intake workflow across several sites, a separate private inbox, or delivery and integration history outside the Webflow project.

LittleReply · Reviewed on October 20, 2026

Create a free form

A copyable example

HTML

<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.

Decide whether an external endpoint helps

Keep Webflow's native handling when it meets the project requirements. Add another service only for a concrete need such as cross-site workflow, specific retention controls, or a shared team inbox.

Preserve field names and feedback

Map each Webflow input name to the published schema. Keep accessible success and error messages, and test redirects on the deployed domain rather than only in the Designer.

Verify both systems

Confirm the request leaves the Webflow page, appears in the LittleReply inbox, and reaches configured destinations. Do not treat a browser success state as proof of email delivery.

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

Customize fields and styling

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 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.

Sources

Webflow form handling

Frequently asked questions

Does Webflow lack forms?

No. It has native form handling. Use an external backend when its workflow better matches the project.

Can I keep my Webflow design?

Yes. The endpoint changes the processing path, not the visual form design.

From example to your form

Create a free form