Модификация django simple captcha

Я использую django-simple-captcha и crispy form

Вот мой код:

forms.py

from django import forms
from captcha.fields import CaptchaField


class ContactEntryForm(forms.Form):
    name = forms.CharField(
        label="",
        widget=forms.TextInput(attrs={'placeholder': 'Full Name'})
    )
    email = forms.CharField(
        label="",
        widget=forms.TextInput(attrs={'placeholder': 'Email', 'type': 'email'})
    )
    subject = forms.CharField(
        label="",
        widget=forms.TextInput(attrs={'placeholder': 'Subject'})
    )
    message = forms.CharField(
        label="",
        widget=forms.Textarea(attrs={'placeholder': 'Message', 'rows': 5})
    )
    captcha = CaptchaField()

page.html

<form method="POST">
  {% csrf_token %} {{ contact_entry_form|crispy }}
  <input type="submit" value="Submit" class="btn btn-dark" style="width: 100%" />
</form>

Но поля изображения и текста в разделе captcha слишком узкие. Я хочу добавить немного поля между изображением и текстовым полем. Могу ли я сделать некоторое HTML-форматирование в forms.py? Например:

captcha = CaptchaField(attrs={'style': 'margin:10px'})

Или есть лучшее решение для добавления полей из forms.py?

Вы можете добавить attrs к полю формы в forms.py, но у меня это не сработало, когда кто-то вводил неправильные значения. Красные алерт/див не появлялись. Где-то по ходу дела существующий атрибут class переопределяется.

Вот что я в итоге сделал:

## forms.py
from django import forms
from captcha.fields import CaptchaField

class ContactForm(forms.Form):
    full_name = forms.CharField(label="Name",required=True)
    from_email = forms.EmailField(label="Email", required=True)
    subject = forms.CharField(required=True)
    message = forms.CharField(widget=forms.Textarea, required=True)
    captcha = CaptchaField(label='Please enter the characters in the image')

И затем в вашем css: 

#id_captcha_1 {
    max-width: 100px;
    margin-top: 8px;
}

max-width потому что это выглядит глупо для текстового ввода такой ширины и margin-top чтобы изображение не врезалось в верхнюю часть текстового ввода.

enter image description here

Вернуться на верх