Forms edit content
This commit is contained in:
parent
d733468abe
commit
8fb3fb7175
|
@ -27,7 +27,8 @@ $weight-bold: 400;
|
|||
@import 'bulma/bulma';
|
||||
|
||||
@import "checkmark-icon";
|
||||
@import './demo';
|
||||
@import 'demo';
|
||||
@import 'highlight';
|
||||
|
||||
.field_with_errors input {
|
||||
border-color: $red;
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
code.html .hljs-tag:first-child .hljs-attr, code.html .hljs-tag:first-child .hljs-string {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
|
@ -39,6 +39,10 @@ class FormsController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
def setup
|
||||
@form = current_user.forms.find_by!(token: params[:id])
|
||||
end
|
||||
|
||||
def form
|
||||
@form = Form.find_by!(token: params[:id])
|
||||
end
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
document.addEventListener("turbolinks:load", function () {
|
||||
document.querySelectorAll('pre code').forEach(function (block) {
|
||||
if (window.hljs) {
|
||||
hljs.highlightBlock(block);
|
||||
}
|
||||
});
|
||||
});
|
|
@ -13,6 +13,7 @@ require('tinyforms');
|
|||
require('demo');
|
||||
require('backend_typed');
|
||||
require('tabs');
|
||||
require('highlight');
|
||||
|
||||
// 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' %>)
|
||||
|
|
|
@ -40,9 +40,13 @@ window.tinyforms = {
|
|||
|
||||
onSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
return tinyforms.submitForm(this)
|
||||
var form = this;
|
||||
return tinyforms.submitForm(form)
|
||||
.then((response) => {
|
||||
this.dispatchEvent(new CustomEvent('tinyforms:submitted', {detail: { submission: response.submission, response: response }}));
|
||||
if (form.dataset.tinyformsSubmitted && typeof window[form.dataset.tinyformsSubmitted] === 'function') {
|
||||
window[form.dataset.tinyformsSubmitted](response.submission);
|
||||
}
|
||||
})
|
||||
.catch((response) => {
|
||||
this.dispatchEvent(new CustomEvent('tinyforms:error', {detail: { submission: response.submission, response: response }}));
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
<form action="<%= submission_url(form) %>" method="post"
|
||||
accept-charset="UTF-8" enctype="multipart/form-data">
|
||||
<% form.spreadsheet_headers.take(3).each do |header| %>
|
||||
<p>
|
||||
<label><%= header %></label>
|
||||
<%= text_field_tag header %>
|
||||
</p>
|
||||
<% end %>
|
||||
...
|
||||
<%= submit_tag 'Submit' %>
|
||||
</form>
|
|
@ -0,0 +1,11 @@
|
|||
<form data-tinyforms="true" data-tinyforms-submitted="alert" action="<%= submission_url(form) %>" method="post"
|
||||
accept-charset="UTF-8" enctype="multipart/form-data">
|
||||
<% form.spreadsheet_headers.take(3).each do |header| %>
|
||||
<p>
|
||||
<label><%= header %></label>
|
||||
<%= text_field_tag header %>
|
||||
</p>
|
||||
<% end %>
|
||||
...
|
||||
<%= submit_tag 'Submit' %>
|
||||
</form>
|
|
@ -1,14 +1,91 @@
|
|||
<div class="section">
|
||||
<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">Update <%= @form.title %></h1>
|
||||
<div class="container">
|
||||
<div class="is-pulled-right">
|
||||
<%= link_to image_tag("#{@form.backend_name}-icon.svg", alt: @form.backend_name.humanize), @form.spreadsheet_url %>
|
||||
</div>
|
||||
<nav class="breadcrumb is-small has-bullet-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<%= link_to forms_url do %>
|
||||
<span class="icon is-small"><i class="fas fa-home" aria-hidden="true"></i></span>
|
||||
Forms
|
||||
<% end %>
|
||||
</li>
|
||||
<li><%= link_to @form.title, form_url(@form) %></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1 class="title">
|
||||
<%= @form.title %>
|
||||
</h1>
|
||||
|
||||
<%= render 'form', form: @form %>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><%= link_to "Form Settings", edit_form_url(@form), class: "is-active" %></li>
|
||||
<li><%= link_to "Setup", setup_form_url(@form) %></li>
|
||||
<li><a>Email notifications</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
<%= form_for @form, local: true do |f| %>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Name</label>
|
||||
<div class="control">
|
||||
<%= f.text_field :title, class: 'input', placeholder: '', autocomplete: 'off' %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Redirect URL</label>
|
||||
<div class="control">
|
||||
<%= f.text_field :thank_you_url, class: 'input', placeholder: '', autocomplete: 'off' %>
|
||||
</div>
|
||||
<p class="help">The URL where the user will be redirected after submission</p>
|
||||
</div>
|
||||
|
||||
<% if @form.airtable? %>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Airtable 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">Airtable 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">Airtable 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>
|
||||
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<%= f.submit 'Save', class: 'button is-primary' %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -23,12 +23,8 @@
|
|||
<p class="title is-4 "><%= link_to form.title, form_url(form) %></p>
|
||||
|
||||
</div>
|
||||
<div class="media-right has-text-right is-size-4">
|
||||
<figure class="image is-48x48 ">
|
||||
<%= link_to form.spreadsheet_url, {class: "has-text-success", target: "__blank"} do %>
|
||||
<i class="far fa-file-excel"></i>
|
||||
<% end %>
|
||||
</figure>
|
||||
<div class="media-right">
|
||||
<%= link_to image_tag("#{form.backend_name}-icon.svg", alt: form.backend_name.humanize, style: "height:48px"), form.spreadsheet_url %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,64 @@
|
|||
<div class="container">
|
||||
<div class="is-pulled-right">
|
||||
<%= link_to image_tag("#{@form.backend_name}-icon.svg", alt: @form.backend_name.humanize), @form.spreadsheet_url %>
|
||||
</div>
|
||||
<nav class="breadcrumb is-small has-bullet-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<%= link_to forms_url do %>
|
||||
<span class="icon is-small"><i class="fas fa-home" aria-hidden="true"></i></span>
|
||||
Forms
|
||||
<% end %>
|
||||
</li>
|
||||
<li><%= link_to @form.title, form_url(@form) %></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1 class="title">
|
||||
<%= @form.title %>
|
||||
</h1>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><%= link_to "Form Settings", edit_form_url(@form) %></li>
|
||||
<li><%= link_to "Setup", setup_form_url(@form), class: 'is-active' %></li>
|
||||
<li><a>Email notifications</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
<h3 class="title">Your submission URL:</h3>
|
||||
<p>
|
||||
<code><%= submission_url(@form) %></code>
|
||||
</p>
|
||||
<p>
|
||||
Please set your form action as in the example below. Make sure to use proper <code>name</code> attributes.
|
||||
<p>
|
||||
<pre><code class="html">
|
||||
<%= html_escape_once render('form_example', form: @form) %>
|
||||
</code></pre>
|
||||
|
||||
<h3 class="subtitle">Example with JavaScript:</h3>
|
||||
<p>
|
||||
Learn more about our <a href="https://www.notion.so/JavaScript-Library-442071548edd4cd1af9c7d8edb3d42cb">JavaScript library</a> and our <a href="https://www.notion.so/Tinyforms-API-7862355e22ce4bbead5de3b635cda55e">API</a> in your help section.
|
||||
</p>
|
||||
<pre><code class="html">
|
||||
<%= html_escape_once render('form_example_js', form: @form) %>
|
||||
</code></pre>
|
||||
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/styles/railscasts.min.css">
|
||||
<style>
|
||||
</style>
|
||||
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/highlight.min.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
|
@ -2,7 +2,10 @@ Rails.application.routes.draw do
|
|||
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
|
||||
|
||||
resources :forms do
|
||||
member { get :form }
|
||||
member do
|
||||
get :form
|
||||
get :setup
|
||||
end
|
||||
resources :submissions
|
||||
end
|
||||
# short link for submission file uploads
|
||||
|
|
Loading…
Reference in New Issue