Astro (Static & SSR)

Get Endpoint Free

Interactive Live Sandbox

Test submitting this live demo form in real-time.

Ready

3-Step Integration Checklist

1Create a form in your Formtruck Dashboard to get your endpoint URL.

2Paste the component code into your codebase.

3Receive instant submission alerts in your inbox and dashboard!

Implementation Code

Copy-paste ready

astro-integration.tsx

123456789101112
---
// src/components/ContactCard.astro
---
 
<form action="https://api.formtruck.com/f/ft_YOUR_FORM_ID" method="POST" class="contact-form">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <input type="hidden" name="_next" value="/thank-you" />
  <input type="text" name="_gotcha" style="display: none;" tabindex="-1" />
  <button type="submit">Submit via Formtruck</button>
</form>

Formtruck Special Form Field Attributes

name="_gotcha"Honeypot

Keep this field hidden via CSS. If a spam bot fills it out, Formtruck silently traps the submission into your spam folder.

name="_next"Redirect

Specify a custom thank-you page URL (e.g. https://yoursite.com/thank-you) for native HTML POST submissions.

name="_subject"Email Subject

Customize the email notification subject line (e.g. New VIP Client Inquiry).