<div class="contact-widget">
  <form action="{% url 'contact_widget' %}" method="post" id="contact_widget">
    <div class="form-group">
      <input class="form-control" placeholder="Email..." type="email" name="email" required />
    </div>
    <div class="form-group">
      <input class="form-control" placeholder="Subject..." type="text" name="subject" required />
    </div>
    <div class="form-group">
      <textarea class="form-control" placeholder="Message..." name="message" required></textarea>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </form>
</div>
<div id="contact_message" style="display:none" class="alert alert-info text-center"></div>

<script type="text/javascript">
  var contact_widget = $('#contact_widget');
  var contact_message = $("#contact_message");

  contact_widget.submit(function () {
      $.ajax({
          type: "POST",
          url: "{% url 'contact_widget' %}",
          data: contact_widget.serialize(),
          success: function (message) {
              contact_widget.hide(30);
              contact_message.show(30);
              contact_message.html(message);
              setTimeout(function(){
                  contact_message.hide(50);
              }, 3000);
          },
          error: function(message) {
              contact_message.show(30);
              contact_message.html(message);
              setTimeout(function(){
                  contact_message.hide(50);
              }, 3000);
          }
      });
      return false;
  });
</script>
