Update /waitlist/ to include supported diseases / interest checkboxes (…

…#671)

* add condition input form to waitlist

formatting

add additional-conditions section

add new fiels to form logic

cleanup

design feedback

data flow working

* Bob/use waitlist disease from config (#672)

some changes to take advantage of the disease-config work we did for the site audit in the waitlist form
---------

Co-authored-by: wellsbobby52 <[email protected]>
Co-authored-by: Daniel Sass <[email protected]>

* use name instead

* addtional design feedback, updating spacing

* fixing supported disease styles inclusion

* updated requirement: drop the bullet point list, adjust checkboxes label

---------

Co-authored-by: wellsbobby52 <[email protected]>
Co-authored-by: fzhao99 <[email protected]>

_includes/content/supported-diseases.html

@@ -1,7 +1,5 @@
-<ul>
+<ul class="{{ include.styles }}">
   {% for disease in site.content.supported_diseases %}
     <li>{{ disease }}</li>
   {% endfor %}
 </ul>
-
-

_pages/getting-started/index.md

@@ -13,6 +13,7 @@ Before you can use SimpleReport, you’ll need to set it up.
 
 SimpleReport supports the following conditions: 
 
+
 {%include content/supported-diseases.html%}
 
 If you're looking for an an easier way to report results, find out [how to sign up]({% link _pages/getting-started/organizations-and-testing-facilities/onboard-your-organization.md %}).

pages/forms/waitlist-form.html

@@ -25,7 +25,7 @@ <h1 class="font-heading-xl text-primary-darker">{{ page.title }}</h1>
         >Name {% include required.html %}</label
       >
       <input
-        class="usa-input"
+        class="usa-input form-input"
         id="name"
         name="name"
         type="text"
@@ -37,7 +37,7 @@ <h1 class="font-heading-xl text-primary-darker">{{ page.title }}</h1>
         >Email address {% include required.html %}</label
       >
       <input
-        class="usa-input"
+        class="usa-input form-input"
         id="email"
         name="email"
         type="email"
@@ -49,18 +49,18 @@ <h1 class="font-heading-xl text-primary-darker">{{ page.title }}</h1>
         >Phone number {% include required.html %}</label
       >
       <input
-        class="usa-input"
+        class="usa-input form-input"
         id="phone"
         name="phone"
         type="tel"
         autocomplete="tel"
         required
       />
-      <label class="usa-label" for="state" id="state"
-        >State {% include required.html %}</label
-      >
+      <label class="usa-label" for="state">
+        State {% include required.html %}
+      </label>
       <div class="usa-combo-box">
-        <select class="usa-select" id="state" name="state" required>
+        <select class="usa-select form-input" id="state" name="state" required>
           {% include forms/state-options.html %}
         </select>
       </div>
@@ -71,17 +71,33 @@ <h1 class="font-heading-xl text-primary-darker">{{ page.title }}</h1>
         Your facility or the Public Health Department you are representing
       </span>
       <input
-        class="usa-input"
+        class="usa-input form-input"
         id="organization"
         name="organization"
         type="text"
         required
       />
+      <label class="usa-label" for="supported-diseases">Check the boxes below for the conditions you're interested in reporting:</label>
+      <div class="checkboxes" id="supported-diseases">
+        {% for disease in site.content.supported_diseases %}
+          <div class="usa-checkbox">
+            <input class="usa-checkbox__input form-input" type="checkbox" id="interested in {{disease}}" name="interested in {{disease}}" value="interested in {{disease}}">
+            <label class="usa-checkbox__label" for="interested in {{disease}}">{{disease}}</label>
+          </div>
+        {% endfor %}
+      </div>
+      <label class="usa-label" for="additional-conditions">If there are any additional conditions you would like to be able to report
+        using SimpleReport, please enter them below.</label>
+      <textarea
+              class="usa-textarea height-10 form-input"
+              id="additional-conditions"
+              name="additional-conditions"
+      ></textarea>
       <label class="usa-label" for="referral">How did you hear about us?</label>
       <textarea
-        class="usa-textarea height-10"
-        id="referral"
-        name="referral"
+              class="usa-textarea height-10 form-input"
+              id="referral"
+              name="referral"
       ></textarea>
       <p class="margin-bottom-0">
         By submitting this form, you agree to our
@@ -109,18 +125,17 @@ <h3 class="usa-alert__heading">Error</h3>
     const form = document.getElementById("waitlist-form");
     form.onsubmit = async (e) => {
       e.preventDefault();
-      const fields = [
-        "name",
-        "email",
-        "phone",
-        "state",
-        "organization",
-        "referral",
-      ];
-
+      const fieldsToCheck = Array.from(document.getElementsByClassName("form-input"))
       const data = {};
-      fields.forEach(
-        (field) => (data[field] = document.getElementById(field).value)
+      fieldsToCheck.forEach(
+        (element) => {
+          if(element.type === "checkbox"){
+            data[element.name] = element.checked;
+          } 
+          else {
+            data[element.name] = element.value;
+          }
+        }
       );
 
       try {