contact form

app/templates/timeline.html

@@ -42,15 +42,48 @@
 	</div>
     <div id="timeline"></div>
     <div id="contact">
-		<form method="post">
-			<input type="text" placeholder="Subject"/><br>
-			<textarea placeholder="Message"></textarea><br>
-			<input type="submit" value="Send message">
+		<div class="content">
+		<form class="contact-form" action="/disabled" method="post">
+			<input type="text" placeholder="Your name" name="name" required><br>
+			<input type="text" placeholder="Your email" name="email" required><br>
+			<textarea placeholder="Message" name="message" required></textarea><br>
+			<input type="submit" value="Send message" />
+			{% csrf_token %}
 		</form>
-		{{ contact.body | safe }}
+		</div>
 	</div>
 	<script src="{% static 'timeline/js/timeline.js' %}"></script>
     <script>
+		function submitContact(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			var data = {}
+			var form = document.querySelector('.contact-form')
+			form.querySelectorAll('input,textarea').forEach(input => {
+				if (input.name) {
+					data[input.name] = input.value
+				}
+			})
+			fetch('/contact/', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'X-CSRFToken': data.csrfmiddlewaretoken,
+				},
+				body: JSON.stringify(data)
+			}).then(response => response.json()).then(response => {
+				if (response.sent) {
+					var content = document.querySelector('#contact .content')
+					content.innerHTML = `
+						Thank you for taking the time to send us a message, we will get back to you soon.
+						<br><br>
+						<a href="/" target="_self">Back to Timeline</a>
+					`
+				}
+			})
+		}
+		document.querySelector('#contact .contact-form').addEventListener('submit', submitContact)
+
 		var data = {{ timeline_json | safe }};
 		var timeline