docs(website): contact form (#250)

* docs(website): added contact form * docs(website): plug Pardot + start form validation * docs(website): fixes + Confirmation message
algolia · Jun 22, 2016 · 04be137 · 04be137
1 parent d6a0973
commit 04be137
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 10 deletions.
diff --git a/docs/source/contact.html.haml b/docs/source/contact.html.haml
@@ -0,0 +1,88 @@
+---
+title: Algolia Places
+subtitle: Turn any <code>&lt;input&gt;</code> into an address autocomplete
+---
+
+%link{:rel =>"stylesheet", :type => "text/css",  :href => "//cloud.github.com/downloads/lafeber/world-flags-sprite/flags16.css"}
+
+%section.examples-section
+  .container
+    %div
+      %h2.title Contact Us
+      #form-message-success
+      %form#form-contact{:action => "https://goto.algolia.com/l/139121/2016-06-21/gbdyh", :method => "post", :onsubmit => "return validateForm()"}
+        .col-6
+          .form-group
+            .col-6
+              %label.control-label.required{:for => "first_name"} First Name
+              %input#first_name.form-control{:name => "first_name", :type => "text", :required => true}
+            .col-6
+              %label.control-label.required{:for => "last_name"} Last Name
+              %input#last_name.form-control{:name => "last_name", :type => "text", :required => true}
+          .form-group
+            %label.control-label.required{:for => "email"} Email
+            %input#email.form-control{:name => "email", :type => "email", :required => true}
+          .form-group
+            %label.control-label{:for => "company"} Company
+            %input#company.form-control{:name => "company", :type => "text"}
+          .form-group.f16
+            %label.control-label{:for => "country"} Country
+            %input#country{:name => "country", :type => "text"}
+        .col-6
+          .form-group
+            %label.control-label.required{:for => "sales_inquiry"} Please select the nature of your inquiry
+            %select#sales_inquiry.form-control{:name => "sales_inquiry", :type => "text"}
+              %option{:value => "demo"} Request a demo
+              %option{:value => "quote"} Request a quote
+              %option{:value => "plan"} Upgrade or change an existing plan
+              %option{:value => "support"} Contact support
+              %option{:value => "other"} Other questions
+          .form-group
+            %label.control-label{:for => "message"} Message
+            %textarea#message.form-control{:name => "message"}
+        .row
+          .form-group
+            %button#submit.btn.btn-cta{:type => "submit"} Submit
+
+
+:javascript
+
+  // Get params from the url
+  window.getUrlParameter = function(sParam) {
+    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
+    sURLVariables = sPageURL.split('&'),
+    sParameterName,
+    i;
+
+    for (i = 0; i < sURLVariables.length; i++) {
+      sParameterName = sURLVariables[i].split('=');
+
+      if (sParameterName[0] === sParam) {
+        return sParameterName[1] === undefined ? true : sParameterName[1];
+      }
+    }
+  };
+
+
+
+  (function() {
+
+    var formState = getUrlParameter('form');
+
+    if (formState === 'success'){
+      document.getElementById("form-message-success").innerHTML="Thank you for contacting us regarding Algolia Places, we'll be in touch shortly.<br><br>Return to <a href='https://community.algolia.com/places'>Places homepage</a> or <a href='https://www.algolia.com/product'>learn more about Algolia</a>";
+      document.getElementById("form-contact").className += " hide";
+    }
+
+
+    var placesAutocomplete = places({
+      container: document.querySelector('#country'),
+      type: 'country',
+      templates: {
+        suggestion: function(suggestion) {
+          return '<i class="flag ' + suggestion.countryCode + '"></i> ' +
+            suggestion.name;
+        }
+      }
+    });
+  })();
diff --git a/docs/source/partials/navigation.html.haml b/docs/source/partials/navigation.html.haml
@@ -29,6 +29,8 @@
           %a{href: "examples.html", title: "Examples", :data => {:path => "examples.html"}} Examples
         %li.ac-nav-menu-list-item{nav_active("support.html")}
           %a{href: "support.html", title: "Support", :data => {:path => "support.html"}} Support
+        %li.ac-nav-menu-list-item{nav_active("contact.html")}
+          %a{href: "contact.html", title: "Contact", :data => {:path => "contact.html"}} Contact
         %li.ac-nav-menu-list-icon
           %a.ac-icon{href: "https://github.com/algolia/places", title: "GitHub repository"}
             %span.ac-icon.ac-icon-github
diff --git a/docs/source/stylesheets/components/_inputs.scss b/docs/source/stylesheets/components/_inputs.scss
@@ -62,3 +62,73 @@ input {
     }
   }
 }
+
+#form-message-success{
+  font-size: 1.2em;
+  background-color: #D6EAC7;
+  padding: 30px;
+  text-align: center;
+  border-radius: 4px;
+}
+
+#form-contact {
+  width: 800px;
+  margin: 0 auto;
+
+  &.hide{
+    display: none;
+  }
+
+  .control-label{
+    font-size: 1em;
+    margin-bottom: 4px;
+
+    &.required::after{
+      display: inline-block;
+      content: '*';
+      margin-left: 4px;
+      color: #E7486B;
+      vertical-align: baseline;;
+    }
+  }
+
+  textarea{
+    height: 190px;
+    resize: none;
+  }
+
+  .btn-cta {
+    margin-top: 40px;
+    width: 150px;
+  }
+
+  .row{
+    width: 100%;
+  }
+
+  > .col-6{
+    width: 50%;
+    float: left;
+
+    &:first-child{
+      padding-right: 40px;
+    }
+  }
+
+  .form-group{
+    &:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+    .col-6{
+      width: 50%;
+      float: left;
+
+      &:first-child{
+        padding-right: 8px;
+      }
+    }
+  }
+
+}
diff --git a/docs/source/stylesheets/vendors/_base.scss b/docs/source/stylesheets/vendors/_base.scss
@@ -9,10 +9,6 @@
   font-family: "Raleway", Helvetica Neue, helvetica;
 }
 
-hr {
-  margin: 0;
-}
-
 figure {
   figcaption {
     text-indent: -9999px;

diff --git a/docs/source/stylesheets/vendors/_helpers.scss b/docs/source/stylesheets/vendors/_helpers.scss
@@ -15,7 +15,6 @@ $sizes: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
   overflow: hidden;
 }
 
-
 .center-text {
   text-align: center;
 }
@@ -32,17 +31,17 @@ hr {
   border: none;
   float: left;
   clear: both;
+  width: 100%;
+  height: 1px;
+  background: #e5e5e5;
+  margin: 0;
+
   &:before,
   &:after {
     content: '';
     display: table;
     clear: both;
-
   }
-
-  width: 100%;
-  height: 1px;
-  background: #e5e5e5
 }
 
 .pipe {