Add google forms react component

components/GoogleForm/GoogleForm.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import styles from "./GoogleForm.module.css";
+
+class GoogleForm extends Component {
+    render() {
+        return (
+            <div className={styles.form}>
+                <h1 className={styles.header}>{this.props.header}</h1>
+                <p className={styles.blurb}>{this.props.blurb}</p>
+                <iframe src={this.props.url} width={this.props.width} height={this.props.height} frameborder="0" marginwidth="0">Loading...</iframe>
+                {/* <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdqd_mLfxBMJ6-rtzNddxhrL4W0Hoa5_ZDaREMyFwmo8C9lKg/viewform?embedded=true" width="500" height="767" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe> */}
+            </div>
+        );
+    }
+}
+
+export default GoogleForm;

components/GoogleForm/GoogleForm.module.css

@@ -0,0 +1,26 @@
+.header {
+    margin-top: 20px;
+}
+
+.blurb {
+    margin-bottom: 20px;
+}
+
+.form {
+    margin-top: 20px;
+    padding-top: 20px;
+    background-color: #f6f6f6;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.form > * {
+    margin: auto;
+}
+
+/* Not sure how to make this work with modules, but not sure we even need to add further styling */
+.freebirdFormviewerViewFormCard {
+    width: 100px;
+}

components/Layout/Layout.module.css

@@ -29,11 +29,12 @@
 		align-items: center;
 		justify-content: center;
 		background-color: #e2e1d2;
-		height: 50vh;
+		min-height: 50vh;
 }
 
 .content {
-		padding: 20px;
+    margin: 20px;
+    padding: 20px;
 		width: 50vw;
 		background-color: #FFFFFF;
 		border-radius: 5px;

pages/advocacy-maps.js

@@ -1,5 +1,6 @@
 import dynamic from "next/dynamic";
 import { Layout } from "../components";
+import GoogleForm from "../components/GoogleForm/GoogleForm";
 
 const MapWithNoSSR = dynamic(() => import("../components/Map/Map.jsx"), {
   ssr: false,
@@ -9,6 +10,12 @@ function AdvocacyMap() {
   return (
     <Layout pageTitle="Advocacy Maps">
       <MapWithNoSSR />
+      <GoogleForm 
+        header="Sample Form"
+        blurb="sample blurb"
+        url={"https://docs.google.com/forms/d/e/1FAIpQLSdqd_mLfxBMJ6-rtzNddxhrL4W0Hoa5_ZDaREMyFwmo8C9lKg/viewform?embedded=true"} 
+        width="500px" 
+        height="500px"/>
     </Layout>
   );
 }