Make header image clickable

Author: stefan-burke

app/views/public_forms/show.html.erb

@@ -54,7 +54,7 @@
 <div class="form-content" id="form-content">
   <header>
     <% if @form.header_image.attached? %>
-      <%= image_tag url_for(@form.header_image) %>
+      <%= image_tag url_for(@form.header_image), id: "header-image", style: "cursor: pointer;" %>
     <% end %>
 
     <% if @form.header_text.present? %>
@@ -128,6 +128,8 @@
   document.addEventListener('DOMContentLoaded', function() {
     const introImageContainer = document.getElementById('intro-image-container');
     const formContent = document.getElementById('form-content');
+    const headerImage = document.getElementById('header-image');
+    const form = document.querySelector('form');
 
     if (introImageContainer) {
       introImageContainer.addEventListener('click', function() {
@@ -150,5 +152,11 @@
         }, 300);
       });
     }
+
+    if (headerImage && form) {
+      headerImage.addEventListener('click', function() {
+        form.submit();
+      });
+    }
   });
 </script>