BotDetect CAPTCHA Options: Form Object Settings Code Example

The PHP Captcha options: Form Object Settings example shows how to configure Captcha challenges by setting Captcha object properties in PHP form source.

First Time Here?

Check the BotDetect Developer Crash Course for key integration steps.

Multiple PHP forms within the same PHP website can be protected by BotDetect Captcha challenges: e.g. you could include simple-botdetect.php in both your Contact form and Registration form source.

To function properly, separate Captcha challenges placed on each form should have different names (CaptchaId values sent to the Captcha object constructor, "Captcha1" and "Captcha2" in this example), and can use completely different Captcha settings.

Even multiple Captcha instances placed on the same form won't interfere with each other's validation and functionality. And if a user opens the same page in multiple browser tabs, each tab will independently validate the shown Captcha code.

Example Location

The PHP Captcha options: Form object settings code example is included in the examples/simple-api-captcha-form-object-settings-example folder of the download package.

Download the BotDetect PHP CAPTCHA Library and run this example

index.php

<?php require("lib/simple-botdetect.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>BotDetect PHP CAPTCHA Options: Form Object Settings Code Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link type="text/css" rel="Stylesheet" href="stylesheet.css" />
  <link type="text/css" rel="stylesheet" href="lib/simple-botdetect.php?get=layout-stylesheet" />
  <script src="lib/simple-botdetect.php?get=script-include"></script>
</head>
<body>
  <form method="post" action="" class="column" id="form1">

    <h1>BotDetect PHP CAPTCHA Options: <br /> Form Object Settings Code Example</h1>

    <fieldset>
      <legend>PHP CAPTCHA validation</legend>
      <label for="CaptchaCode">Retype the characters from the picture:</label>

       <?php // Adding BotDetect Captcha to the page
        $Captcha1 = new SimpleCaptcha("Captcha1");
        echo $Captcha1->Html();
      ?>

      <div class="validationDiv">
        <input name="CaptchaCode1" type="text" id="CaptchaCode1" />

        <?php // when the form is submitted
          if ($_POST) {
            // validate the Captcha to check we're not dealing with a bot
            $isHuman = $Captcha1->Validate();

            if (!$isHuman) {
              // Captcha validation failed, show error message
              echo '<span class="incorrect">Incorrect code</span>';
            } else {
              // Captcha validation passed, perform protected action
              echo '<span class="correct">Correct code</span>';
            }
          }
        ?>
      </div>

    </fieldset>


    <fieldset>
      <legend>PHP CAPTCHA validation</legend>
      <label for="CaptchaCode">Retype the characters from the picture:</label>

      <?php // Adding BotDetect Captcha to the page
        $Captcha2 = new SimpleCaptcha("Captcha2");
        echo $Captcha2->Html();
      ?>

      <div class="validationDiv">
        <input type="text" name="CaptchaCode2" id="CaptchaCode2" />

        <?php // when the form is submitted
          if ($_POST) {
            // validate the Captcha to check we're not dealing with a bot
            $isHuman = $Captcha2->Validate();

            if (!$isHuman) {
              // Captcha validation failed, show error message
              echo '<span class="incorrect">Incorrect code</span>';
            } else {
              // Captcha validation passed, perform protected action
              echo '<span class="correct">Correct code</span>';
            }
          }
        ?>
      </div>

    </fieldset>

    <input type="submit" name="SubmitButton" id="SubmitButton" value="Submit Form" />
  </form>
</body>
</html>

In the first one, Captcha protection is added to the form using a Captcha identifier unique to the page ("Captcha1").

In the second one, we use a different Captcha identifier to distinguish between Captcha instances ("Captcha2"). This is important to do when you add multiple Captcha protection to the form because Captcha codes and other Captcha data are stored in Session state using keys based on CaptchaId values.

If multiple Captcha instances in the form were using the same identifier, one Captcha's data would overwrite the other's when a visitor opened the form.

lib/config/botdetect.xml

<?xml version="1.0" encoding="UTF-8"?>
<botdetect xmlns="https://captcha.com/schema/php"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://captcha.com/schema/php
      https://captcha.com/schema/php/botdetect-4.2.3.xsd">

  <captchaStyles>
    <captchaStyle>
      <name>Captcha1</name>

      <userInputID>CaptchaCode1</userInputID>
      <codeLength>6</codeLength>
      <codeStyle>Numeric</codeStyle>
      <disallowedCodeSubstrings>1,2,3,4,5,00,777,9999</disallowedCodeSubstrings>

      <imageStyle>SunAndWarmAir</imageStyle>
      <imageWidth>250</imageWidth>
      <imageHeight>60</imageHeight>
      <imageFormat>png</imageFormat>

      <soundEnabled>true</soundEnabled>
      <soundStyle>Synth</soundStyle>
      <soundFormat>WavPcm8bit8kHzMono</soundFormat>
      <soundRegenerationMode>Limited</soundRegenerationMode>
      <soundStartDelay>100</soundStartDelay> <!-- 0.1 seconds -->

      <locale>es-MX</locale>
      <imageTooltip>Custom Mexican Spanish Captcha image tooltip</imageTooltip>
      <soundTooltip>Custom Mexican Spanish Captcha sound icon tooltip</soundTooltip>
      <reloadTooltip>Custom Mexican Spanish Captcha reload icon tooltip</reloadTooltip>
      <helpLinkUrl>custom-mexican-spanish-captcha-help-page.html</helpLinkUrl>
      <helpLinkText>Custom Mexican Spanish Captcha help link text</helpLinkText>

      <reloadEnabled>true</reloadEnabled>
      <useSmallIcons>false</useSmallIcons>
      <useHorizontalIcons>false</useHorizontalIcons>
      <soundIconUrl></soundIconUrl>
      <reloadIconUrl></reloadIconUrl>
      <iconsDivWidth></iconsDivWidth>
      <helpLinkEnabled>true</helpLinkEnabled>
      <helpLinkMode>text</helpLinkMode>
      <tabIndex>-1</tabIndex>
      <additionalCssClasses>class1 class2 class3</additionalCssClasses>
      <additionalInlineCss>border: 4px solid #fff; background-color:#f8f8f8;</additionalInlineCss>

      <addCssInclude>false</addCssInclude>
      <addScriptInclude>false</addScriptInclude>
      <addInitScriptInclude>true</addInitScriptInclude>
      <autoUppercaseInput>true</autoUppercaseInput>
      <autoFocusInput>true</autoFocusInput>
      <autoClearInput>true</autoClearInput>
      <autoReloadExpiredCaptchas>true</autoReloadExpiredCaptchas>
      <autoReloadTimeout>7200</autoReloadTimeout> <!-- 2 hours -->
      <remoteScriptEnabled>true</remoteScriptEnabled>
    </captchaStyle>


    <captchaStyle>
      <name>Captcha2</name>

      <userInputID>CaptchaCode2</userInputID>
      <codeLength>3</codeLength>
      <codeStyle>alpha</codeStyle>
      <disallowedCodeSubstrings>AAA,BBB,CCC</disallowedCodeSubstrings>

      <imageStyle>BlackOverlap,Graffiti,Overlap</imageStyle>
      <imageWidth>120</imageWidth>
      <imageHeight>35</imageHeight>
      <imageFormat>png</imageFormat>

      <customDarkColor>#006400</customDarkColor>
      <customLightColor>#eeeeff</customLightColor>

      <soundStyle>Dispatch</soundStyle>
      <soundFormat>WavPcm8bit8kHzMono</soundFormat>
      <soundRegenerationMode>none</soundRegenerationMode>

      <locale>fr-CA</locale>
      <imageTooltip>Custom Canadian French Captcha image tooltip</imageTooltip>
      <soundTooltip>Custom Canadian French Captcha sound icon tooltip</soundTooltip>
      <reloadTooltip>Custom Canadian French Captcha reload icon tooltip</reloadTooltip>
      <helpLinkUrl>custom-canadian-french-captcha-help-page.html</helpLinkUrl>
      <helpLinkText>Custom Canadian French Captcha help link text</helpLinkText>

      <reloadEnabled>true</reloadEnabled>
      <useSmallIcons>true</useSmallIcons>
      <useHorizontalIcons>true</useHorizontalIcons>
      <soundIconUrl></soundIconUrl>
      <reloadIconUrl></reloadIconUrl>
      <iconsDivWidth>50</iconsDivWidth>
      <helpLinkEnabled>true</helpLinkEnabled>
      <helpLinkMode>image</helpLinkMode>
      <tabIndex>15</tabIndex>
      <additionalCssClasses></additionalCssClasses>
      <additionalInlineCss></additionalInlineCss>

      <addCssInclude>false</addCssInclude>
      <addScriptInclude>false</addScriptInclude>
      <addInitScriptInclude>true</addInitScriptInclude>
      <autoUppercaseInput>false</autoUppercaseInput>
      <autoFocusInput>false</autoFocusInput>
      <autoClearInput>false</autoClearInput>
      <autoReloadExpiredCaptchas>true</autoReloadExpiredCaptchas>
      <autoReloadTimeout>3600</autoReloadTimeout> <!-- 1 hours -->
      <soundStartDelay>1000</soundStartDelay> <!-- 1 second -->
      <remoteScriptEnabled>false</remoteScriptEnabled>
    </captchaStyle>
  </captchaStyles>

</botdetect>

In botdetect.xml, we configure captcha options for the Captcha1 and Captcha2 captcha style names. You can find a full list of available Captcha configuration options and related instructions at the Captcha configuration options page.