Add ATUN form

components/ms-form.js

@@ -22,6 +22,13 @@ export const CONTACT_FORM = {
   height: 2000,
 };
 
+export const ATUN = {
+  slug: "atun",
+  title: "ATUN form",
+  url: "https://forms.office.com/pages/responsepage.aspx?id=bFwgTJtTgU-Raj-O_eaPrNZFPqw5Il9Hp4B1mWQ_eQhUQkpGWFRCNU4zVUQ0MUVMRlY0WjdIT1ZWWS4u&embed=true",
+  height: 2000,
+};
+
 export const INFO_APP_FEEDBACK = {
   slug: "information-appointment-feedback",
   title: "Information appointment feedback",

pages/get-involved/atun.js

@@ -9,6 +9,7 @@ import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
 
 import styles from "../../styles/atun.module.css";
+import { ATUN, FormModal } from "../../components/ms-form";
 
 export default function Atun() {
   return (
@@ -28,14 +29,15 @@ export default function Atun() {
             users at the heart of innovation.
           </p>
 
-          <div className={styles.cardButtonContainer}>
-            <Button
-              href="mailto:[email protected]?subject=Joining%20ATUN&body=Hi%20Will%0D%0A%0D%0AI%20would%20like%20to%20join%20the%20Accessible%20Tech%20User'%20Network.%0D%0A%0D%0AThanks"
-              className={styles.cardButton}
-            >
-              Join the Network
-            </Button>
-          </div>
+          <FormModal form={ATUN}>
+            {({ onClick }) => (
+              <div className={styles.cardButtonContainer}>
+                <Button onClick={onClick} className={styles.cardButton}>
+                  Join the Network
+                </Button>
+              </div>
+            )}
+          </FormModal>
         </VideoWithCardCover>
 
         <div className={styles.bottomContainer}>