Hide your forms from bots. Hydrate for humans. Astro's stealthiest anti-spam weapon.
npm install astro-phantom-forms!MIT License
!Built for Astro
!Tests
!TypeScript
> The Problem: Spam bots fill out your contact forms, newsletter signups, and comment sections
> The Solution: Hide forms from server-side rendering, show them only to real users with JavaScript
---
``bash`
npm install astro-phantom-forms
Wrap any form with PhantomForm to hide it from bots:
`astro
---
import { PhantomForm } from 'astro-phantom-forms';
---
`
Result: Bots see nothing in the HTML source. Real users see the form when they scroll to it.
---
The secret: Most spam bots don't execute JavaScript. They scrape HTML and find... nothing.
---
`astro`
`astro`
`astro`
`astro`
---
Control when forms appear to users:
| Mode | When Forms Load | Best For |
|------|----------------|----------|
| load | Immediately when page loads | Critical forms (login, checkout) |
| idle | When browser is idle | Secondary forms (newsletter, feedback) |
| visible | When scrolled into view | Footer forms, below-fold content |
`astro
`
---
Works with all Astro-supported frameworks:
astro
---
import { PhantomForm } from 'astro-phantom-forms';
import ContactForm from '../components/ContactForm.jsx';
---
`$3
`astro
---
import { PhantomForm } from 'astro-phantom-forms';
import ContactForm from '../components/ContactForm.vue';
---
`$3
`astro
---
import { PhantomForm } from 'astro-phantom-forms';
import ContactForm from '../components/ContactForm.svelte';
---
`$3
`astro
---
import { PhantomForm } from 'astro-phantom-forms';
---
`---
๐ SEO & Accessibility
$3
- โ
No impact on SEO: Search engines won't see forms anyway
- โ
Progressive enhancement: Works without JavaScript for indexing
- โ
Semantic HTML: Forms use proper markup when rendered$3
- โ
Screen reader compatible: Forms render normally for assistive tech
- โ
Keyboard navigation: Full keyboard support maintained
- โ
Focus management: Tab order preserved
- โ
ARIA attributes: All accessibility features intact$3
- โ
Zero bundle size: Uses native Web Components
- โ
Lazy loading: Forms load only when needed
- โ
No dependencies: Pure JavaScript implementation---
๐ ๏ธ Advanced Usage
$3
`astro
`$3
`astro
---
import PhantomForm from 'astro-phantom-forms/components/PhantomForm.astro';
---
`$3
Full TypeScript definitions included:`typescript
interface Props {
mode?: 'load' | 'idle' | 'visible';
}
`---
๐งช Testing & Development
`bash
Run tests
npm testBuild package
npm run buildLocal development
npm link
`$3
Check that forms are hidden from SSR:`bash
View source - should show no form elements
curl -s https://yoursite.com/contact | grep -i "`---
๐ง Installation & Setup
$3
- Astro 5.8.1 or higher
- Node.js 18+
- Modern browsers with JavaScript enabled$3
`bash
npm install astro-phantom-forms
`$3
`astro
import { PhantomForm } from 'astro-phantom-forms';
import PhantomForm from 'astro-phantom-forms/components/PhantomForm.astro';
`---
๐ Comparison
| Solution | User Friction | Spam Blocking | SEO Impact | Setup Complexity |
|----------|---------------|---------------|------------|------------------|
| PhantomForm | โ
None | โ
Excellent | โ
None | โ
Minimal |
| CAPTCHA | โ High | โ
Good | โ Negative | โ Complex |
| Honeypots | โ
None | โ ๏ธ Moderate | โ
None | โ ๏ธ Moderate |
| Rate Limiting | โ ๏ธ Some | โ ๏ธ Moderate | โ
None | โ Complex |
| JS Challenges | โ ๏ธ Some | โ
Good | โ ๏ธ Some | โ Complex |
---
๐ก Why This Works
$3
Most spam bots:
- ๐ค Scrape HTML without executing JavaScript
- ๐ค Submit forms found in static HTML source
- ๐ค Don't handle client-side rendering
- ๐ค Target server-side rendered content$3
PhantomForm:
- ๐ป Hides forms from static HTML (bots see nothing)
- ๐ป Renders forms client-side (humans see everything)
- ๐ป Uses Web Components (native browser support)
- ๐ป Leverages Astro's islands architectureResult: 90%+ spam reduction with zero user impact.
---
๐ Migration Guide
$3
`astro
`$3
`astro
``---
Spam Protection: Block form spam, prevent bot submissions, stop automated attacks
Astro Components: Form components, client-side rendering, islands architecture
Anti-Bot: Bot detection, spam prevention, automated protection
Web Forms: Contact forms, newsletter signups, authentication forms
JavaScript: Client-side hydration, progressive enhancement, Web Components
User Experience: No CAPTCHAs, frictionless forms, invisible protection
---
- ๐ Installation Guide - Detailed setup instructions
- ๐ง Examples - Real-world usage examples
- ๐ Troubleshooting - Common issues and solutions
- ๐ค Contributing - Help improve the project
---
- ๐ Bug reports: GitHub Issues
- ๐ฌ Questions: GitHub Discussions
- ๐ง Security issues: Contact privately
---
MIT License - see LICENSE.md for details.
---
Stop fighting spam. Start using stealth. ๐ป
Built with โค๏ธ for the Astro community.