253 lines
8.6 KiB
Plaintext
253 lines
8.6 KiB
Plaintext
<div id="wrapper" class="has-text-centered">
|
|
|
|
<section id="hero" class="hero is-medium">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="is-size-1 is-size-3-mobile">
|
|
<%=[
|
|
'The form backend for developers and designers',
|
|
'The no-code form backend for Google Sheets and Airtable',
|
|
'The form endpoint for modern static site generators',
|
|
'HTML form processing for the modern Jamstack',
|
|
'Get your online form submissions in your favorite spreadsheet tool',
|
|
'Use Google Sheets or Airtable as your online form backend'
|
|
].sample %>
|
|
</h1>
|
|
<p class="tag-line is-size-5">
|
|
Link your online forms to <span class="google-sheets backend-logo"><%= image_tag 'google_sheets-icon.svg' %>
|
|
Google Sheets</span> or <span class="airtable backend-logo"><%= image_tag 'airtable-icon.svg' %>
|
|
Airtable</span> and receive form submissions in your favorite spreadsheet tool.
|
|
</p>
|
|
<p class="call-to-action">
|
|
<%= link_to "Get started", signup_url, class: 'is-uppercase button is-rounded is-primary has-text-white a-menu' %>
|
|
or try our <%= link_to "Live demos", demo_url, data: { turbolinks: 'false'} %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="section howto has-white-mustard-gradient">
|
|
<div class="container">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="box">
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<h3 class="title">1.</h3>
|
|
</div>
|
|
<div class="media-content">
|
|
<h3 class="title is-size-4">Create a new form</h3>
|
|
<p>
|
|
tinyforms will automatically create and link a connected Google Sheets document for you.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="box">
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<h3 class="title">2.</h3>
|
|
</div>
|
|
<div class="media-content">
|
|
<h3 class="title is-size-4">Point your form to our server</h3>
|
|
<p>
|
|
Simply configure your form to POST to your tinyforms URL.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="box">
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<h3 class="title">3.</h3>
|
|
</div>
|
|
<div class="media-content">
|
|
<h3 class="title is-size-4">Done!</h3>
|
|
<p>
|
|
tinyforms will automatically append each submission to your Google Sheets or Airtable document.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section features has-mustard-bg has-text-white">
|
|
<div class="container">
|
|
<div class="columns is-multiline is-centered">
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Your form, your design!
|
|
</h3>
|
|
<p class="paragraph">
|
|
Create beautiful online forms without any restrictions.<br>Tinyforms stays completely in the background.
|
|
</p>
|
|
<p>
|
|
Do you need help creating your forms? We'll help you!
|
|
</p>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Full Google and Airtable flexibility
|
|
</h3>
|
|
<p class="paragraph">
|
|
Use all your favorite Google Sheets and Airtable features.
|
|
<br>
|
|
For example: share the document with your coworkers or use field formulas.
|
|
<br>
|
|
tinyforms follows your column setup and appends each form submission.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Super simple setup
|
|
</h3>
|
|
<p class="paragraph">
|
|
Create a new tinyform, point your online from to our servers, done!
|
|
<br>
|
|
tinyforms will start processing submissions automatically and add them to your spreadsheets in real-time.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Spam protection
|
|
</h3>
|
|
<p class="paragraph">
|
|
Nobody likes spam. We help you to keep your data clean.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
File uploads
|
|
</h3>
|
|
<p class="paragraph">
|
|
Easily collect documents, photos, file, music and more.
|
|
<br>
|
|
We take care of the storage for you.
|
|
<br>
|
|
Files are added as secure links to your spreadsheet.
|
|
</p>
|
|
</div>
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
JavaScript/AJAX ready
|
|
</h3>
|
|
<p class="paragraph">
|
|
Use our JavaScript library or our API directly to submit data using JavaScript.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Email autoresponder
|
|
</h3>
|
|
<p class="paragraph">
|
|
Send an individual email reply to submitters confirming that you've received their submission.
|
|
</p>
|
|
</div>
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Email notifications
|
|
</h3>
|
|
<p class="paragraph">
|
|
Don't miss a new submission. Get notified via email.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="section" id="contact-us">
|
|
<div class="container">
|
|
<h3 class="is-size-3">
|
|
Missing a feature? Questions?
|
|
</h3>
|
|
<p class="paragraph">
|
|
We are building tinyforms to make your work easier! Let us know what we can do for you.
|
|
</p>
|
|
<p class="paragraph">
|
|
Reach us using this <i>tiny</i>form, or shoot us an email at <a href="mailto:hello@tinyfor.ms">hello@tinyfor.ms</a>.
|
|
</p>
|
|
<form id="contact-us-form" class="contact-form has-text-left" data-tinyforms="true" method="POST"
|
|
action="https://tinyforms.herokuapp.com/s/mT4qT3SjGczmKpFhKXdw4YRW" enctype="multipart/form-data">
|
|
<div class="columns is-centered">
|
|
<div class="column is-one-third">
|
|
<div class="field">
|
|
<label class="label">Your email</label>
|
|
<div class="control">
|
|
<input class="input" type="text" name="email" placeholder="@hey.com">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Message</label>
|
|
<div class="control">
|
|
<textarea class="textarea" name="message" required="true" placeholder="How can we help you?"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="control has-text-centered">
|
|
<button id="contact-us-form-submit-button" class="button is-primary">Submit</button>
|
|
<span id="contact-us-form-loading-state" class="is-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div id="contact-us-form-success-message" class="columns is-centered is-hidden">
|
|
<div class="column is-one-third">
|
|
<h3 class="title" style="margin-top:2em">
|
|
Thank you for reaching out!
|
|
</h3>
|
|
<p>
|
|
Btw. you just used a tinyform :)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h3 class="is-size-3">
|
|
Simple, affordable pricing
|
|
</h3>
|
|
<p class="paragraph">
|
|
<strong class="is-size-5">5€ per month</strong> <br>
|
|
<p>
|
|
<p class="paragraph" style="margin-top:10px">
|
|
unlimited forms<br>
|
|
100 submissions per month included<br>
|
|
then only 1€ per 100 submissions
|
|
</p>
|
|
<p class="call-to-action">
|
|
<%= link_to "Start now - 15 days for free!", signup_url, class: 'is-uppercase button is-rounded is-primary has-text-white a-menu' %>
|
|
</p>
|
|
<p class="paragraph" style="margin-top:1em">
|
|
Want to see tinyforms in action first? Try our <%= link_to "live demos", demo_url, data: { turbolinks: 'false'} %>.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
</div> |