contacts: mark required fields with an asterisk (#9495)

welco/contacts/forms.py

@@ -34,11 +34,11 @@ class ContactAddForm(forms.Form):
     last_name = forms.CharField(label=_('Last Name'),
             required=True,
             widget=forms.TextInput(attrs={'required': 'required'}))
-    email = forms.CharField(label=_('Email'))
-    address = forms.CharField(label=_('Address'))
-    zipcode = forms.CharField(label=_('Zip Code'))
-    city = forms.CharField(label=_('City'))
-    country = forms.CharField(label=_('Country'))
-    phone = forms.CharField(label=_('Phone'))
-    mobile = forms.CharField(label=_('Mobile'))
-    birthdate = forms.CharField(label=_('Birthdate'))
+    email = forms.CharField(label=_('Email'), required=False)
+    address = forms.CharField(label=_('Address'), required=False)
+    zipcode = forms.CharField(label=_('Zip Code'), required=False)
+    city = forms.CharField(label=_('City'), required=False)
+    country = forms.CharField(label=_('Country'), required=False)
+    phone = forms.CharField(label=_('Phone'), required=False)
+    mobile = forms.CharField(label=_('Mobile'), required=False)
+    birthdate = forms.CharField(label=_('Birthdate'), required=False)

welco/contacts/templates/contacts/contact_add.html

@@ -1,7 +1,16 @@
 {% load i18n %}
 <div>
 <form class="contact-add">
-{{form.as_p}}
+{% for hidden in form.hidden_fields %}
+{{ hidden }}
+{% endfor %}
+
+{% for field in form.visible_fields %}
+<p {% if field.field.required %}class="required" {% endif %}>
+<label for="id_{{field.name}}">{{ field.label }} :</label>
+{{ field }}
+</p>
+{% endfor %}
 
 <div class="buttons">
   <button>{% trans "Save" %}</button>

welco/static/css/style.css

@@ -515,7 +515,7 @@ div#subheader a:hover {
 
 form.contact-add p label {
 	display: inline-block;
-	width: 6em;
+	width: 11em;
 }
 
 div.ui-dialog form.contact-add p select {
@@ -587,3 +587,7 @@ div.inactive {
 	opacity: 0.3;
 	pointer-events: none;
 }
+
+p.required label::after {
+	content: " (*)";
+}