CODEWITHSUNDEEP
djangohtmldjango-forms
Somdip Dey
Somdip Dey

Reputation: 3396

Django form not being submitted in html

I am new to Django. I have created a form which contains Name, email, phone, message. The form is working properly when I am using it as part of a html file. The code for the form in html, which is working properly:

<html>
<head></head>
<body>
<!--Message Form here-->
<form method='POST' action='/support/'> {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" class="btn btn-success" value="Send Message" />
</form>
<!--Message Form ends here-->
</body>
</html>

When I am extending this html to a base class and then adding bootstrap css to the html, the submit button is not working and hence the form is not being submitted properly (code provided later).

The code for the view:

def support(request):
        if request.method == 'POST':
            from django.core.mail import send_mail
            form = SupportMessageForm(request.POST or None)
            if form.is_valid():
                name = form.cleaned_data['name']
                sender = form.cleaned_data['email']
                telephone = form.cleaned_data['telephone']
                subject = "Support Form - Message"

                message = "From: " + name + " ( " + sender + " ) " + "Phone: " + telephone + "\n\n"
                message += form.cleaned_data['message']

                recipients = ['#SECRET#']
                save_it = form.save(commit=False)
                save_it.save()
                result = "Your message has been delivered. Thank you for contacting us! We will get in touch very soon.."
                try:
                    send_mail(subject, message, sender, recipients)
                except smtplib.SMTPException as e:
                    result = str(e)
                return render(request, "support.html", {"result": result, "style": "display: block", 'form': form})
            else:
                return render(request, "support.html", {"result": "Failed to send the message. Please validate your data. ",
                                                    "style": "display: block", 'form': form})
        else:
            form = SupportMessageForm()
        return render_to_response('support.html', {'form': form},  context_instance=RequestContext(request))

When I am putting the above form code in an extended html file such as:

{% extends "base.html" %}
        {% block title %}Support{% endblock %}
{% load staticfiles %}

{% block body_block %}
 <section>
<!-- Page Content -->
<div class="container">

    <!-- Page Heading/Breadcrumbs -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Our Support
                <small>Providing the highest quality of services</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="index.html">Home</a>
                </li>
                <li class="active">Contact</li>
            </ol>
        </div>
    </div>
    <!-- /.row -->
<!--Support Form here-->
    <div class="row">
        <div class="col-md-8">
            <h3>Email &amp; web support</h3>
                <div class="center status alert">{{ result }}</div>
                <form method='POST' action='/support/'> {% csrf_token %}
                     {{ form.as_p }}
                    <input type="submit" class="btn btn-success" value="Send Message" />
                </form>
<!--Support Form ends here-->
            </div>
        </div>
        <!--Fomr div-s end here-->
        <!-- /.row -->
        <hr>
        <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-6">
                    <p>Connect to us on:</p>
                    <ul class="list-unstyled list-inline list-social-icons">
                    <li>
                    <a href="#"><i class="fa fa-linkedin-square fa-2x"></i></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
                </li>
            </ul>

            </div>

        </div>
    </footer>

</div>
<!-- /.container -->

 </section>
{% endblock %}

The form button "Send Message" is not responding. There is no traceback error. The form is not being saved in the db nor being sent as an email. Where am I going wrong?

Upvotes: 1

Views: 177

Answers (1)

Somdip Dey
Somdip Dey

Reputation: 3396

The following code did work:

<!--Support Form here-->
        <div class="row">
            <div class="col-md-8">
        <h3>Telephone Support</h3>
     </div>
                <div class="col-md-6">
                    <h3>Email &amp; Web Support</h3>
                    <div class="center status alert alert-success">{{ result }}</div>
                    <form method='POST' action='/support/'> {% csrf_token %}
                         <!--{{ form.as_p }}--><!--Commented by SOmdip because form is drawn by hand instead-->
                         {{ form.non_field_errors }}
                            <div class="fieldWrapper">
                                {{ form.name.errors }}
                                <label for="{{ form.name.id_for_label }}">Name:</label><br />
                                {{ form.name }}
                            </div>
                            <div class="fieldWrapper">
                                {{ form.email.errors }}
                                <label for="{{ form.email.id_for_label }}">Email:</label><br />
                                {{ form.email }}
                            </div>
                            <div class="fieldWrapper">
                                {{ form.telephone.errors }}
                                <label for="{{ form.telephone.id_for_label }}">Telephone:</label><br />
                                {{ form.telephone }}
                            </div>
                            <div class="fieldWrapper">
                                {{ form.message.errors }}
                                <label for="{{ form.message.id_for_label }}">Message:</label><br />
                                {{ form.message }}
                            </div>
                        <input type="submit" class="btn btn-success" value="Send Message" />
                    </form>
<!--Support Form ends here-->

Upvotes: 1

Related Questions