Why the html custom form is not working django

Question

I have a contact page with a simple form.

Here is views.py:

def contact_view(request):
if request.method == 'GET':
    form = ContactForm()
else:
    form = ContactForm(request.POST)
    if form.is_valid():
        subject = form.cleaned_data['subject']
        from_email = form.cleaned_data['from_email']
        message = form.cleaned_data['message']
        try:
            send_mail(subject, message, from_email, settings.ADMIN_EMAILS)
        except BadHeaderError:
            return HttpResponse('Invalid header found.')
        return redirect('success')
return render(request, "base/contact.html", {'form': form})


def success_view(request):
    return HttpResponse('Success! Thank you for your message.')

this is contact.html:

{% block content%}
<main class="page contact-page">
    <section class="portfolio-block contact">
        <div class="container">
            <div class="heading">
                <h2>Contact me</h2>
            </div>
            <form method="post">
                {% csrf_token %}
                <div class="mb-3"><label class="form-label" for="name">Your Name</label><input class="form-control item" type="text" id="name"></div>
                <div class="mb-3"><label class="form-label" for="subject">Subject</label><input class="form-control item" type="text" id="subject"></div>
                <div class="mb-3"><label class="form-label" for="email">Email</label><input class="form-control item" type="email" id="email"></div>
                <div class="mb-3"><label class="form-label" for="message">Message</label><textarea class="form-control item" id="message"></textarea></div>
                <div class="mb-3"><button class="btn btn-primary btn-lg d-block w-100" type="submit" value="submit">Submit Form</button></div>
            </form>
        </div>
    </section>
</main>
{% endblock %}

When I use form.as_p it works very well but when I use this template it is not working it only shows in the terminal that a post request was made.

Answer 1

The html looping syntax of form is following, where we have access to specific field, field.label ,non_field_errors as well as particular field errors.

In your case you can use in this way:

contact.html

{% block content%}
<main class="page contact-page">
    <section class="portfolio-block contact">
        <div class="container">
            <div class="heading">
                <h2>Contact me</h2>
            </div>
            <form method="POST" novalidate>
                {% csrf_token %}
                {% if form.non_field_errors %}
                    {% for error in form.non_field_errors  %}
                    <div>
                        {{error}}
                    </div>
                    {% endfor %}
                {% endif %}

                {% for field in form  %}
                <p>{{field.label_tag}} {{field}}</p>
                <br>
                    {% for error in field.errors  %}
                        <span>{{error}}</span>
                    {% endfor %}
                {% endfor %}
                <input type="submit" value="Save">
            </form>
        </div>
    </section>
</main>
{% endblock %}

You can use it as above it will work perfectly with your existing views, as you said it is working with form.as_p.

If you give only form.as_p, it will render form fields in <p> tag of html, you can see through Ctrl+U of view page source,there we cannot have more control over form.

Your question -- How can i use bootstrap's classes in django's form?

Answer - You can set through widget in your form's fileds. for example:

class MyForm(forms.Form):
    name=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))

In the above way, you can set it to every field.