Add CSS classes to public forms

Author: stefan-burke

.gitignore

@@ -77,3 +77,5 @@ result-*
 # Ignore automatically generated direnv output
 .direnv
 .gems
+
+**/.claude/settings.local.json

app/views/public_forms/show.html.erb

@@ -64,64 +64,64 @@
     <% end %>
   </header>
 
-<%= form_with(model: @submission, url: public_form_path(@form.code, @device.id), method: :post, scope: :submission) do |f| %>
-  <% if @submission.errors.any? %>
-    <div>
-      <h2><%= pluralize(@submission.errors.count, "error") %> prohibited this submission from being saved:</h2>
-      <ul>
-        <% @submission.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
+  <%= form_with(model: @submission, url: public_form_path(@form.code, @device.id), method: :post, scope: :submission) do |f| %>
+    <% if @submission.errors.any? %>
+      <div class="errors">
+        <h2><%= pluralize(@submission.errors.count, "error") %> prohibited this submission from being saved:</h2>
+        <ul>
+          <% @submission.errors.each do |error| %>
+            <li><%= error.full_message %></li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
 
-  <% if @form.enable_name %>
-    <div>
-      <%= f.label :name, @form.name_field_label %>
-      <%= f.text_field :name, required: @form.enable_name, placeholder: @form.name_field_placeholder %>
-    </div>
-  <% end %>
+    <% if @form.enable_name %>
+      <div class="name">
+        <%= f.label :name, @form.name_field_label %>
+        <%= f.text_field :name, required: @form.enable_name, placeholder: @form.name_field_placeholder %>
+      </div>
+    <% end %>
 
-  <% if @form.enable_email_address %>
-    <div>
-      <%= f.label :email_address, @form.email_field_label %>
-      <%= f.email_field :email_address, required: @form.enable_email_address, placeholder: @form.email_field_placeholder %>
-    </div>
-  <% end %>
+    <% if @form.enable_email_address %>
+      <div class="email-address">
+        <%= f.label :email_address, @form.email_field_label %>
+        <%= f.email_field :email_address, required: @form.enable_email_address, placeholder: @form.email_field_placeholder %>
+      </div>
+    <% end %>
 
-  <% if @form.enable_phone %>
-    <div>
-      <%= f.label :phone, @form.phone_field_label %>
-      <%= f.telephone_field :phone, required: @form.enable_phone, placeholder: @form.phone_field_placeholder %>
-    </div>
-  <% end %>
+    <% if @form.enable_phone %>
+      <div class="phone">
+        <%= f.label :phone, @form.phone_field_label %>
+        <%= f.telephone_field :phone, required: @form.enable_phone, placeholder: @form.phone_field_placeholder %>
+      </div>
+    <% end %>
 
-  <% if @form.enable_address %>
-    <div>
-      <%= f.label :address, @form.address_field_label %>
-      <%= f.text_area :address, rows: 3, required: @form.enable_address, placeholder: @form.address_field_placeholder %>
-    </div>
-  <% end %>
+    <% if @form.enable_address %>
+      <div class="address">
+        <%= f.label :address, @form.address_field_label %>
+        <%= f.text_area :address, rows: 3, required: @form.enable_address, placeholder: @form.address_field_placeholder %>
+      </div>
+    <% end %>
 
-  <% if @form.enable_postcode %>
-    <div>
-      <%= f.label :postcode, @form.postcode_field_label %>
-      <%= f.text_field :postcode, required: @form.enable_postcode, placeholder: @form.postcode_field_placeholder %>
-    </div>
-  <% end %>
+    <% if @form.enable_postcode %>
+      <div class="postcode">
+        <%= f.label :postcode, @form.postcode_field_label %>
+        <%= f.text_field :postcode, required: @form.enable_postcode, placeholder: @form.postcode_field_placeholder %>
+      </div>
+    <% end %>
 
-  <% if @form.terms_and_conditions.present? %>
-    <div>
-      <h3>Terms & Conditions</h3>
-      <%= markdown(@form.terms_and_conditions) %>
+    <% if @form.terms_and_conditions.present? %>
+      <div class="terms-and-conditions">
+        <h3>Terms & Conditions</h3>
+        <%= markdown(@form.terms_and_conditions) %>
+      </div>
+    <% end %>
+
+    <div class="submit-button">
+      <%= f.submit @form.button_text %>
     </div>
   <% end %>
-
-  <div>
-    <%= f.submit @form.button_text %>
-  </div>
-<% end %>
 </div>
 
 <script>