feat: add podcast signup section to page

astro/src/components/forms/GoogleForm.astro

@@ -5,6 +5,7 @@ interface Props {
   arrayFields?: Array<string>;
   class?: string;
   messageText?: string;
+  buttonTheme?: string;
 }
 
 const defaultMessage =
@@ -15,6 +16,7 @@ const {
   arrayFields = [],
   class: classes = null,
   messageText = defaultMessage,
+  buttonTheme = "info",
 } = Astro.props;
 const messageId = `${id}-message`;
 ---
@@ -29,7 +31,7 @@ const messageId = `${id}-message`;
   <slot />
   <slot name="buttons">
     <div class="col-md-6 mt-4 mx-auto">
-      <button type="submit" class="btn btn-info w-100">Submit</button>
+      <button type="submit" class={`btn btn-${buttonTheme} w-100`}>Submit</button>
     </div>
   </slot>
 </form>

astro/src/pages/podcasts/index.astro

@@ -63,29 +63,32 @@ import ImageHeading from "@components/ImageHeading.astro";
 import Layout from "src/layouts/Layout.astro";
 import SocialLinks from "@components/SocialLinks.astro";
 import StaffList from "@components/StaffList.astro";
-import ThemedSection from "@components/ThemedSection.astro";
 import ThemedBox from "@components/ThemedBox.astro";
+import ThemedSection from "@components/ThemedSection.astro";
 ---
 
 <Layout title="Our Podcast" {metadata}>
   <ImageHeading image="podcast" slot="header">
     <h1 class="display-3">Podcast Series</h1>
   </ImageHeading>
