Implementing ReCAPTCHA in CommonSpot for Perl Script Forms

bewgrosseteteSoftware and s/w Development

Dec 13, 2013 (3 years and 8 months ago)

107 views

Implementing
ReCAPTCHA in CommonSpot for Perl Script F
orms


Skill Level: Advanced


Note:

UW
-
Eau Claire’s primary Web form system is Qualtrics, a product that makes form creation quite simple. We
recommend its use unless you are converting an existing form
or there is another distinct advantage to using the
Perl Script form system.


If you do use the UW
-
Eau Claire Perl Script form system, it does not automatically provide protection from email
spam. Adding the ReCaptcha feature provides a measure of protecti
on by eliminating mechanical spamming,
requiring a human eye to type in a special code before submitting the form.


If you do not already have a Perl Script form, you must first create the form
. You could copy an existing form that is
similar to what you n
eed or you could build a form from scratch using Dreamweaver. Here are some
Online Help
tutorial
s
:



Perl Script Form:


http://www.uwec.edu/help/html/c
-
qckref.htm

Dreamweaver:



http://www.uwec.edu/help/DreamweaverCS3/for
-
script.htm


Once your for
m is complete, be sure to test it

to make sure you get the intended results.


Adding ReCAPTCHA to an Existing Form

Note:

Use the
Modi
fying the Form

step
(below)

for instructions on
changing a form
that already
uses ReCAPTCHA

Also see:
Using the HTML Element

(separate handout)




Use a text editor to open the ex
isting HTML form file



Copy all the code starting and ending with
<form> … </form>

then close the file



Use a text editor to create a new text file and paste the copied code into the new file



R
eplace the URL in the
<form … action=”…”>

line in the code:








Copy and paste the following text above the submission section of the page code. Look for code that
reads
<input type=”submit”…>
and/or
<input type=”reset”…>
















<script type="text/javascript"
src="http://api.recaptcha.net/challenge?k=6LcKoQAAAAAAAAxeQ_vSYhulmk
Tb_AKXMEmr4Xus">


</script>



<noscript>


<iframe
src=http://api.recaptcha.net/noscript?k=6LcKoQAAAAAAAAxeQ_vSYhulmkT
b_AKXMEmr4Xus h
eight="300" width="500" frameborder="0">

</iframe><br>


<textarea name="recaptcha_challenge_field" rows="3" cols="40">

</textarea>

<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript><br />


</noscript>

/scripts/formm
ail/formmail.pl or http://www.uwec.edu/scripts/formmail/formmail.pl

WITH:


http://www.uwec.edu/scripts/formmail/formmail
-
captcha.pl




Save the file in your
CommonSpot source file

space. Recommended file name is to
use the

page’
s root
name plus ‘source’ with the .htm extension (e.g.,

the source for

form.htm
would be

formsource.htm
).



Placing the
F
orm on a CommonSpot Page



Either create a new page in CommonSpot or browse to an existing p
age you wish to place the form

o
n



Log in and switch to Edit mode



From the section of the page where the form is to reside:

o

Click to insert a new element

>>
Miscellaneous Elements

>>
HTML

o

Click here to define the HTML element

o

Browse to the .htm
source
file

just created

o

FINISH

o

Apply mar
gin as needed using the
Style

option for the HTML element

o

Test the form



Modifying the Form

I
f
the form should need to be modified, make the edits in the source file and use the following steps
. D
o

NOT

use
the
E
dit

option located

within the HTML element
.




Using a text editor, open the source HTML file, make the edits and save the file



From the CommonSpot page

where the form is located
, in
Edit

mode, click the
HTML
element options icon

o

Select
Upload Content

o

Browse to the .htm source file just created

o

FI
NISH

o

Test the form