Django contact us section

Question

I am new to web development, I have one page django portfolio app in which there is section for contact us, I have used class based views with post method. However when I click submit button I think POST request is not getting called, due to which my send_mail function inside post function is not working.

views.py

class HomeView(TemplateView):
    template_name = 'home.html'
    http_method_names = ['post', 'get']

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    context['about'] = About.objects.first()
    context['services'] = Service.objects.all()
    context['works'] = RecentWork.objects.all()

    return context
@csrf_exempt
def post(self, request):
    if request.method == "POST":
        message = request.POST['message']
        try:
            send_mail('Test Subject', message, settings.EMAIL_HOST_USER, [settings.EMAIL_HOST_USER])
        except Exception:
            print(Exception)
            return HttpResponse('Error: Invalid header found')
    return HttpResponse('success')

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.HomeView.as_view(), name='home'),
]

home.html

<div class="invitation-area section-padding">
        <div class="container">
            <div class="row">
                <div class="single-invite text-center">
                    <h2>Do you have any project need to be done?</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at cupiditate distinctio dolorem
                        dolores impedit, inventore magnam magni nam numquam quidem ratione rem repellendus, saepe?</p>
                    <a href="#contact" class="my-btn-3">Get started</a>
                </div>
            </div>
        </div>
    </div>

    <div id="contact" class="contact-area section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-header text-center">
                        <h2>Contact Me</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 box-contact-form">
                    <form id="contact-form" method="post">
                        {% csrf_token %}

                        <div class="messages"></div>

                        <div class="controls">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group wow fadeInDown" data-wow-delay="0.2s">
                                        <input id="form_name" type="text" name="name" class="form-control"
                                               placeholder="Enter your full name *" required="required"
                                               data-error="Fullname is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group wow fadeInDown" data-wow-delay="0.4s">
                                        <input id="form_email" type="email" name="email" class="form-control"
                                               placeholder="Enter your email *" required="required"
                                               data-error="Valid email is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group wow fadeInUp" data-wow-delay="0.6s">
                                        <textarea id="form_message" name="message" class="form-control"
                                                  placeholder="Your Message *" rows="4" required="required"
                                                  data-error="Leave a message for me"></textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <button class="btn btn-send" value="submit"><a href={% url 'home' %}> Send message</a></button>
                                </div>
                            </div>
                        </div>

                    </form>

                </div>

            </div>

Answer 1

Firstly as per my comment your button was not a submit button. Secondly for some reason you have an anchor tag inside your button. An anchor tag when clicked would obviously make a GET request. Change your button from:

<button class="btn btn-send" value="submit"><a href={% url 'home' %}> Send message</a></button>

To:

<button type="submit" class="btn btn-send" value="submit">Send message</button>