[gh7] Guest Application Form

nextjs/src/modules/guestApplication/GuestApplicationPage.js

@@ -1,29 +1,43 @@
+import { useEffect } from 'react';
 import styled from 'styled-components';
 import { useForm } from 'react-hook-form';
+import kwesforms from 'kwesforms';
 
 // components
 import { Button } from 'modules/shared/form/Button';
 
 // styles
-import { MixinForm, MixinLabel, MixinTextField, MixinTextarea, MixinSelect } from 'styles/Form';
+import { MixinFileField, MixinForm, MixinLabel, MixinTextField, MixinTextarea, MixinSelect } from 'styles/Form';
+import { MixinHeadingWithHorizontalLines } from 'styles/Typography';
 
 /** -------------------------------------------------
 * COMPONENT
 ---------------------------------------------------- */
 const GuestApplicationPage = () => {
   const { register, handleSubmit, watch, errors } = useForm();
-  const onSubmit = (data) => alert(JSON.stringify(data));
+  const onSubmit = (data) => { };
+
+  useEffect(() => {
+    kwesforms.init();
+  }, []);
 
   return (
     <StyledGuestApplicationPage>
-      Be Our Guest
-      <form onSubmit={handleSubmit(onSubmit)} method="post">
+      <div className="page-title__wrapper">
+        <h1>Be Our Guest</h1>
+      </div>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        method="post"
+        className="kwes-form"
+        action="https://kwes.io/api/foreign/forms/gTosjfBjtsx5Srf3S0IR"
+      >
         <div className="half">
-          <input type="text" name="firstName" id="firstName" ref={register} placeholder=" " />
+          <input type="text" name="firstName" id="firstName" ref={register} placeholder=" " rules="required" />
           <label htmlFor="firstName">First Name*</label>
         </div>
         <div className="half">
-          <input type="text" name="lastName" id="lastName" ref={register} placeholder=" " />
+          <input type="text" name="lastName" id="lastName" ref={register} placeholder=" " rules="required" />
           <label htmlFor="lastName">Last Name*</label>
         </div>
 
@@ -33,7 +47,7 @@ const GuestApplicationPage = () => {
         </div>
 
         <div className="full">
-          <input type="email" name="email" id="email" ref={register} placeholder=" " />
+          <input type="email" name="email" id="email" ref={register} placeholder=" " rules="required" />
           <label htmlFor="email">Email Address*</label>
         </div>
 
@@ -58,38 +72,35 @@ const GuestApplicationPage = () => {
         </div>
 
         <div className="full">
-          <input type="file" id="file" ref={register} />
-          <label htmlFor="profilePicture">Profile Picture</label>
+          <input type="file" id="file" name="profillePicture" ref={register} placeholder=" " />
+          <label htmlFor="profilePicture">
+            Profile Picture
+            <span className="description">Click to upload.</span>
+          </label>
         </div>
 
         <div className="full">
-          <textarea name="bio" id="bio" ref={register} />
+          <textarea name="bio" id="bio" ref={register} placeholder=" " rules="required" />
           <label htmlFor="bio">Bio</label>
         </div>
 
         <div className="full">
-          <input type="text" name="podcastTitle" id="podcastTitle" ref={register} placeholder="Best Guess?" />
+          <input type="text" name="podcastTitle" id="podcastTitle" ref={register} placeholder=" " />
           <label htmlFor="podcastTitle">Podcast Title</label>
         </div>
 
         <div className="full">
-          <input
-            type="text"
-            name="podcastTopic"
-            id="podcastTopic"
-            ref={register}
-            placeholder="What would you like to talk about?"
-          />
+          <input type="text" name="podcastTopic" id="podcastTopic" ref={register} placeholder=" " rules="required" />
           <label htmlFor="podcastTopic">Podcast Topic</label>
         </div>
 
         <div className="full">
-          <textarea name="shoutouts" id="shoutouts" ref={register} />
+          <textarea name="shoutouts" id="shoutouts" ref={register} placeholder=" " />
           <label htmlFor="shoutouts">Shoutouts</label>
         </div>
 
         <div className="full">
-          <textarea name="linksToShare" id="linksToShare" ref={register} />
+          <textarea name="linksToShare" id="linksToShare" ref={register} placeholder=" " />
           <label htmlFor="linksToShare">Links to Share</label>
         </div>
 
@@ -105,6 +116,7 @@ const GuestApplicationPage = () => {
 * STYLES
 ---------------------------------------------------- */
 const StyledGuestApplicationPage = styled.section`
+  ${MixinHeadingWithHorizontalLines}
   ${MixinForm}
 
   label {
@@ -123,6 +135,10 @@ const StyledGuestApplicationPage = styled.section`
   select {
     ${MixinSelect}
   }
+
+  input[type='file'] {
+    ${MixinFileField}
+  }
 `;
 
 export { GuestApplicationPage };

nextjs/src/styles/Form.js

@@ -142,6 +142,18 @@ const MixinLabel = css`
   @media (${Breakpoints.small}) {
     font-size: 1.8rem;
   }
+
+  .description {
+    font-family: ${(props) => props.theme.sansSerif};
+    color: ${(props) => props.theme.white};
+    opacity: 0.5;
+    letter-spacing: 0;
+    font-size: 1.8rem;
+    text-transform: none;
+    position: relative;
+    top: -1px;
+    margin-left: 10px;
+  }
 `;
 
 const MixinButtonWithArrow = css`
@@ -163,4 +175,24 @@ const MixinButtonWithArrow = css`
   }
 `;
 
-export { MixinButtonWithArrow, MixinForm, MixinLabel, MixinSelect, MixinTextarea, MixinTextField };
+const MixinFileField = css`
+  &::-webkit-file-upload-button {
+    visibility: hidden;
+  }
+  border: 2px dashed ${(props) => props.theme.white};
+  padding: 10px 15px;
+  cursor: pointer;
+  box-sizing: border-box;
+  width: 100%;
+  height: 55px;
+  margin: 30px 0 0 0;
+
+  & + label {
+    display: flex;
+    align-items: center;
+    left: 15px;
+    top: 48px;
+  }
+`;
+
+export { MixinButtonWithArrow, MixinFileField, MixinForm, MixinLabel, MixinSelect, MixinTextarea, MixinTextField };