Следующим шагом мы изменим отображение нашего поиска http://127.0.0.1:8000/search/, для этого в приложении blog откроем наши формы - forms.py и изменим отображение запроса поиска:

class SearchForm(forms.Form):
    query = forms.CharField(
        widget=forms.TextInput(attrs={"class": "form-control mb-1", 'placeholder': 'Enter search term...'}))

К полю query мы добавили виджет, к которому же добавили нужный класс стиля и текстовую подсказку.

Теперь откроем шаблон нашего поиска, search.html и внесем правки:

{% extends "blog/base.html" %} {% load blog_tags %}

{% block title %}Search{% endblock %}

{% block content %} {% if query %}
    <h1>
        Posts containing "{{ query }}"
    </h1>
    <h3>
        {% with results.count as total_results %}
            Found {{ total_results }} result{{ total_results|pluralize }} {% endwith %}
    </h3>
    <hr class="mt-1 mb-1"/>
    {% for post in results %}
        <h4>
            <a href="{{ post.get_absolute_url }}"> {{ post.title }}
            </a>
        </h4>
        {{ post.body|markdown|truncatewords_html:12 }} {% empty %}
        <p>There are no results for your query.</p>
    {% endfor %}
    <p><a href="{% url "blog:post_search" %}">Search again</a></p> {% else %}
    <h1>
        Search for posts
    </h1>
    <form method="get">
        {{ form.query }}
        <input type="submit" value="Search" class="btn btn-primary mb-3 btn-lg">
    </form>
{% endif %} {% endblock %}

Проверим отображение нашего поиска:

И в завершении стилизации нашего приложения blog, нам необходимо изменить форму и шаблон нашей возможности
Share a post, для этого снова откроем наши формы и изменим вывод, добавив нужные атрибуты:

class EmailPostForm(forms.Form):
    name = forms.CharField(max_length=25, required=True, widget=forms.TextInput(attrs={"class": "form-control mb-1", 'placeholder': 'Name'}))
    email = forms.EmailField(required=True, widget=forms.TextInput(attrs={"class": "form-control mb-1", 'placeholder': 'E-Mail'}))
    to = forms.EmailField(required=True, widget=forms.TextInput(attrs={"class": "form-control mb-1", 'placeholder': 'To'}))
    comments = forms.CharField(required=False,
                               widget=forms.Textarea(attrs={"class": "form-control mb-1", 'placeholder': 'Comments'}))

Далее отредактируем шаблон share.html:

{% extends "blog/base.html" %}

{% block title %}Share a post{% endblock %}

{% block content %}
    {% if sent %}
        <h1>E-mail successfully sent</h1>
        <p>
            "{{ post.title }}" was successfully sent
            to {{ form.cleaned_data.to }}.
        </p>
    {% else %}
        <h1>Share "{{ post.title }}" by e-mail</h1>
        <form method="post">
            {{ form.name }}
            {{ form.email }}
            {{ form.to }}
            {{ form.comments }}
            {% csrf_token %}
            <input type="submit" value="Send e-mail" class="btn btn-primary mb-3 btn-lg">
        </form>
    {% endif %}
{% endblock %}

В данном шаблоне мы убрали заголовки полей ввода, и изменили стиль отображения кнопки Send e-mail. Проверим работу:

В следующем разделе мы продолжим доработку нашего проекта, а именно добавление стилей к нашему приложению accounts.