Efficient landing page templates

How to Get Form Data From Your Html Landing Page Straight to a Spreadsheet File

Category : Tutorials
Date : February 11, 2017

For those of you searching for a better way of handling leads, registration and contact form data sent to your email from your HTML landing pages, Cloudstitch has the answer.

They have developed a highly flexible cloud based interface which can take the data sent through your landing page’s forms and place it directly into a Google Docs or Excel spreadsheet file.

This way it’s much easier to process the data instead of manually extracting visitors’ information from the usual emails sent by the forms.

Cloudstitch is a paid service but also offers a free package for up to 3 projects which is enough for the basic marketer’s needs and surely more than enough to convince you of its impressive capabilities.

This revolutionary tool also enables you to update content on your HTML pages from a regular spreadsheet document, transforming it into a powerful CMS.

To showcase a segment of Cloudstitch’s awesomeness I decided to make this video tutorial that teaches you how to get forms information from your HTML landing page straight into a Google Docs spreadsheet.

You will need:

  • Landing page with contact form
  • Google account
  • Cloudstitch account with free package

Although advanced features require some basic web development knowledge, Cloudstitch’s basic features can be implemented even by non-technical users with minimum web understanding.

Here is a summary of the steps presented in the video tutorial:

  • LogIn to Cloudstitch.com and Create New Project – Forms – Blueprint Contact Form – Use Now
  • Name your copy: Pavo Test Event
  • Choose your backend stack – Google Drive and click Create
  • In the Project Editor window, select Web Template tab and copy method and action attributes of the form tag

    action=”https://api.cloudstitch.com/inovatik/pavo-test-event/datasources/sheet” method=”post”
  • Open your offline index.html go to the form section and paste the two attributes above, in the form tag
  • Then add to each input tag name=”firstname”, name=”lastname”, name=”phone”, name=”email”
  • Also add hidden input tag to redirect the user to the thank you page:

    <input type=”hidden” name=”_redirect” value=”http://inovatik.com/pavo-test-event/thank-you.html” />
  • Then copy the entire form section and paste it in the Project Editor – Web Template tab, by replacing the entire content
  • Hit Save in the HTML tab and go to CSS tab, delete everything and click Save
  • Spreadsheet tab – Sync With The Template
  • Then click on Publish tab, HTML option and copy the following lines and paste them into your landing page
  • Place this instead of the form tags:

    <cloudstitch-handlebars user=”inovatik” app=”pavo-test-event”></cloudstitch-handlebars>
  • Then in the Head section (to include the Cloudstitch library):

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.13/webcomponents-lite.min.js”></script>
    <link rel=”import” href=”https://components.cloudstitch.com/cloudstitch-handlebars.html” />
  • Before uploading the landing page, in the Project Editor go to Spreadsheet tab and Edit in Google make sure the first row includes names like the ID’s of your fields in the form: firstname, lastname, phone, email
  • Also click Sync With Your Template
  • Now copy the landing page files online and test the form
  • Enter data, submit and receive the Thank You page

Checkout Cloudstitch to find out more about their innovative service and Inovatik for well designed and efficient landing page templates.

By Lucian Tartea

I love to create landing page and website templates that help people build amazing online projects.

Leave a Reply

Your email address will not be published. Required fields are marked *