Implementing Altcha CAPTCHA on HTML Websites
Traditional CAPTCHA solutions often compromise user privacy by tracking visitors and requiring external dependencies. Altcha offers a revolutionary alternative - a privacy-first, self-hosted CAPTCHA that uses proof-of-work challenges instead of visual puzzles. In this comprehensive guide, we'll show you how to implement Altcha CAPTCHA on your HTML website.
What is Altcha CAPTCHA?
Altcha is a modern CAPTCHA alternative that prioritizes user privacy and provides a seamless experience. Unlike traditional solutions, Altcha:
- No cookies or tracking - Fully GDPR compliant
- Self-hosted - No external dependencies on Google or other services
- Invisible verification - Users don't need to solve puzzles
- Proof-of-work based - Uses computational challenges instead of visual recognition
Prerequisites
Before implementing Altcha, ensure you have:
- Paid plan - Altcha is available on Static Forms paid plans (Pro or Advanced)
- API key - Your Static Forms API key
Step 1: Configure Altcha in Your Account
First, set up Altcha in your Static Forms account:
- Navigate to your CAPTCHA settings
- Switch to the "Altcha" tab
- Generate your Altcha keys
- Configure difficulty and expiration settings
- Save your site key for frontend integration
Step 2: Simple HTML Form
Create a basic HTML form with Altcha:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form with Altcha</title>
<!-- Include Altcha Library -->
<script src="https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/altcha.min.js" type="module"></script>
</head>
<body>
<h1>Contact Us</h1>
<form action="https://api.staticforms.dev/submit" method="POST">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<!-- Altcha Widget - Just add this one line! -->
<altcha-widget
challengeurl="https://www.staticforms.dev/api/altcha/challenge?apiKey=YOUR_API_KEY_HERE"
name="altchaToken">
</altcha-widget>
<input type="hidden" name="apiKey" value="YOUR_API_KEY_HERE">
<button type="submit">Send Message</button>
</form>
</body>
</html>That's it! Just add the script tag and the <altcha-widget> element. The widget handles everything automatically - no JavaScript needed!
Step 3: Optional Styling
Add some basic CSS to make it look better:
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
div { margin: 15px 0; }
label { display: block; margin-bottom: 5px; }
input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
button { background: #007cba; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #005a87; }
</style>Step 4: Common Options (Optional)
You can customize the widget with these simple options:
<!-- Hide the Altcha branding -->
<altcha-widget
challengeurl="https://www.staticforms.dev/api/altcha/challenge?apiKey=YOUR_API_KEY_HERE"
name="altchaToken"
hidefooter="true">
</altcha-widget>
<!-- Auto-verify when user focuses on form -->
<altcha-widget
challengeurl="https://www.staticforms.dev/api/altcha/challenge?apiKey=YOUR_API_KEY_HERE"
name="altchaToken"
auto="onfocus">
</altcha-widget>Simple Color Customization
Change the widget colors to match your site:
altcha-widget {
--altcha-color-border: #your-border-color;
--altcha-color-border-focus: #your-focus-color;
}That's It!
Your form now has Altcha CAPTCHA protection. The widget automatically:
- ✅ Loads and verifies challenges
- ✅ Handles all the complex cryptography
- ✅ Sends the token with your form
- ✅ Protects against spam and bots
Quick Troubleshooting
Widget not showing?
- Make sure you included the script:
<script src="https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/altcha.min.js" type="module"></script> - Replace
YOUR_API_KEY_HEREwith your actual API key
Form not working?
- Check you have a paid plan (Altcha requires Pro or Advanced)
- Verify Altcha is enabled in your account settings
Complete Working Example
Copy and paste this complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form with Altcha</title>
<!-- Include Altcha -->
<script src="https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/altcha.min.js" type="module"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
div { margin: 15px 0; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
button { background: #007cba; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
button:hover { background: #005a87; }
</style>
</head>
<body>
<h1>Contact Form</h1>
<form action="https://api.staticforms.dev/submit" method="POST">
<div>
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Your Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<!-- Altcha CAPTCHA - Replace YOUR_API_KEY_HERE with your actual key -->
<altcha-widget
challengeurl="https://www.staticforms.dev/api/altcha/challenge?apiKey=YOUR_API_KEY_HERE"
name="altchaToken">
</altcha-widget>
<input type="hidden" name="apiKey" value="YOUR_API_KEY_HERE">
<div>
<button type="submit">Send Message</button>
</div>
</form>
</body>
</html>Just replace YOUR_API_KEY_HERE with your actual API key and you're done!
Why Use Altcha?
- ✅ Privacy-first - No tracking or cookies
- ✅ User-friendly - No puzzles to solve
- ✅ GDPR compliant - Built-in privacy protection
- ✅ Easy to implement - Just 2 lines of code
- ✅ Works everywhere - Modern browsers only
Need Help?
- Get a paid plan (Pro or Advanced) to use Altcha
- Configure Altcha in your account settings
- Read more form guides
Conclusion
Altcha is the easiest way to add privacy-focused CAPTCHA to your forms. Just include the script, add the widget, and you're protected from spam while respecting your users' privacy.
Ready to get started? Upgrade to a paid plan today!
Related Articles
Implementing Altcha CAPTCHA in Next.js
Learn how to integrate Altcha CAPTCHA into your Next.js application for enhanced privacy. Complete guide with React components.
hCaptcha Best Practices
A practical guide to using hCaptcha, including setup decisions, common mistakes, and implementation planning tips.
Cloudflare Turnstile Best Practices
A practical guide to using Cloudflare Turnstile, including rollout advice, common mistakes, and implementation planning tips.