diff --git a/src/components/index.js b/src/components/index.js
index 6d64cc4..cbba145 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -11,6 +11,7 @@ export { default as Heading } from "./heading";
export { default as Icon } from "./icon";
export { default as IconWithContent } from "./icon-with-content";
export { default as InputText } from "./input-text";
+export { default as Label } from "./label";
export { default as Link } from "./link";
export { default as Map } from "./map";
export { default as MenuButton } from "./menu-button";
@@ -19,6 +20,7 @@ export { default as NavLink } from "./nav-link";
export { default as Nav } from "./nav";
export { default as ReviewSummary } from "./review-summary";
export { default as Section } from "./section";
+export { default as Select } from './select';
export { default as Table } from "./table";
export { default as Text } from "./text";
export { default as Tile } from "./tile";
diff --git a/src/components/input-text.js b/src/components/input-text.js
index 3cc8ebe..82144be 100644
--- a/src/components/input-text.js
+++ b/src/components/input-text.js
@@ -1,16 +1,6 @@
import React from "react";
import styled from "@emotion/styled";
-const Container = styled.div`
- max-width: 320px;
-`;
-
-const Label = styled.label`
- display: block;
- margin-bottom: var(--spacing-y-xs);
- font-size: var(--font-size-sm);
-`;
-
const Input = styled.input`
width: 100%;
margin-bottom: var(--spacing-y-sm);
@@ -21,23 +11,19 @@ const Input = styled.input`
export default function InputText({
id,
name,
- label,
value,
onChange,
required,
textArea
}) {
return (
-
-
-
-
+
);
}
diff --git a/src/components/label.js b/src/components/label.js
new file mode 100644
index 0000000..cee46c2
--- /dev/null
+++ b/src/components/label.js
@@ -0,0 +1,12 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Container = styled.label`
+ display: block;
+ margin-bottom: var(--spacing-y-xs);
+ font-size: var(--font-size-sm);
+`;
+
+export default function Label({ id, children }) {
+ return {children};
+}
diff --git a/src/components/select.js b/src/components/select.js
new file mode 100644
index 0000000..c9ff96a
--- /dev/null
+++ b/src/components/select.js
@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Select = styled.select`
+ width: 100%;
+ margin-bottom: var(--spacing-y-sm);
+ padding: var(--spacing-y-xs) var(--spacing-x-sm);
+ background-color: var(--color-white);
+ border: 1px solid var(--color-dark);
+`;
+
+export default function InputSelect({ id, name, value, options = [] }) {
+ return (
+
+ );
+}
diff --git a/src/pages/contact.js b/src/pages/contact.js
index b8a6737..863ddb2 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -10,9 +10,11 @@ import {
Icon,
IconWithContent,
InputText,
+ Label,
Link,
Map,
Section,
+ Select,
Text
} from "../components";
import CheckCircle from "../icons/check-circle.svg";
@@ -35,7 +37,11 @@ export default function Index({ data }) {
name: e.target.name.value,
email: e.target.email.value,
telephone: e.target.telephone.value,
- message: e.target.message.value
+ start: e.target.start.value,
+ stage: e.target.stage.value,
+ status: e.target.status.value,
+ message: e.target.message.value,
+ file: e.target.file.value
});
fetch("/contact", {
method: "POST",
@@ -170,19 +176,64 @@ export default function Index({ data }) {
data-netlify-honeypot="bot-field"
>
-
-
- Name
+
+
+
+
+
+
+
-
+ What stage of planning are you at?
+
+
+
+
+
+
+
+
>