Monthly Archives: November 2015

Customizing Magento’s Native Captcha (Advanced)

If you implemented native Magento captcha before (potentially using this tutorial Magento Captcha Contact Form) you’ll notice that captcha image is fairly small in height, has a lot of dots (also knows as noise level), some random lines, and very small font.

native captcha on contact form

Luckily, all these attributes (as well as background) can be changed. Magento has a block class Mage_Captcha_Model_Zend located in “app/code/core/Mage/Captcha/Model/Zend.php” which extends Zend_Captcha_Image class.

Zend_Captcha_Image class contains functions we need to modify properties like noise level, lines, and font height. We’re not going to touch this class because the class which renders our captcha using _toHtml() function is Mage_Captcha_Model_Zend.

Note: This example is a continuation (or builds on top of) primary tutorial on setting up native captcha on contact page.

Overview: We will extend Mage_Captcha_Model_Zend model, make necessary changes to captcha settings, and modify our config.xml to indicate to Magento that we’re rewriting Magento’s core file with our’s.

Step 1: Create a new block class inside “app/code/local/Tutorial/Captcha/Block/Captcha/” called Zend.php, and paste the following code.

Yellow lines outline new addition on top of core _toHtml() function found inside Mage_Captcha_Model_Zend. Functions used in this piece of code are self-explanatory so I’ll just list default values Magento uses when generating native captcha.

In our new _toHtml() function we reduce noise level from 200 to 50, set line noise level from 5 to 0, and increase font-size from 24 to 30.

Step 2: Modify config.xml to ensure Magento uses our Block class to generate new captcha image. Below is the complete config.xml used in initial tutorial with additions of new block override code highlight in yellow.

In this snippet we override Mage_Captcha_Model_Zend class with our own Tutorial_Captcha_Block_Captcha_Zend. In result, you get the following captcha which is far more readable then native captcha generation. Keep in mind, captcha is meant to be hard to read but not impossible. How readable you make captcha is up to your and your requirements, this is just an example and is not used in practice.

magento modified captcha image

This is it for this example but not the end to allowed modifications. Further, you can modify captcha image background, font style used to generate text, font text color and more. This can be achieved by extending and overriding “_generateImage($id, $word)” function inside Zend’s Zend_Captcha_Image class.

Update: GitHub repository now available

Magento Captcha For Contact Us Form

Magento comes with a built-in Captcha which you can utilize in your own pages. For this tutorial I’m using Magento 1.9.2.1 and default theme so template files (.phtml) modifications will reside in “app/design/frontend/base/default/“.

Overview: We will create our own module to avoid overriding core Magento files, add our form label (and ID) to CAPTCHA Form section in adminhtml,specify where and how captcha will be rendered on our page, and lastly add an observe to trigger validation when the form is submitted.

Step 1: Create a new module called Captcha under Tutorial namespace (Tutorial_Captcha).

Step 2: Add our form to adminhtml in System->Configuration->Customers->Customer Configuration->Captcha->Forms.

Refresh your adminhtml page to see “Contact Page” show up as one of the options under CAPTCHA->Forms area. Select “Contact Page” as an option by highlighting it, update Display Mode to “Always“, and click “Save“.

Adminhtml Captcha Contact Form

Step 3: Create local.xml file with the following code:

First thing to notice is the <formId> node contains the same value as what we used for key node in Step 2. Overall this piece of code targets Contacts module, Index controller and Index action. Then we reference a block name “contactForm” (which is defined inside “app/design/frontend/base/default/layout/contacts.xml” on line 45) and insert our new captcha child block. New child block adds “captcha.js” into website’s head section for generating new captcha images. Rest is captcha width/height settings which you can modify according to your needs.

Step 4: Modify “app/design/frontend/base/default/template/contacts/form.phtml” file to include our new captcha child block.

This will output captcha block if all conditions are met which were outlined in adminhtml CAPTCHA settings. Refresh the page and you should see captcha added to your form.

Magento Contact Us Captcha
Step 5: Now that Captcha is showing up on our page, the last thing we need to do is add an observer model and specify an event to trigger observer to validate captcha input.

This file defines a function which is used to validate our captcha input. You’ll notice the $formId variable reflects the same key node we’ve been using throughout this tutorial. Body of this function uses exactly the same validation code as default Magento captcha on pages like registration, login, forgotpassword, admin login, admin forgot password, etc.

Highlighted section is our new addition. Models node defines our model folder. Events node is for watching for specific events. We want to target only one specific action and that’s post action of our contacts controller, so the key node of our event is “controller_action_predispatch_contacts_index_post“. The rest is basic observer definition which declared type of our observer (model in this case), class definition. For <class> node, you can specify full class name “Tutorial_Captcha_Model_Observer” or like in the code above (Magento style).

That’s it, happy coding.

Update: GitHub repository now available