Menu
Create your first form
Examples and frameworks

Astro

Install a LittleReply form with Astro.

Integration approach

Use Astro to render or enhance the public form while LittleReply handles the published schema, durable intake, private inbox, and configured destinations.

Before copying code

  1. Create and publish the form with the exact field names used by the example.
  2. Copy its public key and configure the deployed origin.
  3. Keep recipients and private credentials out of browser code.

Example to adapt

Replace the example key and endpoint, then adapt labels and styles without changing transport names accidentally.

Astro
---
// Contact.astro: this form does not require a server adapter.
---
<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>

Verify the result

Check the browser request and response, find the stored submission, then inspect delivery history. Repeat the test on the actual deployed hostname.

Documentation reviewed on October 20, 2026Suggest an improvement →