+  <ThemedSection style="tertiary" py={3}>
+    <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="rounded mb-4">
+      <div class="d-flex flex-column flex-lg-row justify-content-center column-gap-3 align-items-center pt-2">
+        <p class="lead text-center">Subscribe to the <Branding>Accessible Community</Branding>&nbsp;podcast.</p>
+        <SocialLinks links={toUrlMap(shows[0]!.data.links)} iconSize="1.5em" gap={2} label="Podcast Locations" />
+      </div>
+    </ThemedBox>
+    <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="rounded">
+      <p class="lead text-center mb-0 p-2">
+        Would you like to share your experiences? <br class="d-inline d-lg-none" />
+        Fill out this <a href="/podcasts/interest-form/">interest form</a>.
+      </p>
+    </ThemedBox>
+  </ThemedSection>
+
   {
     shows.map((show, index) => (
       <ThemedSection style={(index % 2) ? "tertiary" : undefined} id={show.id}>
-        {index === 0
-        ? <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="mb-5 p-3 rounded">
-            <div class="d-flex flex-column flex-lg-row justify-content-center column-gap-3 align-items-center mt-2">
-              <p class="lead text-center">Subscribe to the <Branding>Accessible Community</Branding>&nbsp;podcast.</p>
-              {
-                show.data.links
-                ? <SocialLinks links={toUrlMap(show.data.links)} iconSize="1.5em" label="Podcast Locations" />
-                : ""
-              }
-            </div>
-          </ThemedBox>
-        : "" }
         <h2 class="pb-2 mb-4 border-bottom border-primary" set:text={show.data.title} />
         <div
           class:list={[
@@ -118,6 +121,8 @@ import ThemedBox from "@components/ThemedBox.astro";
       </ThemedSection>
     ))
   }
+
+  {/* Credits */}
   <ThemedSection style="secondary">
     <h2 class="display-4">Credits and Thanks</h2>
     <h3 class="mt-4 mb-2">Contributors</h3>

astro/src/pages/podcasts/interest-form.astro

@@ -0,0 +1,191 @@
+---
+import type { Breadcrumbs, PageMetadata } from "@lib/types";
+
+const title = "Podcast Interest Form";
+const metadata: PageMetadata = {
+  title,
+  description: "Interest Form for our 'Day in the Life' podcast",
+};
+
+const crumbs: Breadcrumbs = [
+  {
+    name: "Home",
+    href: "/",
+  },
+  {
+    name: "Our Podcast",
+    href: "/podcasts/",
+  },
+];
+
+import GoogleForm from "@components/forms/GoogleForm.astro";
+import ImageHeading from "@components/ImageHeading.astro";
+import Layout from "src/layouts/Layout.astro";
+import ThemedSection from "@components/ThemedSection.astro";
+---
+
+<Layout {title} {crumbs} {metadata}>
+  <ImageHeading image="podcast" slot="header">
+    <h1 class="display-3">Podcast Interest Form</h1>
+  </ImageHeading>
+
+  <ThemedSection theme="tertiary">
+    <h2>Share your experience</h2>
+    <p>
+      Would you like to share your experiences living with disability with our podcasts? Do you have an accessibility success story you would like to share?
+      Please complete the sign up form below and we will be in touch.
+    </p>
+
+    <GoogleForm
+      id="podcastInterviewForm"
+      key="AKfycbx26smDFVUQy7lquGCDUAVBDdk5sqRS5k6_MgWJKDd9-qIkjm2OSH3uCSUpPIZCaG0"
+      class="col p-4 bg-body-tertiary border border-2 border-info rounded"
+    >
+      <div slot="prelude">
+        <h3 class="text-info">What You Can Expect</h3>
+        <ul>
+          <li>
+            A supportive and empathetic interview by a knowledgeable professional.
+          </li>
+          <li>
+            A pre-interview meeting to answer any questions you have, ensure you have the accommodations you need, familiarize you with the process, and ensure you are comfortable answering the questions.
+          </li>
+          <li>
+            We schedule interviews for 1 hour 15 minutes but you control the time. We can stop early or run over, based on your comfort level.
+          </li>
+          <li>
+            We understand concerns about AI and privacy. We commit to not using AI on content associated with your name beyond Zoom transcription used during the interviews.
+          </li>
+        </ul>
+        <!-- <h3 class="text-info">Upcoming Topics</h3>
+        <ul>
+          <li>April: Multiple Sclerosis</li>
+          <li>May: TBD</li>
+        </ul> -->
+        <h3 class="text-info">Podcast Interview Form</h3>
+      </div>
+      <div class="row row-cols-1 row-cols-lg-2">
+        <div class="col col-lg-6">
+          <div class="mb-3">
+            {/* Name */}
+            <label for="firstNameField" class="form-label mb-1 required-field">
+              First name
+            </label>
+            <span class="asterisk"></span>
+            <input
+              type="text"
+              name="FirstName"
+              class="form-control w-100"
+              id="firstNameField"
+              autocomplete="name"
+              required
+            />
+          </div>
+          <div class="mb-4">
+            <label for="lastNameField" class="form-label mb-1 required-field">
+              Last name
+            </label>
+            <span class="asterisk"></span>
+            <input
+              type="text"
+              name="LastName"
+              class="form-control w-100"
+              id="lastNameField"
+              autocomplete="name"
+              required
+            />
+          </div>
+          <div class="mb-3">
+            <input type="checkbox" name="Consent" id="consent" checked class="form-check-input" value="Yes" />
+            <label for="consent" class="form-label mb-1 required-field">
+              I am okay with my name being used (on the podcast).
+            </label>
+          </div>
+
+          {/* Disability or Accessibility success topic */}
+          <div class="mb-3">
+            <label for="topic" class="form-label mb-1 required-field">
+              Disability or Accessibility Success Topic
+            </label>
+            <span class="asterisk"></span>
+            <select name="Topic" class="form-control w-100" id="topic" required>
+              <option value="" disabled selected>Select a topic</option>
+              <option value="accessibilitySuccess">Accessibility Success Story</option>
+              <option value="other">Other (please specify in comments)</option>
+            </select>
+          </div>
+
+          {/* Email */}
+          <div class="mb-3">
+            <label for="emailField" class="form-label mb-1 required-field">
+              Email
+            </label>
+            <span class="asterisk"></span>
+            <input
+              type="text"
+              name="Email"
+              class="form-control w-100"
+              id="emailField"
+              aria-describedby="emailHelp"
+              required
+            />
+            <p id="emailHelp" class="form-text small">
+              We will only use this address to contact you regarding the
+              interview.
+              <a href="/privacy-policy" target="_blank">Privacy policy</a>.
+            </p>
+          </div>
+        </div>
+
+        <div class="col col-lg-6">
+          {/* Accommodations */}
+          <div class="mb-3">
+            <label for="accommodationField" class="form-label mb-1 required-field">
+              Do you need any accomodations to be successful?
+            </label>
+            <textarea
+              id="accommodationField"
+              name="Accommodations"
+              class="form-control w-100"
+              rows="4"
+              aria-describedby="accomodationHelp"
+            />
+            <p id="accomodationHelp" class="form-text small">
+              Please list any accomodations that you need for the interview or ongoing communciations.
+            </p>
+          </div>
+
+            {/* Comments */}
+            <div>
+              <label for="comments" class="form-label mb-1 required-field">
+                General comments
+              </label>
+              <textarea
+                id="comments"
+                name="Comments"
+                class="form-control w-100"
+                rows="4"
+                aria-describedby="commentsHelp"
+              />
+              <p id="commentsHelp" class="form-text small">
+                Please add any other comments, thoughts or questions you have.
+              </p>
+            </div>
+          </div>
+      </div>
+    </GoogleForm>
+  </ThemedSection>
+  <style scoped>
+    .field * + label:not(.form-check-label) {
+      margin-top: 1rem;
+    }
+    li {
+      margin-left: 1.25em;
+      margin-right: 1.25em;
+
+      & p:last-child {
+        margin-bottom: 0;
+      }
+    }
+  </style>
+</Layout>