Adding CAPTCHA protection to your Next.js forms doesn't have to be complicated. Altcha provides a privacy-focused solution that's easy to implement and doesn't track your users. Let's add it to a simple contact form. ## What You Need Before starting, make sure you have: 1. **Next.js application** 2. **Pro subscription** - Altcha needs [Static Forms](https://www.staticformx.xyz) Pro 3. **API key** - From your Static Forms account ## Step 1: Install Altcha ```bash npm install altcha ``` ## Step 2: Add Your API Key Create a `.env.local` file: ```env NEXT_PUBLIC_STATIC_FORMS_API_KEY=your_api_key_here ``` ## Step 3: Create a Simple Contact Form Here's a basic contact form with Altcha verification: ```tsx 'use client'; import { useState, useEffect } from 'react'; export default function ContactForm() { const [isSubmitting, setIsSubmitting] = useState(false); const [status, setStatus] = useState(''); // Load ALTCHA package useEffect(() => { import('altcha'); }, []); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const form = e.currentTarget; setIsSubmitting(true); try { const formData = new FormData(form); formData.append('apiKey', process.env.NEXT_PUBLIC_STATIC_FORMS_API_KEY || ''); const response = await fetch('https://api.staticforms.xyz/submit', { method: 'POST', body: formData, }); if (response.ok) { setStatus('Message sent successfully!'); form.reset(); // Reset ALTCHA widget const altchaWidget = document.querySelector('altcha-widget') as any; if (altchaWidget?.reset) { altchaWidget.reset(); } } else { setStatus('Failed to send message. Please try again.'); } } catch (error) { setStatus('An error occurred. Please try again.'); } finally { setIsSubmitting(false); } }; return (

{status && (

{status}

)}

Name

Message

</div>
        
        <div>
          <label className="block mb-2 font-medium">Verify you're human</label>
          <altcha-widget
            challengeurl={`https://www.staticforms.xyz/api/altcha/challenge?apiKey=${process.env.NEXT_PUBLIC_STATIC_FORMS_API_KEY || ''}`}
            name="altchaToken"
          />
        </div>
        
        <button
          type="submit"
          disabled={isSubmitting}
          className="w-full py-3 bg-blue-600 text-white rounded-md disabled:bg-gray-400"
        >
          {isSubmitting ? 'Sending...' : 'Send Message'}
        </button>
      </form>
    </div>
  );
}
```

## Step 4: Use the Component

Create a page to use your form:

```tsx
// app/contact/page.tsx
import ContactForm from './ContactForm';

export default function ContactPage() {
  return (
    <div className="container mx-auto py-12">
      <h1 className="text-3xl font-bold text-center mb-8">Contact Us</h1>
      <ContactForm />
    </div>
  );
}
```

## Step 5: Enable Altcha

1. Go to your [CAPTCHA settings](https://www.staticformx.xyz/settings/captcha)
2. Switch to "Altcha" tab
3. Generate your keys
4. Save settings

## That's It!

Your form now has privacy-focused CAPTCHA protection. The widget automatically:

- ✅ Loads and verifies challenges  
- ✅ Works without tracking users
- ✅ Protects against spam
- ✅ No puzzles for users to solve

## Need Help?

- [Get Pro access](https://www.staticformx.xyz/pricing) to use Altcha
- [Configure settings](https://www.staticformx.xyz/settings/captcha) in your account
- [Read more guides](/blog/getting-started-with-static-forms)

## Related Articles

- [Implementing Altcha CAPTCHA on HTML Websites](/blog/implementing-altcha-captcha-html-website)
- [Getting Started with Static Forms](/blog/getting-started-with-static-forms)
- [Adding Contact Forms to Static Sites](/blog/adding-contact-forms-to-static-sites)
</article></body></html>

Posts tagged “nextjs”

Filter by Tag

How to Implement Altcha CAPTCHA in Next.js: Privacy-First Form Protection