<form action="/admin/login/?next=/admin/" method="post" id="login-form"><input type="hidden" name="csrfmiddlewaretoken" value="X9I8a87GjMYBWo5OBwHc5VjkIuOdkgjDZBIOCQnTFrxov9orGE7jyvxlDGZQTy1d">
  <div class="form-row">

    <label class="required" for="id_username">Usuário:</label> <input type="text" name="username" autofocus required id="id_username">
  </div>
  <div class="form-row">

    <label class="required" for="id_password">Senha:</label> <input type="password" name="password" required id="id_password">
    <input type="hidden" name="next" value="/admin/">
  </div>

  <div class="submit-row">
    <label>&nbsp;</label><input type="submit" value="Acessar">
  </div>
</form>

<form action="/your-name/" method="post">
    <label for="your_name">Your name: </label>
    <input id="your_name" type="text" name="your_name" value="{{ current_name }}">
    <input type="submit" value="OK">
</form>

<form action="" method="post" id="user_form" novalidate>
    <input type="hidden" name="csrfmiddlewaretoken">
    <p></p>
    <div>
        <fieldset class="module aligned wide">
            <div class="form-row field-username">
                <div>
                    <label class="required" for="id_username">Usuário:</label>
                    <input type="text" name="username" class="vTextField" maxlength="150" autofocus required id="id_username">
                </div>
            </div>
            <div class="form-row field-password1">
                <div>
                    <label class="required" for="id_password1">Senha:</label>
                    <input type="password" name="password1" required id="id_password1">
                </div>
            </div>
            <div class="form-row field-password2">
                <div>
                    <label class="required" for="id_password2">Confirmação de senha:</label>
                    <input type="password" name="password2" required id="id_password2">
                </div>
            </div>
        </fieldset>
        <div class="submit-row">
            <input type="submit" value="Salvar" class="default" name="_save">
            <input type="submit" value="Salvar e adicionar outro(a)" name="_addanother">
            <input type="submit" value="Salvar e continuar editando" name="_continue">
        </div>
    </div>
</form>

# forms.py
class BandContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    message = forms.CharField(widget=forms.Textarea)
    sender = forms.EmailField()
    cc_myself = forms.BooleanField(required=False)

{% load widget_tweaks %}

  <style>
    span.required:after {
      content: "*";
      color: red;
    }
  </style>

  <h1>Send e-mail</h1>
  <form class="form" method="POST">
    {% csrf_token %}
    {% for field in form.visible_fields %}
      <div class="form-group{% if field.errors %} has-error {% endif %}">
        <label for="{{ field.id_for_label }}">
          {% if field.field.required %}
            <span class="required">{{ field.label }} </span>
          {% else %}
            {{ field.label }}
          {% endif %}
        </label>
        {% render_field field class="form-control" %}
        {% for error in field.errors %}
          <span class="text-muted">{{ error }}</span>
        {% endfor %}
      </div>
    {% endfor %}
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

<form class="form" method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

<form class="form" method="POST">
  <input type="hidden" name="csrfmiddlewaretoken" value="zoQhKvyhfA6wJjagdIFK4ofxsJfHAEgJbBu3QyaIMaFfXRYrPeaMdPDgRlqGUyPT">
  <p>
    <label for="id_subject">Subject:</label>
    <input type="text" name="subject" maxlength="100" required id="id_subject">
  </p>
  <p>
    <label for="id_message">Message:</label>
    <textarea name="message" cols="40" rows="10" required id="id_message"></textarea>
  </p>
  <p>
    <label for="id_sender">Sender:</label>
    <input type="email" name="sender" required id="id_sender">
  </p>
  <p>
    <label for="id_cc_myself">Cc myself:</label>
    <input type="checkbox" name="cc_myself" id="id_cc_myself">
  </p>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

#views.py
def my_send_email(request):
    email = request.POST
    # import ipdb; ipdb.set_trace()
    subject = email.get('subject')
    message = email.get('message')
    sender = email.get('sender')
    cc_myself = email.get('cc_myself')
    # enviar email
    pass

