Added contact page and mailer

homeapp/forms.py

+from django import forms
+
+class ContactForm(forms.Form):
+    name = forms.CharField(required=True, widget=forms.TextInput(attrs={'class': 'formfield'}))
+    email = forms.EmailField(required=True, widget=forms.TextInput(attrs={'class': 'formfield'}))
+    subject = forms.CharField(required=True, widget=forms.TextInput(attrs={'class': 'formfield'}))
+
+    message = forms.CharField(widget=forms.Textarea(attrs={'class': 'formfield'}), required=True)

homeapp/templates/homeapp/contact.html

+{% extends "base.html" %}
+
+{% block title %}
+ <title>Music Contact</title>
+{% endblock title%}
+
+{% block content %}
+<h1 style="text-align: center;">Contact Us</h1><br><br>
+
+<form method="post", class="myborder">
+    {% csrf_token %}
+    {{ form.as_p }}
+    <div class="form-actions">
+        <button type="submit" class="contactbutton">Send</button>
+    </div>
+</form>
+
+{% endblock content %} 
\ No newline at end of file

homeapp/urls.py

@@ -3,4 +3,5 @@ from . import views
 
 urlpatterns = [
     path('', views.home, name='home'),
+    path('contact', views.contact, name='contact'),
 ]
\ No newline at end of file

homeapp/views.py

-from django.shortcuts import render
+from django.core.mail import send_mail, BadHeaderError
+from django.http import HttpResponse, HttpResponseRedirect
+from django.shortcuts import render, redirect
+from django.urls import reverse
+from .forms import ContactForm
+from django.contrib import messages
+
 
 def home(request):
     context = {}
-    return render(request, 'homeapp/home.html', context)
\ No newline at end of file
+    return render(request, 'homeapp/home.html', context)
+
+def contact(request):
+    if request.method == "GET":
+        form = ContactForm()
+    else:
+        form = ContactForm(request.POST)
+        if form.is_valid():
+            name = form.cleaned_data['name']
+            subject = form.cleaned_data['subject']
+            email = form.cleaned_data['email']
+            message = name + ':\n' + form.cleaned_data['message']        
+            try:
+                send_mail(subject, message, email, ['myemail@mydomain.com'])
+            except BadHeaderError:
+                messages.add_message(request, messages.ERROR, 'Message Not Sent') 
+                return HttpResponse("Invalid header found.")
+            
+            messages.add_message(request, messages.SUCCESS, 'Message Sent')
+            return redirect(reverse('home'))
+        else:
+            messages.add_message(request, messages.ERROR, 'Invalid Form Data; Message Not Sent') 
+    
+    return render(request, 'homeapp/contact.html', {"form": form})
\ No newline at end of file

music/settings.py

@@ -131,4 +131,7 @@ STATICFILES_FINDERS = [
     'django.contrib.staticfiles.finders.FileSystemFinder',
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
     'sass_processor.finders.CssFinder',
-]
\ No newline at end of file
+]
+
+DEFAULT_FROM_EMAIL = "lb01545@surrey.ac.uk"
+EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
\ No newline at end of file

music/urls.py

@@ -17,6 +17,6 @@ from django.contrib import admin
 from django.urls import path, include
 
 urlpatterns = [
-    path('home/', include('homeapp.urls')),
     path('admin/', admin.site.urls),
+    path('', include('homeapp.urls')),
 ]

static/css/base.css

@@ -11,4 +11,38 @@ h1 {
 p {
   color: white; }
 
+.formfield {
+  display: block; }
+
+.success {
+  background-color: #00FF00; }
+
+.error, .errorlist {
+  background-color: #FF0000; }
+
+.myborder {
+  width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  border-style: solid;
+  border-radius: 10px;
+  border-color: #2c2c2c;
+  background: #2c2c2c; }
+
+.contactbutton {
+  color: #fff;
+  background-color: #1DB954;
+  border-color: #1DB954;
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  border-radius: 0.3rem;
+  width: 100%;
+  border: 1px solid transparent;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+
+.contactbutton:hover {
+  background-color: #1db944af;
+  border-color: #1db944af;
+  border: 1px solid transparent; }
+
 /*# sourceMappingURL=base.css.map */
\ No newline at end of file

static/css/base.css.map

@@ -5,5 +5,5 @@
 		"base.scss"
 	],
 	"names": [],
-	"mappings": "AAEA,AAAA,IAAI,CAAC;EACJ,WAAW,EAHL,eAAe,EAAE,SAAS;EAIhC,gBAAgB,EAHT,OAAO;EAId,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI,GACb;;AACD,AAAA,EAAE,CAAC;EACF,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,KAAK,GACZ;;AACD,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,KAAK,GACf"
+	"mappings": "AAGA,AAAA,IAAI,CAAC;EACJ,WAAW,EAJL,eAAe,EAAE,SAAS;EAKhC,gBAAgB,EAJT,OAAO;EAKd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI,GACb;;AAED,AAAA,EAAE,CAAC;EACF,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,KAAK,GACZ;;AAED,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,KAAK,GACf;;AAED,AAAA,UAAU,CAAC;EACP,OAAO,EAAE,KAAK,GACjB;;AAED,AAAA,QAAQ,CAAA;EACJ,gBAAgB,EAAE,OACtB,GAAC;;AAED,AAAA,MAAM,EAAE,UAAU,CAAA;EACd,gBAAgB,EAAE,OACtB,GAAC;;AAED,AAAA,SAAS,CAAA;EACL,KAAK,EAAC,KAAK;EACX,MAAM,EAAC,MAAM;EACb,OAAO,EAAE,IAAI;EACb,YAAY,EAAC,KAAK;EAClB,aAAa,EAAE,IAAI;EACnB,YAAY,EAAC,OAAO;EACpB,UAAU,EAAE,OAAO,GACtB;;AAED,AAAA,cAAc,CAAC;EACX,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,OAAO;EACzB,YAAY,EAAE,OAAO;EACrB,OAAO,EAAE,WAAW;EACpB,SAAS,EAAE,OAAO;EAClB,aAAa,EAAE,MAAM;EACrB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,qBAAqB;EAC7B,UAAU,EAAE,yHAAyH,GACxI;;AAED,AAAA,cAAc,CAAC,KAAK,CAAC;EACjB,gBAAgB,EAAE,SAAS;EAC3B,YAAY,EAAE,SAAS;EACvB,MAAM,EAAE,qBAAqB,GAChC"
 }
\ No newline at end of file

static/css/base.scss

 $font: 'Lucida Grande', monospace;
 $color: #191414;
+
 body {
  font-family: $font;
  background-color: $color;
  margin: 10px;
  padding: 10px;
 }
+
 h1 {
  text-transform: uppercase;
  color: white;
 }
+
 p {
     color: white;
+}
+
+.formfield {
+    display: block;
+}
+
+.success{
+    background-color: #00FF00
+}
+
+.error, .errorlist{
+    background-color: #FF0000
+}
+
+.myborder{
+    width:500px;
+    margin:0 auto;
+    padding: 20px;
+    border-style:solid;
+    border-radius: 10px;
+    border-color:#2c2c2c;
+    background: #2c2c2c;
+}
+
+.contactbutton {
+    color: #fff;
+    background-color: #1DB954;
+    border-color: #1DB954;
+    padding: 0.5rem 1rem;
+    font-size: 1.25rem;
+    border-radius: 0.3rem;
+    width: 100%;
+    border: 1px solid transparent;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.contactbutton:hover {
+    background-color: #1db944af;
+    border-color: #1db944af;
+    border: 1px solid transparent;
 }
\ No newline at end of file