add optional comment field to sign form

site/config.toml

@@ -79,8 +79,9 @@ DefaultContentLanguage = "en"
   description = "More than XY organisations support this call for action by signing our [Open Letter](/openletter). Help us to make an impact by signing it, too! We will hand over all signatures to representatives all over Europe that are debating software freedom in public administration."
   formName = "Name (required)"
   formEmail = "Email (required)"
-  formCountry = "Country"
+  formCountry = "Your Country"
   formZip = "ZIP Code"
+  formComment = "Your comment (max. 140 characters)"
   formPermissionPriv = "I have read and accepted the [privacy statement](/privacy)"
   formPermissionNews = "I want to stay informed about the future of this campaign"
   formPermissionPub = "I want my signature to appear in the [list of signatures](/openletter#signatures)"

site/layouts/partials/action.html

@@ -52,6 +52,9 @@
                   <label class="sign-input form-zp">
                     <input name="zip" placeholder="{{ .Site.Params.action.formZip }}" type="text" />
                   </label>
+                  <label class="sign-input form-co">
+                    <input name="comment" placeholder="{{ .Site.Params.action.formComment }}" type="text" maxlength="140" />
+                  </label>
                   <p class="form-pe">
                     <label class="form-pe">
                       <input name="permissionPriv" value="yes" type="checkbox" required /> {{ .Site.Params.action.formPermissionPriv | markdownify }}

site/static/css/custom.css

@@ -101,6 +101,7 @@
 }
 #action form label {
   font-weight: 400;
+  margin: 5px 3px;
 }
 .sign-input {
   position: relative;
@@ -119,6 +120,9 @@
   width: 270px;
   height: 31px;
 }
+.sign-input.form-co input {
+  width: 554px;
+}
 .sign-input select {
   background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
   border-radius: 7px;
@@ -140,6 +144,10 @@
   content: "\f08d";
   padding-left: 3px;
 }
+.form-co:before {
+  content: "\f27a";
+  padding-left: 3px;
+}
 p.form-pe {
   text-align: left;
   max-width: 530px; /* to not let the checkboxed go far more left than the input boxes above */