Use labels instead of placeholders on contact form

Author: tut-tuuut

contact/forms.py

@@ -17,21 +17,20 @@
 class BaseContactForm(ContactForm):
     message_subject = forms.CharField(
         max_length=100,
-        widget=forms.TextInput(
-            attrs={"class": "required", "placeholder": _("Message subject")}
-        ),
+        widget=forms.TextInput(attrs={"class": "required"}),
         label=_("Message subject"),
     )
     email = forms.EmailField(
-        widget=forms.TextInput(attrs={"class": "required", "placeholder": _("E-mail")})
+        widget=forms.TextInput(attrs={"class": "required"}),
+        label=_("E-mail"),
     )
     name = forms.CharField(
-        widget=forms.TextInput(attrs={"class": "required", "placeholder": _("Name")})
+        widget=forms.TextInput(attrs={"class": "required"}),
+        label=_("Name"),
     )
     body = forms.CharField(
-        widget=forms.Textarea(
-            attrs={"class": "required", "placeholder": _("Your message")}
-        )
+        widget=forms.Textarea(attrs={"class": "required"}),
+        label=_("Your message"),
     )
     captcha = ReCaptchaField(widget=ReCaptchaV3)
 

djangoproject/templates/contact/foundation.html

@@ -32,18 +32,22 @@ <h1>{% translate "Contact the Django Software Foundation" %}</h1>
   <form action="." method="post" accept-charset="utf-8" class="form-input">
     {% csrf_token %}
     <p>
+      <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
       {% if form.name.errors %}<p class="errors">{{ form.name.errors.as_text }}</p>{% endif %}
       {{ form.name }}
     </p>
     <p class="form-email">
+      <label for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
       {% if form.email.errors %}<p class="errors">{{ form.email.errors.as_text }}</p>{% endif %}
       {{ form.email }}
     </p>
     <p>
+      <label for="{{ form.message_subject.id_for_label }}">{{ form.message_subject.label }}</label>
       {% if form.message_subject.errors %}<p class="errors">{{ form.message_subject.errors.as_text }}</p>{% endif %}
       {{ form.message_subject }}
     </p>
     <p>
+      <label for="{{ form.body.id_for_label }}">{{ form.body.label }}</label>
       {% if form.body.errors %}<p class="errors">{{ form.body.errors.as_text }}</p>{% endif %}
       {{ form.body }}
     </p>