Наверно многие сталкивались с проблемой стилизации форм в 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)

Необходимые ссылки для работы:

• Installation;
• FormHelper;
• Layouts;
• Github

Устанавливаем в свой проект пакет 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.

Но есть еще один способ использовать этот пакет он более проще чем предыдущий. Посмотреть как его использовать можно на этом видео
 

Комментарии могут оставлять только зарегистрированые пользователи!