columbusinteractive / typo3-easycaptcha
An easy to use extension which enables you to use captchas in the TYPO3 form extension.
Installs: 11 552
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 3
Forks: 2
Open Issues: 4
Type:typo3-cms-extension
Requires
- php: ^7.2 || ^8.0
- ext-gd: *
- ext-json: *
- laminas/laminas-captcha: ^2.9
- laminas/laminas-session: ^2.9.0
- laminas/laminas-validator: ^2.13.0
- typo3/cms-core: ^12.4
- typo3/cms-form: ^12.4
Requires (Dev)
- roave/security-advisories: dev-master
README
An easy to use extension which enables you to use captchas in the TYPO3 form extension
Installation via Composer
composer require columbusinteractive/typo3-easycaptcha
How it works
Under the hood this extension makes use of the fantastic laminas/laminas-captcha
library. This extension
is using a separated session container to make things easier. A separate session cookie named captcha
is set
and only valid for the current browser session. Keep this in mind for your cookie consent or privacy settings!
Generated captcha images are automatically gargabe collected from time to time, so no worries.
Usage
After you've installed the extension, you will see a new field called "Easy captcha" in your TYPO3 forms editor. Simply add the field and you are good to go. Don't forget to add the static typoscript file in your template!
Customization
The following options are available in the TYPO3 form editor:
- Width of the generated image
- Height of the generated image
- Dot noise level
- Line noise level
- Font size
- Word length
- Option to enable or disable TTS (text-to-speech). This feature uses the
SpeechSynthesis API
(https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)
Styling
The captcha can be styled if necessary. In most cases however, the default styling should be sufficient. The following classes are available:
- easycaptcha (container)
- easycaptcha--initialized (initialized captcha)
- easycaptcha__challenge (wrapper for image and buttons)
- easycaptcha__image-wrapper (wrapper for image)
- easycaptcha__image (image)
- easycaptcha__actions (wrapper for buttons)
- easycaptcha__action-tts (tts button)
- easycaptcha__action-reload (reload button)
- easycaptcha__input-wrapper (wrapper for input)
JS API
Tha JavaScript API can be accessed using window.easycaptcha
.
Available functions:
easycaptcha.init(id: string|HTMLElement): void; easycaptcha.initAll(): void; easycaptcha.reload(id: string|HTMLElement): void; easycaptcha.tts(id: string|HTMLElement): Promise; easycaptcha.get(id: string|HTMLElement): HTMLElement; easycaptcha.getAll(): HTMLCollection;
Demo
We're using the captcha on our corporate website for the contact form.
https://www.columbus-interactive.de/kontakt
License
This TYPO3 extension is open-sourced software licensed under the MIT-Licence