Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Graham Carr 277 posts 389 karma points
    Aug 01, 2013 @ 16:04
    Graham Carr
    0

    Smaller captcha control

    One of our clients has the requirement to add a captcha control to an existing Contour form that is used in a right-hand bar and hence space is limited at around 220px wide. I have tried using the recaptcha control built into Contour but as you know the minimum width of this control is 300px wide.

    Has anyone created or know how to implement a captcha control that would fit into a small space such as 200px wide?

    Any ideas or solutions would be greatly appreciated.

  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Aug 05, 2013 @ 12:51
    Tim Geyssens
    0

    Haven't seen one around

    Found this on the subject of small recpatcha http://blog.cdeutsch.com/2011/03/make-recaptcha-smaller.html

  • Graham Carr 277 posts 389 karma points
    Aug 12, 2013 @ 11:34
    Graham Carr
    0

    Hi Tim,

    Thanks for the information. I have implemented what was in the article using the Contour Contrib recaptcha control, however I have an issue in that when submitting the form, no validation is being done on the control and the form can be submitted.

    Any ideas?

  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Aug 12, 2013 @ 12:00
    Tim Geyssens
    0

    Hey,

    Think you'll need to do this on the default recaptcha fieldtype in the Contour core

  • Graham Carr 277 posts 389 karma points
    Aug 12, 2013 @ 14:03
    Graham Carr
    0

    I am now using the default recaptcha fieldtype from the Contour core, however when I try to submit the form all I ever receive is that the code entered is invalid even though I can see that the code I am entering is correct. The code I am using is shown below, note the overwritten RecaptchaOptions that was needed as the default fieldtype doesn't allow the specifying of the customthemewidget. Any further ideas?

        <script type="text/javascript">
    var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget',
    tabindex : 0
    };
    </script>
                <div id="recaptcha_widget" style="display:none">
    
       <div id="recaptcha_image"></div>  
       <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>  
    
       <span class="recaptcha_only_if_image" style="display:block;padding-bottom:6px;padding-top:6px;">Enter the words above:</span>  
       <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>  
    
       <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" style="width:212px;" />  
    
       <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>  
       <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>  
       <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>  
    
       <div style="padding-bottom:6px;"><a href="javascript:Recaptcha.showhelp()">Help</a></div>  
    
     </div>  
    
     <script type="text/javascript"  
        src="http://www.google.com/recaptcha/api/challenge?k=6LdV_eUSAAAAADAZabPr03hTB6Fy_IkXfRBnyEXJ">  
     </script>  
     <noscript>  
       <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdV_eUSAAAAADAZabPr03hTB6Fy_IkXfRBnyEXJ" 
        height="300" width="500" frameborder="0"></iframe>        
       <textarea name="recaptcha_challenge_field" rows="3" cols="40">  
       </textarea>  
       <input type="hidden" name="recaptcha_response_field"  
            value="manual_challenge">  
     </noscript>  
    
  • Graham Carr 277 posts 389 karma points
    Aug 12, 2013 @ 15:22
    Graham Carr
    0

    This is turning into a bit of a nightmare, I have spent a fair few hours trying to get this working but still no luck, surely there must be someone out there who has successfully implemented a custom theme to the captcha control and got it working.

  • Graham Carr 277 posts 389 karma points
    Aug 12, 2013 @ 18:08
    Graham Carr
    101

    After much trial and error I have eventually found a way of getting this working, for any other people wanting to know how to implement this in the future find the steps below:

    1. Use the default Recaptcha datatype that ships with Contour.
    2. Set the theme to custom
    3. Set the ReCaptcha Public and Private keys in the file UmbracoContour.config located in /Umbraco/Plugins/umbracoContour
    4. Change the file Fieldtype.Recaptcha.cshtml in the /umbraco/plugins/umbracoContour/Views directory to read as the attached file here (N.B. if you are using an overriden form then the updated file will need to be placed in the /umbraco/plugins/umbracoContour/Views/Forms/
      directory
      )

    Once the above steps have been done then the custom ReCaptcha control should all work fine.

  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Aug 14, 2013 @ 11:54
    Tim Geyssens
    0

    Great thanks for posting the solution :)

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies