Yii ReCaptcha for better mobile compatibility

Incorporating the extension from http://www.yiiframework.com/extension/recaptcha/ into my Yii project has been a successful endeavor thus far.

However, in an effort to enhance the responsiveness of my website, I recently made some modifications to the code which unfortunately caused it to stop functioning.

Here are my previous settings that were working perfectly:

/*<![CDATA[*/
var RecaptchaOptions = {
   theme : 'white',
   lang : 'en',
   tabindex : 0
};
/*]]>*/

And here are my current settings:

/*<![CDATA[*/
var RecaptchaOptions = {
   theme : 'custom',
   custom_theme_widget : 'responsive_recaptcha',
   lang : 'en',
   tabindex : 0
};
/*]]>*/

Below is the CSS associated with my changes:

*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#responsive_recaptcha {
  (CSS styles go here...)
}
(more CSS rules...)

After implementing the custom theme, nothing appears on my site. Any insights as to what may be causing this issue?

Answer №1

Last month, I tackled a similar task and came up with a solution.

To implement the changes, navigate to

extensions/recaptcha/EReCaptcha.php
and modify the run() function as shown below:

/**
     * Renders the widget.
     */
    public function run()
    {
      $body = '';
      if ($this->hasModel()) {
         $body = CHtml::activeHiddenField($this->model, $this->attribute) . "\n";
      }

      /*
       * Added the HTML below to support our custom responsive theme!!
       */
      echo $body . '<div id="responsive_recaptcha" style="display:none">

                   <div id="recaptcha_image"></div>
                   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

                  <label class="solution">
                    <span class="recaptcha_only_if_image">Type the two words:</span>
                    <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

                    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
                  </label>
                  <div class="options">
                    <a href="javascript:Recaptcha.reload()" id="icon-reload">Get another CAPTCHA</a>
                    <a class="recaptcha_only_if_image" href="javascript:Recaptcha.switch_type(\'audio\')" id="icon-audio">Get an audio CAPTCHA</a>
                    <a class="recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type(\'image\')" id="icon-image">Get an image CAPTCHA</a>
                    <a href="javascript:Recaptcha.showhelp()" id="icon-help">Help</a>
                  </div>
                </div>'.

      recaptcha_get_html($this->publicKey,
                                      null,
                                      ($this->useSsl ? true : Yii::app()->request->isSecureConnection));
    }

Give this updated code a try - it should solve the issue!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the procedure for collapsing a table row or grid?

Looking at this image, I'm trying to find a way to collapse the breakfast row. Any ideas on how I can collapse either the entire tr or with a div? ...

Switch between display modes by clicking using collections

I am trying to figure out how to create a function that will only show content for the specific element in which my button is located. Currently, when I click the button it shows content for all elements with the 'one' class, but I want it to dis ...

Creating a dynamic rectangular design with a taller height than width, featuring perfectly centered content

My website needs a responsive rectangle where I can easily adjust the height and width. However, when I try to rotate the rectangle, the content also rotates 90 degrees. Can anyone help me with this issue? Thank you in advance for any assistance. Snippet ...

CSS3 transition applied to a jQuery direction-aware hover effect

I'm encountering difficulties making direction-aware hover and css transitions function correctly. Specifically, I am attempting to create a grid of elements with front and back faces, and on hover, have a css transition that flips the element to disp ...

Issues occur with Google visualization when the screen is resized

When I resize the browser, an error code google-visualization-errors-8 appears in my Google chart's CSS. https://i.stack.imgur.com/4LX1C.png What could be causing this error to occur? Note: I am redrawing the graph every time the screen is resized. ...

Create an interactive table in your WordPress website that adjusts to different screen sizes

Having scoured numerous posts on responsive tables in this stack, I am still unable to find a solution to my specific issue. It's quite possible that I didn't know what exactly to look for, hence my resorting to posting a question here. The crux ...

Tips on steering clear of the issue of "Automatic grid alignment" when working with Bootstrap?

I'm attempting to achieve something along the lines of, |--------------Empty space---------------|-----first column(aligned to the right)-----| |---logo---||------Empty space-------|----second column(aligned to the right)---- However, it is automat ...

Animated SVG Arrow Design

I created a dynamic SVG animation that grows as you hover over it. Since I'm still learning about SVG animations, I encountered some issues with my implementation. The animation is quite straightforward - when hovering over the SVG arrow, the line sho ...

Is it possible to navigate to a different section of a webpage while also jumping to a specific id within that section seamlessly?

I'm trying to create a navbar link that will take me directly to a specific section of a page, but I'm having trouble getting it to work. Here's what I've tried: <a href="home#id" class="nav-link text on-hover"></a> Where ...

Doesn't the .stop(true) function completely clear the queue as it should?

My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...

Show picture during the process of loading an external webpage

Utilizing a script to load an external page (external meaning a page within my website) inside a div. Loading the page takes time, so I want to display an image until the page is fully loaded. JAVASCRIPT function HideLoader() { $('#loader' ...

Misalignment of social media buttons is causing display issues

I have arranged my Social Media Div to the right of my Review Div: http://jsfiddle.net/eYQWE/ The issue: the social media buttons in My Social Media div are not staying in a straight line and keep dropping below my Review Div. Do you have any suggestions ...

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...

Trouble aligning CSS UL/LI menu in the center

Could someone help me with centering my CSS UL menu? I've posted the code below, as I'm still learning CSS and would appreciate any guidance. I've only been able to center it by setting a fixed width and using HTML center tags, but I need t ...

The font from the server is not displaying correctly in the local HTML file

After uploading the ttf font file to the server, I utilized the following CSS code: @font-face { font-family: "fontname"; src: url("http://www.mywebsite.com/Fonts/fontname.ttf"); } body { font-family: "fontname", sans-serif; } Within the loc ...

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

Angular 2's SVG creations do not resize properly

It is a common knowledge that an svg element with the attribute viewbox should automatically scale to fit the sizes specified in the styles. For instance, let's consider a 200*200 circle placed inside a 100*100 div. Prior to that, we need to ensure t ...

The secrets of z-index: Ensuring nested elements stay behind their parent element

Check out this demo to see the problem: http://jsfiddle.net/5sqxQ/2/ I am trying to make the sub menu appear below the main menu. I also want to use JavaScript to slide the menu from underneath when hovering over the parent li element. I don't real ...

combining HTML and CSS for perfect alignment

I'm having trouble trying to align an image and some text side by side. Below is the code that includes an image and text (Name and Age), but they are not aligning properly even after using float: left. Can anyone help me with this? Thank you. < ...

Insert an svg element into the content property

Is it possible to insert an SVG link within the content property? .selectedItem::before{ content: " any svg link "; ...