# urls.py
path('band/create/', v.band_create, name='band_create'),

# views.py
def band_create(request):
    ''' https://coderwall.com/p/o8tida/better-way-to-initialize-django-forms '''
    form = BandForm(request.POST or None)
    if request.method == "POST" and form.is_valid():
        # Process the data in form.cleaned_data
        form.save()
        return HttpResponseRedirect(resolve_url('bands'))
    return render(request, 'bands/band_create.html', {'form': form})

# forms.py
class BandForm(forms.ModelForm):

    class Meta:
        model = Band
        fields = '__all__'

# band_create.html
{% extends "base.html" %}

{% block title %}
  <title>Band Create</title>
{% endblock title %}

{% block content %}

  <h1>Band Create</h1>
  <form class="form" method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

{% endblock content %}

<form class="form" method="POST">
    {% csrf_token %}
    {{ form.as_table }}
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

<form class="form" method="POST">
  <input type="hidden" name="csrfmiddlewaretoken" value="jKXg5XBxZoKCH8wJxDC8DDC48ofPUZrxVXB2b0dYwYjlVGkU997aM40Nx0qOeT0H">

  <tr>
    <th>
      <label for="id_subject">Subject:</label>
    </th>
    <td>
      <input type="text" name="subject" maxlength="100" required id="id_subject">
    </td>
  </tr>

  <tr>
    <th>
      <label for="id_message">Message:</label>
    </th>
    <td>
      <textarea name="message" cols="40" rows="10" required id="id_message">
      </textarea>
    </td>
  </tr>

  <tr>
    <th>
      <label for="id_sender">Sender:</label>
    </th>
    <td>
      <input type="email" name="sender" required id="id_sender">
    </td>
  </tr>

  <tr>
    <th>
      <label for="id_cc_myself">Cc myself:</label>
    </th>
    <td>
      <input type="checkbox" name="cc_myself" id="id_cc_myself">
    </td>
  </tr>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

# forms.py
class BandContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    message = forms.CharField(widget=forms.Textarea)
    sender = forms.EmailField()
    cc_myself = forms.BooleanField(required=False)

# views.py
def band_contact(request):
    """ A example of form """
    if request.method == 'POST':
        form = BandContactForm(request.POST)
        if form.is_valid():
            form.save()
            # TODO: Implementar o send_email
            return redirect('home')
    else:
        form = BandContactForm()
    return render(request, 'bands/band_contact.html', {'form': form})

pip install django-widget-tweaks==1.4.3

