Custom design on captcha
Guide to customize the captcha design in your Shoporama theme with your own HTML and styling.
Shoporama automatically displays a captcha when a user submits an email address without being logged in (e.g. contact form or stock notification). You can customize the appearance of the captcha by creating your own template file.
When does the captcha appear?
The captcha is automatically triggered when:
- A user submits a form with email without being logged in
- The user has an empty cart or no cart
- The request is missing an HTTP referer (suspicious sending)
- Out-of-stock signup (out-of-stock signup)
How to create your own captcha
Create the captcha.html file in your theme:
- Smarty 4 themes -
templates/captcha.html - Smarty 2 themes -
captcha.htmlin the theme root
Available variables
| Variable | Variable Description |
|---|---|
<{$imgstr}> | Base64 encoded PNG image with captcha code (310×100 px) |
<{$form}> | Hidden form fields with the original POST data |
<{$error}> | Set to true if the user entered incorrect code |
Example (Smarty 4)
Important.
The input field must have name="c" - this is the field Shoporama validates against. The code is 3 characters and is validated case-insensitively.
Auto-submit after 3 characters
Most themes auto-submit the form after the user has entered 3 characters. You can implement this with the following JavaScript:
document.querySelector('input[name="c"]') .addEventListener('input', function() { if (this.value.length === 3) { this.closest('form').submit(); } });
You can style the captcha page freely with CSS as long as the three required elements are included: <{$form}>, the image from <{$imgstr}>, and the input field with name="c".
Do you need help? Contact us at support@shoporama.dk.