Simplify the template and stylish error messages

Author: tut-tuuut

djangoproject/scss/_style.scss

@@ -1334,6 +1334,17 @@ a.cta {
     }
 }
 
+label[for] {
+  font-weight: bold;
+}
+
+.errorlist {
+  color: var(--error-fg);
+  background-color: var(--error-light-l10);
+  border-radius: .3em;
+  margin: 10px 0;
+}
+
 .callout-right {
     @include respond-min(768px) {
         float: right;

djangoproject/templates/contact/foundation.html

@@ -31,27 +31,19 @@ <h1>{% translate "Contact the Django Software Foundation" %}</h1>
   </p>
   <form action="." method="post" accept-charset="utf-8" class="form-input">
     {% csrf_token %}
-    <p>
-      {{ form.name.label_tag }}
-      {% if form.name.errors %}<p class="errors">{{ form.name.errors.as_text }}</p>{% endif %}
-      {{ form.name }}
-    </p>
-    <p class="form-email">
-      {{ form.email.label_tag }}
-      {% if form.email.errors %}<p class="errors">{{ form.email.errors.as_text }}</p>{% endif %}
-      {{ form.email }}
-    </p>
-    <p>
-      {{ form.message_subject.label_tag }}
-      {% if form.message_subject.errors %}<p class="errors">{{ form.message_subject.errors.as_text }}</p>{% endif %}
-      {{ form.message_subject }}
-    </p>
-    <p>
-      {{ form.body.label_tag }}
-      {% if form.body.errors %}<p class="errors">{{ form.body.errors.as_text }}</p>{% endif %}
-      {{ form.body }}
-    </p>
-    <p>{{ form.captcha }}</p>
+    <div>
+      {{ form.name.as_field_group }}
+    </div>
+    <div>
+      {{ form.email.as_field_group }}
+    </div>
+    <div>
+      {{ form.message_subject.as_field_group }}
+    </div>
+    <div>
+      {{ form.body.as_field_group }}
+    </div>
+    {{ form.captcha }}
     <p class="submit"><input type="submit" class="cta" value="{% translate "Send &rarr;" %}"></p>
   </form>
 {% endblock %}