diff --git a/docs/source/contact.html.haml b/docs/source/contact.html.haml
new file mode 100644
index 000000000..4be9cd401
--- /dev/null
+++ b/docs/source/contact.html.haml
@@ -0,0 +1,88 @@
+---
+title: Algolia Places
+subtitle: Turn any <input> 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.
Return to Places homepage or learn more about Algolia";
+ document.getElementById("form-contact").className += " hide";
+ }
+
+
+ var placesAutocomplete = places({
+ container: document.querySelector('#country'),
+ type: 'country',
+ templates: {
+ suggestion: function(suggestion) {
+ return ' ' +
+ suggestion.name;
+ }
+ }
+ });
+ })();
diff --git a/docs/source/partials/navigation.html.haml b/docs/source/partials/navigation.html.haml
index 6ea242e06..78fe0b91f 100644
--- 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
index ee4b1046c..06d1ac8c0 100644
--- 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
index 5582db42f..7c70e0dc9 100644
--- 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
index eb4b0c0c6..257499879 100644
--- 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 {