Merge 035b4e4 into b794480

website/content/en/_index.html

@@ -184,7 +184,7 @@ <h2 class="mt-4">try</h2>
 <div class="container text-center">
 	<h2>Usage map:</h2>
 	<p class="mt-5">Alf.io doesn't send <b>any</b> usage statistics and/or metrics to us. Because we respect your privacy.<br> These are the organizers we know about, and we'd love to know <b>where</b> are you using it, so that we can show it on the map below.</p>
-	<a class="btn btn-outline-success btn-lg mt-4 mb-5" href="https://alfio-event.typeform.com/to/frPgBy" target="_blank">Tell us about you!</a>
+	<a class="btn btn-outline-success btn-lg mt-4 mb-5" href="usage-form/">Tell us about you!</a>
 	<div id="regions_container" class="d-md-block d-none" style="width:100%">
 		<div id="regions_div" class="w-100">
 

website/content/en/usage-form/_index.html

@@ -0,0 +1,61 @@
+---
+title: "Tell us about you!"
+description: >
+  Alf.io usage form.
+weight: 5
+type: contact-us
+menu:
+  main:
+    weight: 50
+---
+
+<p class="lead text-center">
+    We don't track usage in any way, because we respect your privacy. Therefore we ask you to tell us a bit about your story. We'd love to hear from you!
+</p>
+
+<form name="contact" method="POST" data-netlify="true" action="/usage-form/thank-you">
+    <div class="form-group">
+        <label class="font-weight-bold" for="country" required="true">Your Country <sup>*</sup></label>
+        <input class="form-control" name="country" id="country">
+    </div>
+    <div class="form-group mt-3">
+        <label class="font-weight-bold" for="story">Please share your story with us. What do you do? How is alf.io helping you? <sup>*</sup></label>
+        <textarea class="form-control" name="story" id="story" required="true"></textarea>
+    </div>
+
+    <hr class="mt-5 mb-3">
+
+    <h3>Optional data</h3>
+
+    <div class="form-group mt-3">
+        <label for="events">How many events do you organize per year?</label>
+        <select class="form-control" name="eventsPerYear" id="events">
+            <option value="" selected>I prefer not to share this information</option>
+            <option value="1-5">1 to 5</option>
+            <option value="5-10">5 to 10</option>
+            <option value="10+">more than 10</option>
+        </select>
+    </div>
+    <div class="form-group mt-3">
+        <label for="fullName">Your Name</label>
+        <input class="form-control" name="fullName" id="fullName">
+    </div>
+    <div class="form-group mt-3">
+        <label for="twitterHandle">Your Twitter Handle</label>
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text" id="basic-addon1">@</span>
+            </div>
+            <input type="text" name="twitterHandle" id="twitterHandle" class="form-control" placeholder="twitterHandle" aria-label="Twitter Handle" aria-describedby="basic-addon1">
+        </div>
+        <small id="passwordHelpBlock" class="form-text text-muted">
+            If we like your story, we might want to contact you and ask you a couple of questions for a social media post.
+            If you don't want to hear from us, please leave this field empty
+        </small>
+    </div>
+    <div class="row mt-5 mb-5">
+        <div class="col-12 col-lg-4 offset-lg-4">
+            <button class="btn btn-success btn-lg btn-block">Send</button>
+        </div>
+    </div>
+</form>

website/content/en/usage-form/thank-you.md

@@ -0,0 +1,10 @@
+---
+title: "Deployment"
+linkTitle: "Deployment"
+weight: 2
+description: >
+  How to deploy alf.io on the supported cloud providers
+type: contact-us
+---
+
+![check-in in action](/img/usage-form/check-in.jpg)

website/layouts/contact-us/list.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+
+<a class="td-offset-anchor"></a>
+<section class="row td-box td-box--1 position-relative td-box--gradient td-box--height-auto">
+	<div class="container text-center td-arrow-down">
+		<span class="h4 mb-0">
+            <h1>Thank you for using {{ .Site.Title }}!</h1>
+
+            <p class="lead mt-5">And thank you for telling us where and how you are using it!</p>
+        </span>
+	</div>
+</section>
+
+<div class="row mt-5">
+    <div class="col-12 col-lg-6 offset-lg-3">
+        {{ .Content }}
+    </div>
+</div>
+
+{{ end }}

website/layouts/contact-us/single.html

@@ -0,0 +1,19 @@
+{{ define "main" }}
+
+<a class="td-offset-anchor"></a>
+<section class="row td-box td-box--1 position-relative td-box--gradient td-box--height-auto">
+	<div class="container text-center td-arrow-down">
+		<span class="h4 mb-0">
+            <h1>Thank you!</h1>
+            <p class="lead mt-5">Thank you for sharing your story!</p>
+        </span>
+	</div>
+</section>
+
+<div class="d-flex justify-content-center mt-5">
+    {{ .Content }}
+</div>
+
+<h3 class="mt-5 mb-5 text-center">All the best for your event!</h3>
+
+{{ end }}