bumi/tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Form to create airtable and google sheets forms

Browse Source
This commit is contained in:
bumi 2020-04-25 22:58:03 +02:00
parent 60386cb51e
commit 833de45827
6 changed files with 108 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/stylesheets/application.css.scss
View File

@ -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;
}

5
app/controllers/forms_controller.rb
View File

@ -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

1
app/javascript/packs/application.js
View File

@ -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' %>)

16
app/javascript/tabs.js Normal file
View File

@ -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);
});
});

1
app/models/form.rb
View File

@ -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

83
app/views/forms/new.html.erb
View File

@ -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">
<h1 class="has-text-weight-light">Create a new form</h1>
<div class="content">
<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>