Custom design on captcha

Shoporama automatically displays a CAPTCHA when a user submits an email address without being logged in (e.g., via a 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 triggered automatically when:

• A user submits a form with an email address without being logged in
• The user has an empty cart or no cart
• The request is missing an HTTP referer (suspicious submission)
• Signing up for out-of-stock notifications

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>Incorrect code – please 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 automatically submit the form when 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 however you like with CSS, as long as the three required elements are included: <{$form}>, the image from <{$imgstr}>, and the input field with name="c".

Need help? Contact us at support@shoporama.dk.