create pretty HTML form in a new section

config.toml

@@ -74,6 +74,11 @@ DefaultContentLanguage = "en"
   category = "Category"
   buttonText = "Close"
 
+# Sign section
+[params.sign]
+  headline = "Sign our open letter!"
+  description = "Show that you want to free publicly financed code by signing our open letter."
+
 # Spread the word section
 [params.spread]
   headline = "Spread the word!"

layouts/index.html

@@ -25,6 +25,10 @@
             {{ partial "resources.html" . }}
         {{ end }}
 
+        {{ if .Site.Params.sign }}
+            {{ partial "sign.html" . }}
+        {{ end }}
+
         {{ if .Site.Params.spread }}
             {{ partial "spread.html" . }}
         {{ end }}

layouts/partials/sign.html

@@ -0,0 +1,35 @@
+{{ "<!-- SIGN -->" | safeHTML }}
+<section class="bg-primary" id="sign">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-lg-offset-2 text-center">
+                <h2 class="section-heading">{{ .Site.Params.sign.headline }}</h2>
+                <hr class="light">
+                <p class="text-faded">{{ .Site.Params.sign.description | markdownify }}</p>
+                
+                <form action="/cgi-bin/sign.php" method="get">
+                  <label class="sign-input form-na">
+                    <input name="name" placeholder="Full name / nickname" type="text" required />
+                  </label>
+                  <label class="sign-input form-em">
+                    <input name="email" placeholder="Email" type="email" required />
+                  </label>
+                  <label class="sign-input form-cn">
+                    <input name="country" placeholder="Country" type="text" />
+                  </label>
+                  <label class="sign-input form-zp">
+                    <input name="zip" placeholder="Zip Code" type="text" />
+                  </label>
+                  <br />
+                  <label class="form-pe">
+                    <input name="permission" value="yes" type="checkbox" required /> I have read the privacy statement and would like to stay informed about the future of this campaign
+                  </label>
+                  
+                  <input name="url" value="I am a spam robot" style="display:none;" type="submit" />
+                  <br />
+                  <button name="action" value="sign" type="submit">Sign</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>

static/cgi-bin/sign.php

@@ -0,0 +1,3 @@
+<?php
+
+?>

static/css/custom.css

@@ -31,6 +31,45 @@
   font-size: 0.8em;
 }
 
+/* SIGN FORM */
+#sign form {
+  color: #333;
+  font-size: 18px;
+}
+#sign form label {
+  font-weight: 400;
+}
+.sign-input {
+  position: relative;
+}
+.sign-input:before {
+  font-family: "FontAwesome";
+  font-size: 20px;
+  position: absolute;
+  left: 4px;
+  top: 2px;
+}
+.sign-input input {
+  text-indent: 24px;
+}
+.form-na:before {
+  content: "\f2c3";
+}
+.form-em:before {
+  content: "\f003";
+}
+.form-cn:before {
+  content: "\f041";
+  padding-left: 4px;
+}
+.form-zp:before {
+  content: "\f08d";
+  padding-left: 3px;
+}
+.form-pe {
+  max-width: 600px;
+}
+
 /* SHARE BUTTONS IN "SPREAD THE WORD" SECTION */
 .share-buttons a {
   background-position: left 5px center;