Custom design on captcha

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.html in the theme root

Available variables

Example (Smarty 4)

<form action="" method="post"> <{$form}> <{if $error}> <p>Wrong code - try again.</p> <{/if}> <img src="<{$imgstr}>" alt="Captcha"> <input type="text" name="c" autocomplete="off" maxlength="3" autofocus> <button type="submit">Confirm</button> </form>

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.