tinyforms/app/views/home/index.html.erb

<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 forms 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 %>
        </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">
    <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>
      <form method="POST" class="contact-form has-text-left" action="https://tinyforms.herokuapp.com/s/mT4qT3SjGczmKpFhKXdw4YRW">
        <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="me@earth.com">
              </div>
            </div>
            <div class="field">
              <label class="label">Message</label>
              <div class="control">
                <textarea class="textarea" name="message" placeholder="How can we help you?"></textarea>
              </div>
            </div>
            <div class="control has-text-centered">
              <button class="button is-primary">Submit</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </section>

</div>