Added contact form band

insectengine · Oct 17, 2018 · 06af384 · 06af384
1 parent 8b93f16
commit 06af384
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 7 deletions.
diff --git a/_includes/contact-form-band.html b/_includes/contact-form-band.html
@@ -0,0 +1,17 @@
+<div class="component-wrapper contact-form-band">
+  <div class="width-12-12">
+    <h3>Receive enterprise support</h3>
+    <form action="" class="grid-wrapper">
+      <input type="text" id="fname" name="firstname" placeholder="Name" class="width-6-12" required>
+      <input type="text" id="lname" name="lastname" placeholder="Last Name" class="width-6-12" required>
+      <input type="email" id="email" name="email" placeholder="Email" class="width-6-12" required>
+      <input type="tel" id="phone" name="telephone" placeholder="Telephone" class="width-6-12">
+      <input type="text" id="company" name="company" placeholder="Company" class="width-4-12">
+      <input type="text" id="country" name="country" placeholder="Country" class="width-4-12">
+      <input type="text" id="state" name="state" placeholder="State / Province" class="width-4-12">
+      <textarea id="subject" name="subject" placeholder="Aditional information or questions" class="width-12-12"></textarea>
+      <input type="submit" value="Submit" class="width-2-12">
+    </form>
+  </div>
+</div>
+</div>
diff --git a/_layouts/components.html b/_layouts/components.html
@@ -160,3 +160,8 @@ <h5>Short Quotes</h5>
 </div>
 {% include download-release-band.html %}
 
+<div class="grid-wrapper">
+  <div class="width-12-12 component-name"><h5>Contact Form Band</h5></div>
+</div>
+{% include contact-form-band.html %}
+
diff --git a/_sass/core/global.scss b/_sass/core/global.scss
@@ -140,11 +140,13 @@ a {
   }
 }
 
-a.button-cta {
+a.button-cta,
+button,
+input[type="submit"] {
   text-align: center;
-  color: $dark-blue;
-  background-color: $yellow;
-  border: 2px solid $yellow;
+  color: $white;
+  background-color: $blue;
+  border: 2px solid $blue;
   text-transform: uppercase;
   text-decoration: none;
   font-size: 1.5rem;
@@ -155,9 +157,9 @@ a.button-cta {
   line-height: 3.5;
   transition: background .2s ease-in 0s;
   &:hover, &:active, &:focus {
-    background-color: $dark-yellow;
-    border-color: $dark-yellow;
-    color: $yellow;
+    background-color: #011a21;
+    border-color: #011a21;
+    color: $white;
   }
 }
 
@@ -256,3 +258,24 @@ table {
     width: 100%;
   }
 }
+
+form {
+  input, textarea {
+    padding: .75rem;
+    font-size: 1rem;
+    border-radius: 10px;
+    border-color: $gray-1;
+    border-width: 1px;
+    border-style: solid;
+  }
+  textarea {
+    min-height: 13rem;
+  }
+  input[type="submit"] {
+    font-size: 1rem;
+    line-height: 1.5;
+    cursor: pointer;
+    border-radius: 0;
+    border: none;
+  }
+}
diff --git a/_sass/core/includes/contact-form-band.scss b/_sass/core/includes/contact-form-band.scss
@@ -0,0 +1,3 @@
+.contact-form-band {
+
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -24,6 +24,7 @@ $baseurl: "{{ site.baseurl }}";
 @import "core/includes/highlights-alternating-images-band";
 @import "core/includes/highlights-three-columns-band";
 @import "core/includes/download-release-band";
+@import "core/includes/contact-form-band";
 
 @import "project-colors";
 @import "components";