Form to create airtable and google sheets forms

app/assets/stylesheets/application.css.scss

@@ -29,6 +29,10 @@ $weight-bold: 400;
 @import "checkmark-icon";
 @import './demo';
 
+.field_with_errors input {
+  border-color: $red;
+}
+
 .is-logo {
   font-family: $family-sans-serif;
   color: $grey;
@@ -124,6 +128,10 @@ Colours
 
 .backend-logo {
   white-space: nowrap;
+  img {
+    height: 30px;
+    vertical-align: text-bottom;
+  }
 }
 
 .features .columns {
@@ -137,13 +145,6 @@ Colours
   margin-top: 3em;
 }
 
-.tag-line {
-  img {
-    height: 30px;
-    vertical-align: text-bottom;
-  }
-}
-
 .call-to-action {
   margin-top: 2em;
 }

app/controllers/forms_controller.rb

@@ -5,7 +5,7 @@ class FormsController < ApplicationController
   layout 'submission', only: [:form]
 
   def new
-    @form = current_user.forms.build
+    @form = current_user.forms.build(backend_name: 'google_sheets')
   end
 
   def show
@@ -40,13 +40,12 @@ class FormsController < ApplicationController
   end
 
   def form
-    
     @form = Form.find_by!(token: params[:id])
   end
 
   private
 
   def form_params
-    params.require(:form).permit(:title, :thank_you_url)
+    params.require(:form).permit(:title, :thank_you_url, :backend_name, :airtable_table, :airtable_api_key, :airtable_app_key)
   end
 end

app/javascript/packs/application.js

@@ -12,6 +12,7 @@ require('burger_menu');
 require('tinyforms');
 require('demo');
 require('backend_typed');
+require('tabs');
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

app/javascript/tabs.js

@@ -0,0 +1,16 @@
+document.addEventListener("turbolinks:load", function () {
+  const tabLinks = document.querySelectorAll('.tabs a[data-target]');
+  tabLinks.forEach(el => {
+    el.addEventListener('click', (e) => {
+      e.preventDefault();
+      // hide alll
+      tabLinks.forEach(link => {
+        link.closest('li').classList.remove('is-active');
+        document.getElementById(link.dataset.target).classList.add('is-hidden')
+      });
+      const target = document.getElementById(el.dataset.target);
+      target.classList.remove('is-hidden');
+      el.closest('li').classList.add('is-active');
+    }, true);
+  });
+});

app/models/form.rb

@@ -68,5 +68,6 @@ class Form < ApplicationRecord
 
   def insert_defaults
     self.backend_name ||= airtable_app_key.present? ? 'airtable' : 'google_sheets'
+    self.title ||= airtable_table
   end
 end

app/views/forms/new.html.erb

@@ -2,10 +2,87 @@
   <div class=" columns ">
     <div class="column is-half is-offset-one-quarter">
       <div class="box">
-        <div class="content has-text-centered">
+        <div class="content">
-          <h1 class="has-text-weight-light">Create a new form</h1>
+          <h1 class="title has-text-centered">Create a new form</h1>
 
-          <%= render 'form', form: @form %>
+          <div class="tabs is-centered">
+            <ul>
+              <li class="<%= 'is-active' if @form.backend_name == 'google_sheets' %>">
+                <a href="#" data-target="google-sheets-form">
+                  <span class="icon is-small"><%= image_tag 'google-sheets-icon.svg' %></span>
+                  <span>Google Sheets</span>
+                </a>
+              </li>
+              <li class="<%= 'is-active' if @form.backend_name == 'airtable' %>">
+                <a href="#" data-target="airtable-form">
+                  <span class="icon is-small"><%= image_tag 'airtable-icon.svg' %></span>
+                  <span>Airtable</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="google-sheets-form <%= 'is-hidden' unless @form.backend_name == 'google_sheets' %>" id="google-sheets-form">
+            <%= form_for @form, local: true do |f| %>
+              <%= f.hidden_field :backend_name, value: 'google_sheets' %>
+              <div class="field">
+                <label class="label">Name</label>
+                <div class="control">
+                  <%= f.text_field :title, class: 'input', placeholder: '', autocomplete: 'off' %>
+                </div>
+                <p class="help">Give your document a name.</p>
+              </div>
+
+              <div class="field">
+                <div class="control">
+                  <%= f.submit class: 'button is-primary' %>
+                </div>
+              </div>
+            <% end %>
+          </div>
+
+          <div class="airtable-form <%= 'is-hidden' unless @form.backend_name == 'airtable' %>" id="airtable-form">
+            <p>
+              To connect a new online form with an Airtable document please <strong>first</strong> <a href="https://airtable.com/" target="_blank">create the document on Airtable</a>. 
+            </p>
+            <%= form_for @form, local: true do |f| %>
+              <%= f.hidden_field :backend_name, value: 'airtable' %>
+              <div class="field">
+                <label class="label">Table Name</label>
+                <div class="control">
+                  <%= f.text_field :airtable_table, class: 'input', placeholder: 'Table 1', autocomplete: 'off' %>
+                </div>
+                <p class="help">The name of the table in your Airtable base. Your Airtable can have multiple tables/sheets. Which one do you want to use?</p>
+              </div>
+
+              <div class="field">
+                <label class="label">API Key</label>
+                <div class="control">
+                  <%= f.text_field :airtable_api_key, class: 'input', placeholder: '', autocomplete: 'off' %>
+                </div>
+                <p class="help">Your Airtable account API Key. You find this one on your <a href="https://airtable.com/account" target="_blank">Airtable account page</a>.</p>
+              </div>
+
+              <div class="field">
+                <label class="label">APP Key</label>
+                <div class="control">
+                  <%= f.text_field :airtable_app_key, class: 'input', placeholder: '', autocomplete: 'off' %>
+                </div>
+                <p class="help">The application key of your Airtable document. You find this one on the <a href="https://airtable.com/api" target="_blank">API page of your Airtable base</a>.</p>
+              </div>
+
+              <div class="field">
+                <div class="control">
+                  <%= f.submit class: 'button is-primary' %>
+                </div>
+              </div>
+            <% end %>
+          </div>
+
+          <hr>
+          <p>
+          Do you need help? <%= link_to 'Let us know!', help_url %>.
+          </p>
 
         </div>
       </div>