. . Home | About | Projects

Using sfWidgetFormReCaptcha with ajax enabled forms

Posted on 30 May 2009

In this post I wold like to make a note about usage of sfWidgetFormReCaptcha with ajax enabled forms.

The sfWidgetFormReCaptcha renders a ReCaptcha widget, i.e. let you protect your forms with visual code generated by ReCaptcha, but I assume you already familiar with this widget, visit plugin page if not ;)

Current implementation will not work out of box with ajax enabled forms, because, according implementation, ajax response will include link to external resource, e.g. recaptcha_ajax.js, and browser will throw security issue.

Solution

Remove recaptcha_ajax.js inclusion from widget and put into header of your page.

Step 1. Create sfWidgetFormReCaptcha2

We will be creating sfWidgetFormReCaptcha2.class.php file which simply extends original sfWidgetFormReCaptcha and overrides render(...) method. You can put into apps/frontend/lib/widget/.

Step 2. Modify your form class

Modify your form class and add following, e.g. simply replace sfWidgetFormReCaptcha to sfWidgetFormReCaptcha2

NOTE: The usage of ReCaptcha widget and validator explained here

Step 3. Include ReCaptcha api

For example, put into your template ;)

NOTE: Above template must be processed with regular(non ajax) response at least once, i.e. first time page requested!