From 5766a0bf9f3b68fea2c7c683ef6bd24cd3a1a975 Mon Sep 17 00:00:00 2001
From: Neil Martinsen-Burrell <neil.martinsen-burrell@gsa.gov>
Date: Wed, 19 Oct 2022 09:59:04 -0500
Subject: [PATCH] Better form templates

---
 .../templates/application_organization.html   | 22 ++++++++++++++---
 .../templates/application_requirements.html   | 19 ++++++++-------
 .../templates/application_sidebar.html        | 24 +++++++++----------
 3 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/registrar/templates/application_organization.html b/src/registrar/templates/application_organization.html
index e337674df..3ea8057e1 100644
--- a/src/registrar/templates/application_organization.html
+++ b/src/registrar/templates/application_organization.html
@@ -10,8 +10,24 @@
 
 <h2> What kind of government organization do you represent?</h2>
 
-<form action="" method="post">{% csrf_token %}
-{{ wizard.management_form }}
-{{ wizard.form }}
+<form class="usa-form usa-form--large" method="post">
+  {{ wizard.management_form }}
+  {% csrf_token %}
+  <fieldset class="usa-fieldset">
+    <p>
+      Required fields are marked with an asterisk (<abbr
+        title="required"
+        class="usa-hint usa-hint--required"
+        >*</abbr>).
+    </p>
+    {% for field in wizard.form %}
+      <label class="usa-label" for="id_{{ field.name }}">{{ field.label }}</label>
+      {{ field }}
+    {% endfor %}
+    </fieldset>
+    {% if wizard.steps.prev %}
+      <button name="wizard_goto_step" type="submit" class="usa-button usa-button--base" value="{{ wizard.steps.prev }}">Previous</button>
+    {% endif %}
+    <button name="wizard_goto_step" type="submit" class="usa-button" value="{{ wizard.steps.prev }}">Next</button>
 </form>
 {% endblock %}
diff --git a/src/registrar/templates/application_requirements.html b/src/registrar/templates/application_requirements.html
index b2e23ad67..1c8909db0 100644
--- a/src/registrar/templates/application_requirements.html
+++ b/src/registrar/templates/application_requirements.html
@@ -15,12 +15,10 @@
 <li> You need to have the approval within your organization to make this request</li>
 </ol>
 
-<form action="" method="post">{% csrf_token %}
-{{ wizard.management_form }}
-<form class="usa-form usa-form--large" method="post" enctype="multipart/form-data">
+<form class="usa-form usa-form--large" method="post">
+  {{ wizard.management_form }}
   {% csrf_token %}
   <fieldset class="usa-fieldset">
-    <legend class="usa-legend usa-legend--large">Your profile</legend>
     <p>
       Required fields are marked with an asterisk (<abbr
         title="required"
@@ -28,11 +26,14 @@
         >*</abbr
       >).
     </p>
-                {% for field in wizard.form %}
-                <label class="usa-label" for="id_{{ field.name }}">{{ field.label }}</label>
-    {{ field }}
+    {% for field in wizard.form %}
+      <label class="usa-label" for="id_{{ field.name }}">{{ field.label }}</label>
+      {{ field }}
     {% endfor %}
-        </fieldset>
-        <button type="submit" class="usa-button usa-button--big">Save Changes</button>
+    </fieldset>
+    {% if wizard.steps.prev %}
+      <button name="wizard_goto_step" type="submit" class="usa-button usa-button--base" value="{{ wizard.steps.prev }}">Previous</button>
+    {% endif %}
+    <button name="wizard_goto_step" type="submit" class="usa-button" value="{{ wizard.steps.prev }}">Next</button>
 </form>
 {% endblock %}
diff --git a/src/registrar/templates/application_sidebar.html b/src/registrar/templates/application_sidebar.html
index df6ca75eb..9f2dfffaa 100644
--- a/src/registrar/templates/application_sidebar.html
+++ b/src/registrar/templates/application_sidebar.html
@@ -1,18 +1,18 @@
 <div class="tablet:grid-col-4 margin-bottom-4 tablet:margin-bottom-0">
   <nav aria-label="Form steps,">
     <ul class="usa-sidenav">
-		{% for this_step in wizard.steps.all %}
-			<li class="usa-sidenav__item">
-				{% if forloop.counter <= wizard.step1 %}
-					<a href="{% url wizard.url_name step=this_step %}" 
-					{% if this_step == wizard.steps.current %}class="usa-current"{% endif%}>
-					{{ this_step }} {{ forloop.counter }} {{ wizard.step1 }}
-					</a>
-				{% else %}
-					{{ this_step }} {{ forloop.counter }} {{ wizard.step1 }}
-				{% endif %}
-			</li>
-		{% endfor %}
+    {% for this_step in wizard.steps.all %}
+      <li class="usa-sidenav__item">
+        {% if forloop.counter <= wizard.steps.step1 %}
+          <a href="{% url wizard.url_name step=this_step %}" 
+          {% if this_step == wizard.steps.current %}class="usa-current"{% endif%}>
+          {{ this_step }}
+          </a>
+        {% else %}
+          {{ this_step }}
+        {% endif %}
+      </li>
+    {% endfor %}
     </ul>
   </nav>
 </div>