Установка, настройка и применение django-cripsy-forms
Наверно многие сталкивались с проблемой стилизации форм в django. В этом посте мы разберем стилизацию формы с помощью пакета django-cripsy-forms.
Для реализации этого вопроса мы должны иметь какую то форму к примеру как в моем случае я буду использовать форму состоящую из трех полей.
Допустим у нас есть форма обратной связи состоящая из трех унаследованных из класса forms полей в файле forms.py, которая находится в ужасном состоянии и ни как не вписывается в наш дизайн.
from django import forms
class ContactForm(forms.Form):
from_email = forms.EmailField(label='Ваш e-mail')
subject = forms.CharField(label='Заголовок письма', max_length=128)
message = forms.CharField(label='Текст сообщения', max_length=2560, widget=forms.Textarea)
Необходимые ссылки для работы:
Устанавливаем в свой проект пакет django-cripsy-forms, для этого используем команду pip install django-cripsy-forms.
После установки открывает файл settings.py и в INSTALLED_APPS добавляем crispy_forms
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'student',
'crispy_forms',
]
CRISPY_TEMPLATE_PACK = 'bootstrap3'
Здесь же в файле settings.py определяем переменную CRISPY_TEMPLATE_PACK = 'bootstrap3' это говорит о том, что мы будет использовать в качестве стилей bootstrap3
Переходим в файл forms.py к нашей форме. Добавляем в класс нашей формы код функции из инструкции django-cripsy-forms.
Должно быть так.
class ContactForm(forms.Form):
def __init__(self, *args, **kwargs):
# call original initializator
super(ContactForm, self).__init__(*args, **kwargs)
# this helper object allows us to customize form
self.helper = FormHelper()
# form tag attributes
self.helper.form_class = 'form-horizontal'
self.helper.form_method = 'post'
self.helper.form_action = reverse('contact_admin')
# twitter bootstrap styles
self.helper.help_text_inline = True
self.helper.html5_required = True
self.helper.label_class = 'col-sm-2 control-label'
self.helper.field_class = 'col-sm-10'
# form buttons
self.helper.add_input(Submit('send_button', u'Отправить'))
from_email = forms.EmailField(label='Ваш e-mail')
subject = forms.CharField(label='Заголовок письма', max_length=128)
message = forms.CharField(label='Текст сообщения', max_length=2560, widget=forms.Textarea)
В строке super(ContactForm, self).__init__(*args, **kwargs) мы указали наш класс формы.
В строке self.helper.form_class = 'form-horizontal' мы определяем, что форма будет горизонтальной
В строке self.helper.form_method = 'post' мы определяем, что наша форма передает данные методом post
В строке self.helper.form_action = reverse('contact_admin') мы указываем адрес нашей формы т.е. шаблон.
Здесь выводим стили бутстрапа и кнопка отправки формы.
# twitter bootstrap styles
self.helper.help_text_inline = True
self.helper.html5_required = True
self.helper.label_class = 'col-sm-2 control-label'
self.helper.field_class = 'col-sm-10'
# form buttons
self.helper.add_input(Submit('send_button', u'Отправить'))
Далее переходим в шаблон где будет наша форма и ставим тег {% load crispy_forms_tags %} в верху страницы, который будет подгружать в шаблон crispy_forms .
В том месте где вы хотите отобразить форму вместо обычного кода формы к примеру
<form action=”{% url ”contact_admin” %}” method=”post”>
{% csrf_token %}
{{ form.as_p }}
<input type=”submit” value=”Отправить” name=”send_button” />
</form>
мы указываем просто один тег {% crispy form %}
Все.
Таким образом мы применили к нашей форме стили бутстрапа с помощью внешнего пакета джанго django-cripsy-forms.
Но есть еще один способ использовать этот пакет он более проще чем предыдущий. Посмотреть как его использовать можно на этом видео
Ваши комментарии
Комментарии могут оставлять только зарегистрированые пользователи!