Add other contacts view

src/registrar/forms/application_wizard.py

@@ -111,6 +111,17 @@ class YourContactForm(forms.Form):
     email = forms.EmailField(label="Email")
     phone = forms.CharField(label="Phone")
 
+class OtherContactsForm(forms.Form):
+    given_name = forms.CharField(label="First name/given name")
+    middle_name = forms.CharField(
+            required=False,
+            label="Middle name (optional)",
+            )
+    family_name = forms.CharField(label="Last name/family name")
+    title = forms.CharField(label="Title or role in your organization")
+    email = forms.EmailField(label="Email")
+    phone = forms.CharField(label="Phone")
+
 
 # List of forms in our wizard. Each entry is a tuple of a name and a form
 # subclass
@@ -122,6 +133,7 @@ FORMS = [
     ("dotgov_domain", DotGovDomainForm),
     ("purpose", PurposeForm),
     ("your_contact", YourContactForm),
+    ("other_contacts", OtherContactsForm),
 ]
 
 # Dict to match up the right template with the right step. Keys here must
@@ -134,6 +146,7 @@ TEMPLATES = {
     "dotgov_domain": "application_dotgov_domain.html",
     "purpose": "application_purpose.html",
     "your_contact": "application_your_contact.html",
+    "other_contacts": "application_other_contacts.html",
 }
 
 # We need to pass our page titles as context to the templates, indexed
@@ -146,6 +159,7 @@ TITLES = {
     "dotgov_domain": ".gov domain",
     "purpose": "Purpose of your domain",
     "your_contact": "Your contact information",
+    "other_contacts": "Other contacts for your domain",
 }
 
 

src/registrar/templates/application_form.html

@@ -10,7 +10,7 @@
   <div class="grid-col-9">
     {% block backnav %}
       {% if wizard.steps.prev %}
-      <button form={{form_name}} name="wizard_goto_step" type="submit" class="usa-button usa-button--unstyled" value="{{ wizard.steps.prev }}">
+      <button form="step__{{wizard.steps.current}}" name="wizard_goto_step" type="submit" class="usa-button usa-button--unstyled" value="{{ wizard.steps.prev }}">
         <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
           <use xlink:href="{%static '/img/sprite.svg'%}#arrow_back"></use>
         </svg><span class="margin-left-05">Previous step </span>

src/registrar/templates/application_other_contacts.html

@@ -0,0 +1,47 @@
+<!-- Test page -->
+{% extends 'application_form.html' %}
+{% load widget_tweaks %}
+{% load static %}
+
+{% block form_content %}
+
+<p id="instructions">We strongly encourage you to have at least two points of contact for your domain. Many organizations have an administrative point of contact and a technical point of contact. We recommend that you add at least one more contact.</p>
+<p>All fields are required unless they are marked optional.</p>
+
+<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post">
+  {{ wizard.management_form }}
+  {% csrf_token %}
+
+  <fieldset class="usa-fieldset">
+    {{ wizard.form.given_name|add_label_class:"usa-label" }}
+    {{ wizard.form.given_name|add_class:"usa-input"|attr:"aria-describedby:instructions" }}
+
+    {{ wizard.form.middle_name|add_label_class:"usa-label" }}
+    {{ wizard.form.middle_name|add_class:"usa-input"|attr:"aria-describedby:instructions" }}
+
+    {{ wizard.form.family_name|add_label_class:"usa-label" }}
+    {{ wizard.form.family_name|add_class:"usa-input"|attr:"aria-describedby:instructions" }}
+    
+    {{ wizard.form.title|add_label_class:"usa-label" }}
+    {{ wizard.form.title|add_class:"usa-input"|attr:"aria-describedby:instructions" }}
+
+    {{ wizard.form.email|add_label_class:"usa-label" }}
+    {{ wizard.form.email|add_class:"usa-input"|attr:"aria-describedby:instructions" }}
+
+    {{ wizard.form.phone|add_label_class:"usa-label" }}
+    {{ wizard.form.phone|add_class:"usa-input usa-input--medium"|attr:"aria-describedby:instructions" }}
+  </fieldset>
+
+  <div>
+    <button type="button" class="usa-button usa-button--unstyled">
+      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+        <use xlink:href="{%static '/img/sprite.svg'%}#add_circle"></use>
+      </svg><span class="margin-left-05">Add another contact</span>
+    </button>
+  </div>
+
+  {{ block.super }}
+
+</form>
+
+{% endblock %}