Overriding Templates

[9mido]

I along with other users (according to the stackoverflow link) am having trouble overriding the templates located in:

https://github.com/praekelt/django-recaptcha/tree/develop/captcha/templates/captcha

In particular, I want to override widget_v3.html and js_v3.html.

https://stackoverflow.com/questions/60924414/how-to-override-external-app-template-in-django

This is happening even after following the django docs method of overriding templates:

https://docs.djangoproject.com/en/3.0/howto/overriding-templates/

What is the proper way to override templates without needing to override the entire recaptcha app (like in my last statement)? It would be preferable to override the templates and not the entire app so that upgrades of this package can be done more easily.

One way that this could be completed is if you edit the virtualenv location in
/home/user/.local/share/virtualenvs/PROJECT/lib/python3.7/site-packages/captcha/templates/captcha
which is not really desirable.

But the main way to do it without relying on pip3 install is to remove the package using pip3 uninstall django-recaptcha and to copy the entire app to your project folder. This is also not desirable if there are django-recaptcha updates then users need to update their templates / code again to match with the main branch.

[9mido]

This is likely due to the templates being rendered within the widget. Widgets use the render as described in FORM_RENDERER. From there looking at the docs listed for the default render it reads.

(unconnected to what you might have configured in the TEMPLATES setting)

It then states it loads from the built-in django/forms/templates directory and then loads by installed apps. It does not include TEMPLATES DIRS directories.

https://docs.djangoproject.com/en/3.0/ref/settings/#form-renderer

Instead of using a widget and template rending the files, it would probably be best to manually add the javascript to the page that has the form itself. (or at least in your own file that you can include).

If anyone could provide an example below on how to that it would be very helpful!

[gbdlin]

Additionally, you can specify in your settings.py file

FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'

and add django.forms to your installed apps or manually add forms/templates directory from your Django installation to DIRS setting in TEMPLATES, but be aware that this change will switch all forms used by Django to use TEMPLATES settings instead of built-in defaults. If you've changed this setting significantly (for example by switching to Jinja2), it may break all forms in your project.

[duplxey]

I'm having the same issue. Anyone found a solution?
@9mido Have you maybe figured anything out?

[9mido]

@duplxey I decided not to use this github project for my form captchas. I decided to incorporate captchas myself into each of my forms manually and separately. When I did that, I had no problems. You can also take a look at something like the hcaptcha docs or use another github project like django-hcaptcha to see if you are having the same problems. I liked hcaptcha better because you get paid when people complete your forms and people are not tracked and have privacy problems like in recaptcha. Even though hcaptcha can be a bit annoying for your users. You can also buy hcaptcha monthly and you can get invisible captchas but that may be restricted to only business users.

[wesleyboar]

@gbdlin's solution worked for me.¹

Footnotes

1. I opted to "add django.forms to [my] installed apps", not "manually add forms/templates directory from [my] Django installation to DIRS setting in TEMPLATES". ↩

[mfisco]

For others who stumble on this and are unable to set the FORM_RENDERER, I did the following which ended up working for me:

1. Subclass the ReCaptchaV3 and override the render method:

# myproject/widgets.py

from captcha.widgets import ReCaptchaV3

from django.template import loader
from django.utils.safestring import mark_safe

class CustomReCaptchaV3(ReCaptchaV3):
    template_name = "recaptcha/widget_v3.html"

    def render(self, name, value, attrs=None, renderer=None):
        context = self.get_context(name, value, attrs)
        template = loader.get_template(self.template_name)
        return mark_safe(template.render(context))

2. Add it to your form:

# myproject/forms.py
from captcha.fields import ReCaptchaField
from .widgets import CustomReCaptchaV3

class MyForm(forms.Form)
    ... 
    captcha = ReCaptchaField(widget=CustomReCaptchaV3, label="")

3. Then, assuming you have a templates directory in the root of the project, create a subdirectory called recaptcha and add your custom templates:

<!-- templates/recaptcha/includes/js_v3.html -->
{# The provided implementation caters for only one reCAPTCHA on a page. Override this template and its logic as needed. #}
<script src="https://{{ recaptcha_domain }}/recaptcha/api.js?render={{ public_key }}{% if api_params %}&{{ api_params }}{% endif %}"></script>
<script type="text/javascript">
    function updateRecaptcha() {
      grecaptcha.execute('{{ public_key }}', {action: 'form'})
      .then(function(token) {
          console.log("reCAPTCHA validated for 'data-widget-uuid=\"{{ widget_uuid }}\"'. Setting input value...")
          var element = document.querySelector('.g-recaptcha[data-widget-uuid="{{ widget_uuid }}"]');
          element.value = token;
      });
    };
    grecaptcha.ready(function() {
        updateRecaptcha();
        setInterval(updateRecaptcha, 110000); // 110 seconds since the token expires after 120 seconds
    });
</script>

Taken from comment in #183

<!-- templates/recaptcha/widget_v3.html -->
{% include "recaptcha/includes/js_v3.html" %}
<input class="g-recaptcha"
    type="hidden"
    name="{{ widget.name }}"
    {% for name, value in widget.attrs.items %}{% if value is not False %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}/>

[thibaudcolas]

It’s not clear to me whether there’s anything to change in django-recaptcha based on this thread, so I’ll move to Discussions. If I got that wrong, please open a bug report / feature request. Or we can add more docs if it helps.