From ce7fd6173f44eb08907a3b60ecd1535d8073acc1 Mon Sep 17 00:00:00 2001
From: Michael Bumann <hello@michaelbumann.com>
Date: Sun, 17 May 2020 15:12:09 +0200
Subject: [PATCH] Embed example form to test on the form page if it has no
 submissions

Like this people could instantly test the form.
---
 app/views/forms/_form_example.html.erb |  4 ---
 app/views/forms/form.html.erb          | 40 +++++++++++++++++++-------
 app/views/forms/show.html.erb          |  5 ++++
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/app/views/forms/_form_example.html.erb b/app/views/forms/_form_example.html.erb
index eb0b51f..d1793b6 100644
--- a/app/views/forms/_form_example.html.erb
+++ b/app/views/forms/_form_example.html.erb
@@ -11,10 +11,6 @@
       <label for="Name">Name</label>
       <input type="text" name="Name" required>
     </p>
-    <p>
-      <label for="Email">Email</label>
-      <input type="email" name="Email" required>
-    </p>
   <% end %>
   ...
   <input type="submit" value="Submit">
diff --git a/app/views/forms/form.html.erb b/app/views/forms/form.html.erb
index 09646dd..9f3f310 100644
--- a/app/views/forms/form.html.erb
+++ b/app/views/forms/form.html.erb
@@ -1,12 +1,32 @@
-<h1><%= @form.title %></h1>
+<div class="section">
+  <% headers = @form.spreadsheet_headers %>
+  <% headers.push('name') if headers.empty? %>
 
-<%= form_with url: submission_url(@form), action: 'post', authenticity_token: false, local: true, html: { enctype: 'multipart/form-data' } do %>
-  <% @form.spreadsheet_headers.each do |header| %>
-    <p>
-      <label><%= header %>
-      <%= text_field_tag header %>
-    </p>
+  <%= form_with url: submission_url(@form), action: 'post', authenticity_token: false, local: true, html: { enctype: 'multipart/form-data' } do %>
+    <% @form.spreadsheet_headers.each do |header| %>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label"><%= header.humanize %>:</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <div class="control">
+              <%= text_field_tag header, nil, required: true, class: 'input' %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="field is-horizontal">
+      <div class="field-label is-normal"></div>
+      <div class="field-body">
+        <div class="field">
+          <div class="control">
+            <%= submit_tag 'Submit', name: nil, class: 'button is-primary' %>
+          </div>
+        </div>
+      </div>
+    </div>
   <% end %>
-
-  <%= submit_tag 'Send', name: nil %>
-<% end %>
+</div>
diff --git a/app/views/forms/show.html.erb b/app/views/forms/show.html.erb
index 235752a..e678126 100644
--- a/app/views/forms/show.html.erb
+++ b/app/views/forms/show.html.erb
@@ -10,6 +10,7 @@
           Forms
         <% end %>
       </li>
+      <li><%= link_to "Setup", setup_form_url %></li>
       <li><%= link_to "Settings", edit_form_url %></li>
       <li><%= link_to "#{@form.backend_name.humanize} document", @form.spreadsheet_url %></li>
     </ul>
@@ -43,6 +44,10 @@
           And if you do not want to deal with your form at all, have a look at our <%= link_to 'form building service', form_building_service_url %>.
         </p>
 
+        <hr>
+
+        <h4 class="subtitle" style="margin-top:1em">The above example in action:</h4>
+        <iframe src="<%= form_submitter_url(@form) %>" style="width:100%;height:320px" scrolling="no"></iframe>
       </div>
     </div>