added customized form display for welcome name page

roomlist/accounts/forms.py

@@ -108,12 +108,10 @@ class StudentUpdateForm(forms.Form):
 
 class WelcomeNameForm(forms.Form):
 
-    first_name = forms.CharField(label='First Name', required=False)
-    last_name = forms.CharField(label='Last Name', required=False)
-    gender = MultiSelectFormField(choices=Student.GENDER_CHOICES,
-                                  label='Gender Identity (please choose all that apply)',
-                                  required=False)
-    show_gender = BooleanRadioField(label='Show your gender on your profile?')
+    first_name = forms.CharField( required=False)
+    last_name = forms.CharField(required=False)
+    gender = MultiSelectFormField(choices=Student.GENDER_CHOICES, required=False)
+    show_gender = BooleanRadioField()
 
 
 class WelcomePrivacyForm(forms.ModelForm):

roomlist/accounts/templates/welcome_name.html

@@ -35,10 +35,64 @@
       <div class="panel-heading">
         <h1 class="panel-title text-center"><strong>Name & Gender</strong></h1>
       </div>
-
+      {% if error in my_form.non_field_errors %}
+      <ul class="text-center">
+        {% for error in my_form.non_field_errors %}
+          <li>{{ error }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
       <div class="panel-body">
-        <form action="" method="post">{% csrf_token %}
-          {{ my_form.as_p }}
+        <form class="form-horizontal" autocomplete="off" action="" method="post">{% csrf_token %}
+          <fieldset>
+          <div class="form-group">
+            <label for="{{ my_form.first_name.id_for_label }}" class="col-md-2">First Name</label>
+              <div class="col-md-4">
+                {% if not my_form.first_name.errors %}
+                  {{ my_form.first_name }}
+                {% else %}
+                  <div class="has-error">
+                    {{ my_form.first_name }}
+                    <p>{{ form.first_name.errors }}</p>
+                  </div>
+                {% endif %}
+              </div>
+            <label for="{{ my_form.last_name.id_for_label }}" class="col-md-2">Last Name</label>
+              <div class="col-md-4">
+                {% if not my_form.last_name.errors %}
+                  {{ my_form.last_name }}
+                {% else %}
+                  <div class="has-error">
+                    {{ my_form.last_name }}
+                    <p>{{ form.last_name.errors }}</p>
+                  </div>
+                {% endif %}
+              </div>
+          </div>
+
+          <div class="form-group">
+            <label for="{{ my_form.gender.id_for_label }}" class="col-md-3">
+              Gender Identity<br />(choose all that apply)
+            </label>
+              {% for checkbox in my_form.gender %}
+                <div class="checkbox col-md-3">
+                  <label for="{{ checkbox.id_for_label }}">
+                    {{ checkbox.choice_label }}
+                    {{ checkbox.tag }}
+                </div>
+              {% endfor %}
+          </div>
+
+          <div class="form-group">
+            <label for "{{ my_form.show_gender.id_for_label }}" class="col-md-3">
+              Show Gender on Profile?
+            </label>
+              {% for radio in my_form.show_gender %}
+                <label class="radio-inline">{{ radio.choice_label }}{{ radio.tag }}</label>
+              {% endfor %}
+          </div>
+
+          </fieldset>
           <input type="submit" value="Save" class="btn btn-primary"/>
         </form>
       </div>

roomlist/accounts/views.py

@@ -352,6 +352,10 @@ class WelcomeName(LoginRequiredMixin, FormView):
                                         'last_name': me.user.last_name,
                                         'gender': me.gender,
                                         'show_gender': me.show_gender, })
+
+        form.fields['first_name'].widget.attrs['class'] = 'form-control'
+        form.fields['last_name'].widget.attrs['class'] = 'form-control'
+
         context['my_form'] = form
         return context
 
@@ -367,7 +371,7 @@ class WelcomeName(LoginRequiredMixin, FormView):
         me.user.last_name = form.data['last_name']
 
         me.gender = form.data.getlist('gender')
-        me.show_gender = form.data.get('show_gender', False)
+        me.show_gender = strtobool(form.data.get('show_gender', 'False'))
 
         me.completedName = True