How to build a contact form using a third party app

  • By PyCat
  • Mar 24, 2017
  • Django Practices

Photo by Dương Trần Quốc on Unsplash


django-contact-form is a third party application for Django powered sites. It provides simple and extensible contact form functionality. This article shows a quick and easy way to use the third party app. You can also check the documentaion.

1. Install the third party application using pip

pip install django-contact-form

2. Setup the new installation - Add this to your setings.py

First add 'contact_form' to your INSTALLED_APPS

Add e-mail configuration settings:

EMAIL_USE_TLS = True
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_HOST_USER = 'username@gmail.com'  # use your gmail address here
EMAIL_HOST_PASSWORD = os.environ['EMAIL_HOST_PASSWORD']   # its safer to set the password as an env var

ADMINS = (
    ('name', 'username@gmail.com'),   # email will be sent to your_email
)

MANAGERS = ADMINS

3. Create the appropriate templates for contact form

templates  
    └─contact_form  
          contact_form.html  
          contact_form.txt  
          contact_form_sent.html  
          contact_form_subject.txt  

Here is the markup for a contact form using bootstrap classes:

contact_form.html

{% extends 'base.html' %}

{% block content %}
<div id="fixed-height" class="container-full">
<div  class="container contact">
   <div class="page-header"><h1>Contact Me</h1></div>
    <div class="page-subheader">
                It is a long established fact that a reader will be distracted by the readable content of a
                page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
                distribution of letters.
    </div>
    <div class="row">
      <form method="post">
        {% csrf_token %}
        <div class="col-sm-4 left-inp">
          <div class="form-group">
            <input type="text" name="name" class="form-control" id="usr" placeholder="name">
          </div>
          <div class="form-group">
            <input type="email" name="email" class="form-control" id="pwd" placeholder="email">
          </div>
          <div class="form-group">
            <input type="text" name="subject" class="form-control" id="pwd" placeholder="suject">
          </div>
        </div>
         <div class="col-sm-8 msg-inp">
           <div class="form-group">
             <textarea name="body" class="form-control" rows="5" id="comment" placeholder="message"></textarea>
             <input type="submit" value="send">
           </div>
          </div>
      </form>
    </div>
</div>
</div>
{% endblock content %}

contact_form.txt

{{ name }}
{{ email }}
{{ subject }}
{{ body }}

contact_form_sent.html

{% extends 'base.html' %}

{% block content %}
<div class="container-full">
   <div class="section">
   <div class="container">
   <div class="row">
     <div class="col-sm-12">
       <div class="error-page-wrapper">
           <h2>Your message was sent.</h2>
          <p>Please contact your administrator! Why can always try the <a href="{% url 'home_page' %}">Homepage</a>?</p>
       </div>
     </div>
  </div>
  </div>
  </div>
</div>

{% endblock content %}

contact_form_subject.txt

You got a message from {{ name }}

 

4. URL configuration

Add this line into your URLconf:

(r'^contact/', include('contact_form.urls')),

 

Now your contact form is set up and working properly!

Enjoy :)

Comments

======= >>>>>>> master

+30 211 790 2526

Find me

kabardi.cat@gmail.com