Form styling improved.

assets/css/pages/form.scss

@@ -7,6 +7,26 @@ form {
   display: flex;
 }
 
+.text-input {
+  display: flex;
+  align-items: center;
+
+  label {
+    width: 29%;
+    text-align: left;
+  }
+
+  input {
+    width: 71%;
+  }
+
+  @media screen and (max-width: 600px) {
+    label {
+      width: 47%;
+    }
+  }
+}
+
 input {
   margin-bottom: 10px;
 }
@@ -16,3 +36,8 @@ input {
   justify-content: center;
   padding-bottom: 50px;
 }
+
+.submit-button {
+  padding-top: 31px;
+  padding-bottom: 31px;
+}

lib/runosaari_web/templates/visitor/form.html.eex

@@ -5,51 +5,50 @@
     </div>
   <% end %>
 
-  <%= label form, :fname, "Etunimi" %>
-  <%= text_input form, :fname %>
-  <%= error_tag form, :fname %>
+  <div class="text-input">
+    <%= label form, :fname, "Etunimi:" %>
+    <%= text_input form, :fname %>
+  </div>
 
-  <%= label form, :lname, "Sukunimi" %>
-  <%= text_input form, :lname %>
-  <%= error_tag form, :lname %>
+  <div class="text-input">
+    <%= label form, :lname, "Sukunimi:" %>
+    <%= text_input form, :lname %>
+  </div>
 
-  <%= label form, :email, "Sähköposti" %>
-  <%= email_input form, :email %>
-  <%= error_tag form, :email %>
+  <div class="text-input">
+    <%= label form, :email, "Sähköposti:" %>
+    <%= email_input form, :email %>
+  </div>
 
-  <%= label form, :tel, "Puhelinumero" %>
-  <%= text_input form, :tel %>
-  <%= error_tag form, :tel %>
+  <div class="text-input">
+    <%= label form, :tel, "Puhelinumero:" %>
+    <%= text_input form, :tel %>
+  </div>
 
   <h2>Ilmoita alustava kiinnostuksesi tässä</h2>
 
   <div class="checkbox-container">
     <%= checkbox form, :date1 %>
     <%= label form, :date1, "Torstai 22.7" %>
-    <%= error_tag form, :date1 %>
   </div>
   <div class="checkbox-container">
     <%= checkbox form, :date2 %>
     <%= label form, :date2, "Perjantai 23.7." %>
-    <%= error_tag form, :date2 %>
   </div>
   <div class="checkbox-container">
     <%= checkbox form, :date3 %>
     <%= label form, :date3, "Lauantai 24.7." %>
-    <%= error_tag form, :date3 %>
   </div>
   <div class="checkbox-container">
     <%= checkbox form, :bus %>
     <%= label form, :bus, "Olen kiinnostunut bussikuljetuksesta" %>
-    <%= error_tag form, :bus %>
   </div>
   <div class="checkbox-container">
     <%= checkbox form, :accom %>
     <%= label form, :accom, "Olen kiinnostunut majoituksesta" %>
-    <%= error_tag form, :accom %>
   </div>
 
-  <div>
+  <div class="submit-button">
     <%= submit "Lähetä" %>
   </div>
 <% end %>