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

13 thoughts on “Magento Captcha For Contact Us Form

  1. Nilanjib Roy

    Thank you so much. I really needed this steps. I tried many tutorial before but this is the simplest way to add a captcha .
    –Thanks

    Reply
  2. Nilanjib Roy

    Hi, Got a problem. It works fine on localhost. But on my decelopment server it gives an 404 error. But it sends email. Is it a redirection problem? Log file says

    “a:5:{i:0;s:144:”Cannot send headers; headers already sent in /home/avijit/public_html/nilanjib/aksplr/app/code/local/Tutorial/Captcha/Model/Observer.php”

    Reply
    1. dchayka Post author

      Did you add anything else to the observer or used what was provided?

      If the code is sending an email that means captcha was validated correctly and it could be something with your success redirect. Can you post your Observer code here please?

      Thank you.

      Reply
  3. Jos

    Can you please tell me where to create Step 3: Create local.xml file with the following code:

    I can’t seem to find where I should make this file in. In which folder?

    Reply
    1. dchayka Post author

      Jos, as mentioned in the first paragraph I used a default theme, the path to which is “app/design/frontend/base/default/”. In result, “local.xml” should be created inside “app/design/frontend/base/default/layout/”.

      Reply
  4. Jamie

    I am using a custom form, design/frontend/athlete/default/template/contacts/form.php
    I have added the code up to step 4, but the captcha is not showing on the form.
    is there something I need to change to reference the custom form?

    thanks

    Reply
    1. dchayka Post author

      Hi Jamie,

      If your module is loaded correctly and you saw “Contact Page” multi-select option added in adminhtml CAPTCHA section then so far so good. Make sure “Enable CAPTCHA on Frontend” is set to “Yes”.

      It’s possible that your “local.xml” file is not properly configured, if you place a “die(‘stop here’);” statement inside your theme’s “form.phtml” file, does the script execution terminate there or keep running as expected? If the “die();” statement is not triggered this means your form file is not being hit by magento and there’s probably an issue with your XML file. Also, are there any errors inside “exception.log” or “system.log”?

      If above steps don’t resolve your issue, please post your XML code here and I’ll take a further look. Thanks.

      Reply
      1. Jamie

        Hi,

        Thanks for the quick response.
        The Contact Page does appear in the back end and I have enabled it.
        I put in the die statement and the form correctly terminated at that point.

        Below is my xml,

        page/1column.phtml

        mage/captcha.js

        contact_page_captcha
        230
        50

        athlete_google_map

        athlete_contacts_block1

        athlete_contacts_block2

        Reply
        1. dchayka Post author

          I replaced my XML layout with the one you provided in pastebin and it worked flawlessly. Did you place the “echo …” statement to display child block (Step 4)? I’m going post this tutorial module into GitHub so you can pull it from there and try running it as is. Let me know if you have other questions.

          Reply

Leave a Reply

Your email address will not be published. Required fields are marked *