Formulários customizados e Recaptcha

Hoje vamos falar sobre captcha e formulários customizados, por algum motivo o web2py não disponibiliza o widget do captcha no form custom. Então vamos mostrar uma solução simples e que lhe permitirá criar seus formulários mais bonitos.

Em resumo!

Um captcha é um controle de imagem usado para evitar que robos driblem o formulário e consigam enviar dados no formulário.

O web2py usa o recaptcha na versão 2 do google, infelizmente se você quiser usar outro recaptcha terá que usar ele diretamente na view. Assunto para outro post.

http://web2py.com/books/default/chapter/31/09/access-control#-CAPTCHA-e-reCAPTCHA

from gluon.tools import Recaptcha2
auth.settings.captcha = Recaptcha2(request,
    'PUBLIC_KEY', 'PRIVATE_KEY')

Ao habilitar o captcha no auth você verá ele funcionando ao invocar o form na view.

user.html

{{extend 'layout.html'}}

    <div class="container-fluid">

      <div class="row">

        <div class="col-md-4 offset-md-4 col-sm-12 offset-sm-0 col-xs-12" style="background-color: #888;">

        {{if response.flash:}}

        <div class="alert alert-danger">

          <strong>{{=response.flash}}</strong>

        </div><!-- .alert-->

        {{pass}}

        {{

        if request.args(0)=='login':

            if not 'register' in auth.settings.actions_disabled:

                form.add_button(T('Sign Up'), URL(args='register', vars={'_next': request.vars._next} if request.vars._next else None),_class='btn btn-default')

            pass

            if not 'request_reset_password' in auth.settings.actions_disabled:

                form.add_button(T('Lost Password'),URL(args='request_reset_password'),_class='btn btn-default')

            pass

        pass

        =form

        }}

        </div><!-- .col-->

      </div><!-- .row-->   

    </div> <!-- /container -->  

Até aí tudo bem, o problema começa quando precisamos invocar o widget no form, o resultado será um None no formulário.

Tente fazer!

{{=form.custom.widget.recaptcha}} ou {{=form.custom.widget.captcha}}

Então o que podemos fazer?

Se inspecionarmos o elemente do captcha veremos que ele gera um id chamado captcha__row.

Todo formulário permite que acessemos os elementos DOM através de form.element("element_dom")

Para resolver isto podemos chamar esta linha através do form.element, assim:

{{=form.element("#captcha__row")}}

Veja o exemplo abaixo:

Arquivo register.html

{{=form.custom.begin}}

  <div class="row" style="">

    <div class="col-md-12 col-sm-12 offset-sm-0 col-xs-12" >

    {{if response.flash:}}

    <div class="alert alert-danger">

      <strong>{{=response.flash}}</strong>

    </div><!-- .alert-->

    {{pass}}

    <h2 class="text-center" style="margin-top: 10px;">

      {{ =IMG(_src=URL('static', 'default/images/logo.png'), _width=150) }}

    </h2>

    <hr>

    </div><!-- .col-->

    <div class="col-md-12">

        <h2 class="text-white text-center">Meu perfil</h2>

    </div>

    <div class="col-md-6">

        <div class="form-group">

        {{=form.custom.label.first_name}}

        {{=form.custom.widget.first_name}}

        </div>

    </div>

    <div class="col-md-6">

        <div class="form-group">

        {{=form.custom.label.last_name}}

        {{=form.custom.widget.last_name}}

        </div>

    </div>

    <div class="col-md-12">

        <div class="form-group">

        {{=form.custom.label.email}}

        {{=form.custom.widget.email}}

        </div>

    </div>

    <div class="col-md-6">

        <div class="form-group">

        {{=form.custom.label.contact_name}}

        {{=form.custom.widget.contact_name}}

        </div>

    </div>

    <div class="col-md-6">

        <div class="form-group">

        {{=form.custom.label.phones}}

        {{=form.custom.widget.phones}}

        </div>

    </div>

    <div class="col-md-4">

        <div class="form-group">

        {{=form.custom.label.entity_type}}

        {{=form.custom.widget.entity_type}}

        </div>

    </div>

    <div class="col-md-8">

        <div class="form-group">

        {{=form.custom.label.CNPJ_CPF}}

        {{=form.custom.widget.CNPJ_CPF}}

        </div>

    </div>

    <div class="col-md-12">

        <div class="form-group">

        {{=form.custom.widget.concordo_com_termos}}

        {{=form.custom.label.concordo_com_termos}}        

        </div>

    </div>

    {{if form.element('#captcha__row'):}}

    <div class="col-md-12">

        <div class="form-group">

        {{=form.element('#captcha__row')}}

        </div>

    </div>

    {{pass}}

    <div class="col-md-12">

        <div class="form-group">

        {{=form.custom.submit}}

        </div>

    </div>

    

  </div><!-- .row-->

  {{=form.custom.end}}

</div> <!-- /container -->  

Bom, é isso aí, espero ter ajudado e não esquece de deixar seu comentário e passar lá no grupo do telegram da comunidade brasileira.