Missouri State University

Adding a CAPTCHA Test to a Form Outside Web Press

Missouri State offers a CAPTCHA test that can be added to any online form.  A CAPTCHA test can help keep bots and other automated programs from completing online forms.  This helps to reduce spam submissions. 

When a user tries to fill out a form that includes the Missouri State CAPTCHA test, they must either identify a sequence of distorted characters or identify numbers from an audio clip. 

Required Code

You can add a javascript validated CAPTCHA test to your form with the following steps:

  1. Open the code of the page that contains your form for editing.
  2. Insert the following code immediately before the closing </body> tag:
    <script language="Javascript" type="text/javascript">
    </script>
    <script language="Javascript" type="text/javascript" src="/WebInclude/captcha/Captcha.js"></script>
  3. Find the beginning form tag of the form to which you want to add the CAPTCHA and set the attribute id = "captchaForm":
    <form name="form1" action="formprocessor.asp" method="post" id="captchaForm">
  4. Save and publish the page.

Options

The following code is optional and does not need to be included.

FormID

If the id attribute of the form cannot be changed you can set the FormID option to the form's id.  Values must consist of alphanumeric characters only.

  1. Get the id of the form.
    <form name="form1" action="formprocessor.asp" method="post" id="thisFormID">
  2. To use the FormID option add the variable FormID to the CAPTCHA options list and set it equal to the id of the form: <script language="Javascript" type="text/javascript">
      FormID = "thisFormID";  
    </script>

NoJavascriptDivID

You can use the NoJavascriptDivID option to hide the form from viewers who have javascript turned off and display a message instead.  Note the CAPTCHA test won't work if the viewer has javascript turned off.

  1. Create a div with an id that contains a message to display to users who have javascript turned off. 
    <div id="noJSMsg">This page requires javascript. Please make sure javascript is enabled and refresh this page.</div> 
  2. Find the beginning form tag and set the attribute style = "display:none;".
    <form name="form1" action="formprocessor.asp" method="post" id="captchaForm" style="display:none;">
  3. Add the variable NoJavascriptDivID and set it equal to the id of the div created in step 1.
    <script language="Javascript" type="text/javascript">
      NoJavascriptDivID = "noJSMsg";
    </script>

CaptchaFieldsBeforeID

The CaptchaFieldsBeforeID option can be used to control where in the form the CAPTCHA fields are placed.  By default the fields are placed just before the submit button or (if one isn't found) at the beginning of the form.  To manually place the CAPTCHA fields:

  1. Find or place a tag with id that the CAPTCHA fields will come immediately before. 
    The tag can already exist or you can create a tag (such as an empty span tag) just for this purpose. 
    <span id="captchaHere"></span>  
  2. Add the CaptchaFieldsBeforeID option to the CAPTCHA options list and set the value to the id of the tag from step 1.
    <script language="Javascript" type="text/javascript">
      CaptchaFieldsBeforeID = "captchaHere";
    </script>

PutCaptchaInDL

If the form fields use a dl structure, the CAPTCHA fields should go in their own dt/dd tags.  Use the PutCaptchaInDL option to note that the tag corresponding to the CaptchaFieldsBeforeID option is inside a dl structure.  The CaptchaFieldsBeforeID option must be used with the PutCaptchaInDL option.  The PutCaptchaInDL option can only take the value "true".

<script language="Javascript" type="text/javascript">
  CaptchaFieldsBeforeID = "captchaHere";
  PutCaptchaInDL = "true";
</script>

UniqueName

The UniqueName option can help prevent collisions between multiple CAPTCHA objects. 

  1. Add the UniqueName option and value to the CAPTCHA options list. (e.g. UniqueName = "someName"). 
    <script language="Javascript" type="text/javascript">
      UniqueName = "myCaptcha001";
    </script>
  2. The id attribute of the form must be set to the UniqueName plus the word "Form" (e.g. <form id="someNameForm" ...).
    <form name="form1" action="formprocessor.asp" method="post" id="myCaptcha001Form">

Note: If the FormID option is used the form id attribute should be set to it instead of the id from UniqueName.