Anpassad design på captcha

Shoporama visar automatiskt en captcha när en användare anger en e-postadress utan att vara inloggad (t.ex. i ett kontaktformulär eller vid ett lagermeddelande). Du kan anpassa captchans utseende genom att skapa en egen mallfil.

När visas captcha-koden?

Captcha-koden aktiveras automatiskt när:

• En användare skickar in ett formulär med e-postadress utan att vara inloggad
• Användaren har en tom varukorg eller ingen varukorg alls
• Förfrågan saknar en HTTP-referer (misstänkt avsändning)
• Registrering för lagermeddelanden (out-of-stock signup)

Så här skapar du din egen captcha

Skapa filen captcha.html i ditt tema:

• Smarty 4-teman — templates/captcha.html
• Smarty 2-teman — captcha.html i temamappen

Tillgängliga variabler

Exempel (Smarty 4)

<form action="" method="post">
  <{$form}>

  <{if $error}>
    <p>Felaktig kod – försök igen.</p>
  <{/if}>

  <img src="<{$imgstr}>" alt="Captcha">

  <input type="text" name="c" autocomplete="off"
         maxlength="3" autofocus>

  <button type="submit">Bekräfta</button>
</form>

Automatisk inlämning efter 3 tecken

De flesta teman skickar in formuläret automatiskt när användaren har skrivit 3 tecken. Du kan implementera detta med följande JavaScript:

document.querySelector('input[name="c"]')
  .addEventListener('input', function() {
    if (this.value.length === 3) {
      this.closest('form').submit();
    }
  });

Du kan fritt utforma captcha-sidan med CSS, så länge de tre nödvändiga elementen finns med: <{$form}>, bilden från <{$imgstr}>, och inmatningsfältet med name="c".

Behöver du hjälp? Kontakta oss på support@shoporama.dk.