Use Django widget tweaks on first two forms

src/Pipfile

@@ -16,6 +16,7 @@ pyjwkest = "*"
 psycopg2-binary = "*"
 whitenoise = "*"
 django-formtools = "*"
+django-widget-tweaks = "*"
 
 [dev-packages]
 django-debug-toolbar = "*"

src/Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "1d1243f61f70993da15d1e721907c336481b37498ee9c9d2e0b5ace1f7502289"
+            "sha256": "18eca71dc94b2fc658f01376fdf3518111de64db7acce87831e44b3a1803310f"
         },
         "pipfile-spec": 6,
         "requires": {},
@@ -214,6 +214,14 @@
             "index": "pypi",
             "version": "==2.4"
         },
+        "django-widget-tweaks": {
+            "hashes": [
+                "sha256:9bfc5c705684754a83cc81da328b39ad1b80f32bd0f4340e2a810cbab4b0c00e",
+                "sha256:fe6b17d5d595c63331f300917980db2afcf71f240ab9341b954aea8f45d25b9a"
+            ],
+            "index": "pypi",
+            "version": "==1.4.12"
+        },
         "environs": {
             "extras": [
                 "django"
@@ -707,11 +715,11 @@
         },
         "pbr": {
             "hashes": [
-                "sha256:cfcc4ff8e698256fc17ea3ff796478b050852585aa5bae79ecd05b2ab7b39b9a",
+                "sha256:b97bc6695b2aff02144133c2e7399d5885223d42b7912ffaec2ca3898e673bfe",
-                "sha256:da3e18aac0a3c003e9eea1a81bd23e5a3a75d745670dcf736317b7d966887fdf"
+                "sha256:db2317ff07c84c4c63648c9064a79fe9d9f5c7ce85a9099d4b6258b3db83225a"
             ],
             "markers": "python_version >= '2.6'",
-            "version": "==5.10.0"
+            "version": "==5.11.0"
         },
         "platformdirs": {
             "hashes": [
@@ -809,26 +817,26 @@
         },
         "stevedore": {
             "hashes": [
-                "sha256:01645addb67beff04c7cfcbb0a6af8327d2efc3380b0f034aa316d4576c4d470",
+                "sha256:02518a8f0d6d29be8a445b7f2ac63753ff29e8f2a2faa01777568d5500d777a6",
-                "sha256:9a23111a6e612270c591fd31ff3321c6b5f3d5f3dabb1427317a5ab608fc261a"
+                "sha256:3b1cbd592a87315f000d05164941ee5e164899f8fc0ce9a00bb0f321f40ef93e"
             ],
             "markers": "python_version >= '3.8'",
-            "version": "==4.0.1"
+            "version": "==4.1.0"
         },
         "tomli": {
             "hashes": [
                 "sha256:939de3e7a6161af0c887ef91b7d41a53e7c5a1ca976325f429cb46ea9bc30ecc",
                 "sha256:de526c12914f0c550d15924c62d72abc48d6fe7364aa87328337a31007fe8a4f"
             ],
-            "markers": "python_version < '3.11'",
+            "markers": "python_full_version < '3.11.0a7'",
             "version": "==2.0.1"
         },
         "types-pytz": {
             "hashes": [
-                "sha256:17d66e4b16e80ceae0787726f3a22288df7d3f9fdebeb091dc64b92c0e4ea09d",
+                "sha256:0c163b15d3e598e6cc7074a99ca9ec72b25dc1b446acc133b827667af0b7b09a",
-                "sha256:950b0f3d64ed5b03a3e29c1e38fe2be8371c933c8e97922d0352345336eb8af4"
+                "sha256:a8e1fe6a1b270fbfaf2553b20ad0f1316707cc320e596da903bb17d7373fed2d"
             ],
-            "version": "==2022.4.0.0"
+            "version": "==2022.5.0.0"
         },
         "types-pyyaml": {
             "hashes": [

src/registrar/config/settings.py

@@ -84,6 +84,8 @@ INSTALLED_APPS = [
     "django.contrib.staticfiles",
     # application used for integrating with Login.gov
     "djangooidc",
+    # library to simplify form templating
+    "widget_tweaks",
     # let's be sure to install our own application!
     "registrar",
 ]

src/registrar/forms/application_wizard.py

@@ -10,25 +10,50 @@ from formtools.wizard.views import NamedUrlSessionWizardView  # type: ignore
 logger = logging.getLogger(__name__)
 
 
-class RequirementsForm(forms.Form):
-    template_name = "application_requirements.html"
-    agree_box = forms.BooleanField()
-
-
 class OrganizationForm(forms.Form):
-    template_name = "application_organization.html"
+    organization_type = forms.ChoiceField(
-    organization_type = forms.ChoiceField(widget=forms.RadioSelect)
+        required=True,
+        choices=[
+            ("Federal", "Federal: a federal agency"),
+            ("Interstate", "Interstate: an organization of two or more states"),
+            (
+                "State_or_Territory",
+                "State or Territory: One of the 50 U.S. states, the District of Columbia, American Samoa, Guam, Northern Mariana Islands, Puerto Rico, or the U.S. Virgin Islands",
+            ),
+            (
+                "Tribal",
+                "Tribal: a tribal government recognized by the federal or state government",
+            ),
+            ("County", "County: a county, parish, or borough"),
+            ("City", "City: a city, town, township, village, etc."),
+            (
+                "Special_District",
+                "Special District: an independent organization within a single state",
+            ),
+        ],
+        widget=forms.RadioSelect,
+    )
 
 
+class ContactForm(forms.Form):
+    organization_name = forms.CharField(label="Organization Name")
+    street_address = forms.CharField(label="Street address")
+
+
+ORGANIZATION_TITLE = "About your organization"
+CONTACT_TITLE = "Your organization's contact information"
 # List of forms in our wizard. Each entry is a tuple of a name and a form
 # subclass
-FORMS = [("requirements", RequirementsForm), ("organization", OrganizationForm)]
+FORMS = [
+    (ORGANIZATION_TITLE, OrganizationForm),
+    (CONTACT_TITLE, ContactForm),
+]
 
 # Dict to match up the right template with the right step. Keys here must
 # match the first elements of the tuples above
 TEMPLATES = {
-    "requirements": "application_requirements.html",
+    ORGANIZATION_TITLE: "application_organization.html",
-    "organization": "application_organization.html",
+    CONTACT_TITLE: "application_contact.html",
 }
 
 

src/registrar/templates/application_contact.html

@@ -0,0 +1,35 @@
+<!-- Test page -->
+{% extends 'application_form.html' %}
+{% load widget_tweaks %}
+
+{% block title %}Apply for a .gov domain - Your organization's contact information{% endblock %}
+
+{% block form_content %}
+<h1>Your organization's contact information</h1>
+
+<h2>What is the name and mailing address of your organization?</h2>
+
+<p>Enter the name of the organization your represent. Your organization might be part
+of a larger entity. If so, enter information about your part of the larger entity.</p>
+
+<p>All fields are required unless they are marked optional.</p>
+
+<form class="usa-form usa-form--large" method="post">
+  {{ wizard.management_form }}
+  {% csrf_token %}
+
+  {{ wizard.form.organization_name|add_label_class:"usa-label" }}
+  {{ wizard.form.organization_name|add_class:"usa-input" }}
+
+  <fieldset class="usa-fieldset">
+    {{ wizard.form.street_address|add_label_class:"usa-label" }}
+    {{ wizard.form.street_address|add_class:"usa-input" }}
+  </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.next }}">Next</button>
+</form>
+
+{% endblock %}

src/registrar/templates/application_organization.html

@@ -1,31 +1,25 @@
 <!-- Test page -->
 {% extends 'application_form.html' %}
+{% load widget_tweaks %}
 
 {% block title %}Apply for a .gov domain - About your organization{% endblock %}
 
 {% block form_content %}
 <h1>About your organization</h1>
 
-<h2> What kind of government organization do you represent?</h2>
-
 <form class="usa-form usa-form--large" method="post">
   {{ wizard.management_form }}
   {% csrf_token %}
+
   <fieldset class="usa-fieldset">
-    <p>
+  <legend>
-      Required fields are marked with an asterisk (<abbr
+    <h2> What kind of government organization do you represent?</h2>
-        title="required"
+  </legend>
-        class="usa-hint usa-hint--required"
+
-        >*</abbr>).
+  {{ wizard.form.organization_type|add_class:"usa-radio" }}
-    </p>
+
-    {% for field in wizard.form %}
+  </fieldset>
-      <label class="usa-label" for="id_{{ field.name }}">{{ field.label }}</label>
+  <button name="wizard_goto_step" type="submit" class="usa-button" value="{{ wizard.steps.next }}">Next</button>
-      {{ 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 %}

src/registrar/templates/application_requirements.html

@@ -1,37 +0,0 @@
-<!-- Test page -->
-{% extends 'application_form.html' %}
-
-{% block title %}Apply for a .gov domain - Requirements{% endblock %}
-
-{% block form_content %}
-<h1>Requirements</h1>
-
-<p>In order to request and register a .gov domain: </p>
-
-<ol>
-<li> You must be a government employee</li>
-<li> You need to have the approval within your organization to make this request</li>
-</ol>
-
-<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 %}