# settings.py
INSTALLED_APPS = [
    ...
    'widget_tweaks',

# band_contact.html
<form class="form" method="POST">
{% csrf_token %}

{% for field in form.visible_fields %}
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>

    {% render_field field class="form-control" %}

{% endfor %}

<button type="submit" class="btn btn-primary">Submit</button>
</form>

pip install django-bootstrap4

# settings.py
INSTALLED_APPS = [
    ...
    'bootstrap4',

# base.html
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/
                             bootstrap.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/
                   umd/popper.min.js"></script>

<!-- Bootstrap core JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/
             bootstrap.min.js"></script>

# band_contact_bootstrap.html
{% extends "base.html" %}
{% load bootstrap4 %}

{% block content %}

  <form class="form" method="POST">
    {% csrf_token %}

    {% bootstrap_form form %}

    {% buttons %}
        <button type="submit" class="btn btn-primary">Submit</button>
    {% endbuttons %}
  </form>

{% endblock content %}

pip install django-crispy-forms

# settings.py
INSTALLED_APPS = [
    ...
    'crispy_forms',
    ...
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

# band_contact_crispy.html
{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}

  <form class="form" method="POST">
    {% csrf_token %}

    {{ form|crispy }}

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

{% endblock content %}

class BandCreate(CreateView):
    model = Band
    form_class = BandForm
    template_name = 'bands/band_form.html'
    success_url = reverse_lazy('bands')

# base.html
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

# urls.py
path('members/', v.MemberList.as_view(), name='members'),

# views.py
class MemberList(ListView):
    model = Member
    # template_name =
    # context_object_name =
    paginate_by = 10

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Add Member</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <!-- Formulario -->
      <form action="">
        <div class="modal-body">
          <div class="form-group">
            {{ form.name.label }}
            {% render_field form.name class="form-control" %}
          </div>

          <div class="form-group">
            {{ form.instrument.label }}
            {% render_field form.instrument class="form-control" %}
          </div>

          <div class="form-group">
            {{ form.band.label }}
            {% render_field form.band class="form-control" %}
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save</button>
        </div>
      </form>

    </div>
  </div>
</div>

# urls.py
path('members/add/ajax', v.members_add_ajax, name='members_add_ajax'),

def members_add_ajax(request):
    data = request.POST
    # import ipdb; ipdb.set_trace()
    name = data.get('name')
    instrument = data.get('instrument')
    band_pk = data.get('band')
    band = Band.objects.get(pk=band_pk)

    member = Member.objects.create(
        name=name, 
        instrument=instrument, 
        band=band
    )
    data = [member.to_dict_json()]
    return JsonResponse({'data': data})

// set up jQuery ajax object to always send CSRF token in headers
// https://docs.djangoproject.com/en/2.2/ref/csrf/#ajax
var getCookie = function (name) {
  var cookieValue = null;
  if (document.cookie && document.cookie != '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = jQuery.trim(cookies[i]);
      if (cookie.substring(0, name.length + 1) == (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

var csrfSafeMethod = function (method) {
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
  }
});

  $('#save').on('click', function(e) {
      let url = '/members/add/ajax/'
      let postData = $('form').serialize();
      $.ajax({
        url: url,
        type: 'POST',
        data: postData,
        success: function(response) {
          // TODO
        },
        error: function(xhr) {
          console.log('Erro');
        },
        complete: function() {
          // TODO
        }
      });
    e.preventDefault();
  });

success: function(response) {
  var template = '<tr>' +
      '<td>' + response.data[0].name + '</td>' +
      '<td>' + response.data[0].instrument + '</td>' +
      '<td>' + response.data[0].band + '</td>' +
      '</tr>'

  $('#table tbody').append(template)
},
error: function(xhr) {
  console.log('Erro');
},
complete: function() {
  // Fecha modal
  $('#myModal').modal('hide');
  // Limpa os campos
  $('#id_name').val('');
  $('#id_instrument').val('');
  $('#id_band').val('');
}

<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Axios -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

# views.py
def members_vue(request):
    return render(request, 'bands/members_vue.html')



# urls.py
path('members_vue/', v.members_vue, name='members_vue'),

# members_vue.html
{% extends "base.html" %}

{% block title %}
    <title>Members Vue</title>
{% endblock title %}

{% block content %}

<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Axios -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

<div id="app">

  <div class="float-left">
    <h1>Members with Vue</h1>
  </div>

  <table id="table" class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Instrument</th>
        <th>Band</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="member in members" :key="member.id">
        <td>${ member.name }</td>
        <td>${ member.instrument }</td>
        <td>${ member.band }</td>
      </tr>
    </tbody>
  </table>

</div>

{% endblock content %}

<script>
  axios.defaults.xsrfHeaderName = "X-CSRFToken";
  axios.defaults.xsrfCookieName = "csrftoken";
  var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
      members: [],
      name: '',
      instrument: '',
      band: '',
      url: '/members/json/',
      url_add: '/members/add/ajax/'
    },
    created () {
      axios.get(this.url)
      .then(result => {
        this.members = result.data.data
      })
    },
    methods: {
      add () {
        let bodyFormData = new FormData()
        bodyFormData.append('name', this.name)
        bodyFormData.append('instrument', this.instrument)
        bodyFormData.append('band', this.band)
        axios.post(this.url_add, bodyFormData)
        .then(response => {
          this.members.push(
            {
              name: response.data.data[0].name,
              instrument: response.data.data[0].instrument,
              band: response.data.data[0].band,
            }
          )
          this.name = ''
          this.instrument = ''
          this.band = ''
        })
      }
    }
  });
</script>