Building a JAMstack Contact Form with FormCrab

If you’re building a static site on the JAMstack—React, Vue, Svelte, Astro, Hugo, or plain HTML—there’s a common pain point that keeps popping up: how do you let visitors contact you without exposing your email address?

Traditional contact forms require a server, a database, and often a handful of lines of backend code. That adds maintenance overhead, hosting cost, and, most importantly, a security surface that spambots love to exploit.

Enter FormCrab. It gives you a private, anti‑spam‑protected link that you can drop anywhere—GitHub READMEs, Twitter bios, static blog posts, you name it. When a user clicks the link they’re taken to a hosted landing page, fill‑out a simple form, and the message lands directly in your inbox. No code, no server, no hidden email in the page source.


Why FormCrab is a Perfect Fit for JAMstack Projects

Feature Benefit for Your Static Site
Receive Messages, Hide Your Email Your real address never appears in the HTML, keeping crawlers and bots at bay.
No Code Required Just copy‑paste a link. No JavaScript, no PHP, no serverless functions to maintain.
Built‑in Anti‑Spam Protection FormCrab filters out common spam patterns automatically.
One‑click Deployment The landing page, the form, and the backend are all hosted by FormCrab.
Zero Hosting Costs You don’t need a separate server or a paid SaaS for a simple contact form.
Customizable Email Form Link Add GET parameters to pre‑fill fields, set a subject, or redirect after submission.

Because the form is served from a dedicated domain (formcrab.com), web scrapers that hunt for mailto: links will never find your address. This makes it ideal for any public‑facing static content where you still want a reliable way for visitors to reach out.


Adding a FormCrab Link to Your JAMstack Site

All you need is your unique token (replace {custom-link} with the value you receive when you create a form on FormCrab). Here’s a basic example you can drop into any Markdown file, HTML page, or even a README:

[Contact Me](https://formcrab.com/f/{custom-link})

That’s it—click it and the user lands on a clean, mobile‑responsive contact page. The form includes fields for name, email, subject, and message, and the submission is sent straight to the email address you configured in your FormCrab dashboard.


Supercharge the Experience with GET Parameters

FormCrab lets you pre‑populate fields or control post‑submission behavior by appending query parameters to the link. Below are five practical use‑cases. Replace {custom-link} with your token.

1. Auto‑fill the Name

If you already know the visitor’s name (e.g., from a logged‑in session), pass it via the name parameter:

<a href="https://formcrab.com/f/{custom-link}?name=Hugh" target="_blank">Email us</a>

2. Pre‑set Visitor Email

When you already have the visitor’s email address, use the email parameter:

<a href="https://formcrab.com/f/{custom-link}[email protected]" target="_blank">Contact Support</a>

3. Custom Subject

Group incoming messages by setting a subject that appears in your notification email:

<a href="https://formcrab.com/f/{custom-link}?subject=Urgent+Support+Request" target="_blank">Report an Issue</a>

4. Predefined Message

Provide a short template to guide users, making it easier for them to send the right information:

<a href="https://formcrab.com/f/{custom-link}?message=I+would+like+to+request+a+demo" target="_blank">Inquiry</a>

5. Custom Redirect After Submit

Instead of the default “Thank You” page, send users back to a page on your own site:

<a href="https://formcrab.com/f/{custom-link}?next=https://yoursite.com/success" target="_blank">Send and Return</a>

All of these parameters are optional—mix and match them to create a frictionless experience that feels native to your brand.


Quick Walkthrough: Integrating FormCrab into an Astro Blog

  1. Create the form on formcrab.com. You’ll be handed a token like abc123.

  2. In your Astro component (or any Markdown file), add a link:

    <a href="https://formcrab.com/f/abc123?subject=Blog+Feedback" class="btn-primary">
      Send Feedback
    </a>
    
  3. Deploy the site (e.g., Vercel, Netlify, Cloudflare Pages). No extra build steps are required.

  4. When a reader clicks “Send Feedback,” they see a form that already has “Blog Feedback” in the subject line. After they submit, the message lands in your inbox and they’re redirected to your custom thank‑you page if you added a next parameter.

That’s the whole workflow—no serverless function, no extra dependencies, no maintenance.


TL;DR

  • FormCrab gives you a private, spam‑protected contact link that works everywhere.
  • No code, no servers, no hidden email addresses.
  • Use GET parameters to pre‑fill fields, set a subject, or redirect after a successful submit.
  • Perfect for static JAMstack sites, GitHub READMEs, Twitter bios, and any place where you need a simple “reach‑out” button.

Ready to stop exposing raw email addresses and start receiving clean, organized messages? Head over to formcrab.com, create your first form, and embed the link in minutes. Your inbox (and your privacy) will thank you.

Ready to build your own forms?

Start receiving submissions today without worrying about email exposure or complex backends.

Create Your Private Link
Back to all articles