Tilpasset design på captcha

Shoporama viser automatisk en captcha når en bruker oppgir en e-postadresse uten å være logget inn (f.eks. i et kontaktskjema eller ved lagervarsel). Du kan tilpasse utseendet på captchaen ved å opprette din egen malfil.

Når vises captchaen?

Captchaen utløses automatisk når:

• En bruker sender inn et skjema med e-postadresse uten å være logget inn
• Brukeren har en tom handlekurv eller ingen handlekurv
• Forespørselen mangler en HTTP-referer (mistenkelig sending)
• Påmelding til varsel om utsolgte varer (out-of-stock signup)

Slik lager du din egen captcha

Opprett filen captcha.html i temaet ditt:

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

Tilgjengelige variabler

Eksempel (Smarty 4)

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

  <{if $error}>
    <p>Feil kode – prøv igjen.</p>
  <{/if}>

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

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

  <button type="submit">Bekreft</button>
</form>

Automatisk innsending etter 3 tegn

De fleste temaer sender inn skjemaet automatisk når brukeren har skrevet inn 3 tegn. Du kan implementere dette med følgende JavaScript:

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

Du kan style captcha-siden fritt med CSS, så lenge de tre nødvendige elementene er med: <{$form}>, bildet fra <{$imgstr}>, og inndatafeltet med name="c".

Trenger du hjelp? Kontakt oss på support@shoporama.dk.