1 files changed, 121 insertions, 37 deletions
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
index a2ddfad..ee6c898 100644
--- a/iridescence/src/components/checkout/CheckoutForm.vue
+++ b/iridescence/src/components/checkout/CheckoutForm.vue
@@ -1,48 +1,132 @@
 <template>
   <div class="container">
-    <section class="section">
-      <h1 class="title">Customer Info</h1>
-      <hr />
+    <form>
+      <section class="section">
+        <h1 class="title">Customer Info</h1>
+        <hr />
 
-      <div class="field is-horizontal">
-        <div class="field-label">
-          <label class="label">Name</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <p class="control is-expanded ">
-              <input class="input" type="text" placeholder="given name" />
-            </p>
+        <div class="columns">
+          <div class="column">
+            <div class="field">
+              <label for="firstName" class="label">First Name</label>
+
+              <div class="control">
+                <input id="firstName" class="input" type="text" required />
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">Last Name</label>
+
+              <div class="control">
+                <input class="input" type="text" required />
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Email Address</label>
+
+              <div class="control">
+                <input class="input" type="email" required />
+              </div>
+              <p class="help">Example: you@example.com</p>
+            </div>
+
+            <div class="field">
+              <label class="label">Phone Number</label>
+              <div class="control">
+                <input class="input" type="tel" pattern="[0-9]{10}" required />
+              </div>
+              <p class="help">Example: 7571234567</p>
+            </div>
+
+            <label class="checkbox">
+              <input type="checkbox" />
+              May we text order updates and questions to this number?
+            </label>
           </div>
-          <div class="field">
-            <p class="control is-expanded">
-              <input class="input" type="text" placeholder="surname" />
-            </p>
+          <div class="column">
+            <div class="field">
+              <label class="label">Country</label>
+
+              <div class="control">
+                <div class="select">
+                  <select required>
+                    <option selected>United States</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Address</label>
+
+              <div class="control">
+                <input class="input" type="text" required />
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">Address 2 (Optional)</label>
+
+              <div class="control">
+                <input class="input" type="text" />
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">City</label>
+              <div class="control">
+                <input class="input" type="text" required />
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">State</label>
+
+              <div class="select">
+                <select required>
+                  <option selected>VA</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="field">
+              <label class="label">Zip Code</label>
+
+              <input class="input" type="text" pattern="[0-9]{5}" required />
+            </div>
           </div>
         </div>
-      </div>
+      </section>
 
-      <div class="field is-horizontal">
-        <div class="field-label">
-          <label class="label">E-mail Address</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <p class="control is-expanded">
-              <input class="input" type="email" placeholder="email address" />
-            </p>
-          </div>
+      <section class="section">
+        <h1 class="title">Payment</h1>
+        <hr />
+        payment option (mailed check, paypal, cash or check on delivery)
+      </section>
+
+      <section class="section">
+        <h1 class="title">Delivery Options</h1>
+        <hr />
+        <div class="control">
+          <label class="radio">
+            <input type="radio" name="delivery" />
+            Pick up at studio
+          </label>
+          <label class="radio">
+            <input type="radio" name="delivery" />
+            Pick up at Simply Vintage Art Gallery
+          </label>
+          <label class="radio">
+            <input type="radio" name="delivery" />
+            Delivery
+          </label>
         </div>
-      </div>
-    </section>
-    <section class="section">
-      <h1 class="title">Payment</h1>
-      <hr />
-    </section>
-    <section class="section">
-      <h1 class="title">Delivery</h1>
-      <hr />
-    </section>
+      </section>
+
+      <section class="section">
+        <button class="button is-primary">Continue to Confirmation</button>
+      </section>
+    </form>
   </div>
 </template>