Easy Web Forms with Formstack

Forms. We all need them, yet they’re one of the elements of the web that most of us cringe at the thought of creating. They take a strong mix of skills between a developer and designer to create — forms that are a breeze to use, function perfectly and look amazing. Forms are the ever important breaking point between creating a new customer or simply collecting a visitor’s information.

FormSpring Formstack makes it a breeze to create fantastic forms of nearly all types that look and function like your web app or business depends on them. Not only that, but FormSpring Formstack makes it incredibly easy to manage the data collected and take it a step further with charts, reports and more. Read on for our look into FormSpring Formstack.

Edit: FormSpring has changed their name to Formstack.

Overview

Right off the bat, Formstack shows that they mean business with a clean and modern site design. They’re well aware of the importance of usability and great interface design.

Formstack Home

Formstack Home

Pricing

Right off the bat, you get a pretty good idea of the capabilities of the service they offer. As you quickly skim down the home page information, you’ll notice an important block of information — some of the common form objectives.

Common Forms

Common Forms

The next information I tend to look for is pricing information. Surprisingly, some of these types of services don’t give straight forward pricing details. Formstack displays it all, clean and simple. They also offer a free plan, which is typically a make or break point when I want to try a service.

Pricing Options

Pricing Options

Just below their pricing, additional information is included to help clarify questions you may have — which is great because I had questions that were answered with this information. Again, something many services surprisingly don’t do.

About Formstack

While not a big deal, I really like to get a quick idea of the background of a company and what they’re about. Again, all laid out in their clean, modern and straight forward site design. Well done.

About Formstack

About Formstack

Also, notice that they include a nice list of team members, including professional photos and background information. It’s always nice getting to know the people you plan on giving your money to, or who you might be communicating with.

Everything else about the site is pretty typical. You’ve got your how-to’s, features, overviews, etc. It’s all laid out in consistent style with the rest of the site and covers the right information you’d be looking for.

Sign Up

Of course sign up is never more than a clearly visible quick click away, as it should be.

Sign Up

Sign Up

Sign up takes you directly to their pricing page so you can select the plan you’d like to start with. Which I find refreshing because many services go directly to signing up and ask what plan you would like later. I think many people like knowing what level they’re signing up for from the very beginning.

The sign up form is incredibly basic and only requires the information needed to get your account started. If you’re signing up for a paid account, the form includes a section for billing information just below.

Formstack Sign Up Form

Formstack Sign Up Form

Upon sign up you’re given a success message and emailed your login details.

Account Created Successfully

Account Created Successfully

Login

I know it’s a little silly, but I love nice login forms. Of course Formstack’s login form looks great and includes a few extra links to catch them on Twitter, Facebook and via their blog.

Login Form

Login Form

Administration

I’ll be honest, I expected something a little different in terms of administration interface. I was a little surprised by the seemingly overly simplistic interface. While simplicity and a no-nonsense interface is nice, it actually feels like it’s lacking some direction.

Admin Interface

Admin Interface

You’ll also notice the blue box guiding you to create your first form isn’t centered. Yeah, that’s being a little nit-picky, just an observation! The uncluttered admin interface guides you in the direction needed to accomplish your purpose for using the service — creating forms.

Form Creation

The form creation process is pretty simple, and, not so simple — all at the same time. In four steps you’ll create your form, starting with the form name and selecting between a pre-built form template (tons to choose from), copy an existing form from a webpage, upload an HTML file with a form or start with a blank form.

Step 1

Form Creation Step 1

Form Creation Step 1

I’m going to start with a pre-built contact form, as that’s likely to be the most popular initial choice.

Step 2

In step two, you’ll customize your form to fit your needs. As the information just under the “Step 2: Build Your Form” title says, click the buttons at the bottom or drag them into the form to add fields or sections.

Form Creation Step 2 - Customize

Form Creation Step 2 - Customize

Form Fields

Optional fields to add include everything from name, address and email to checkboxes, radio buttons and file uploads. They have pretty much every form element you could need.

Form Fields

Form Fields

Form Extras

With the form extras you can customize the layout of form elements, add progress indicators, customize the Submit button or add CAPTCHA.

Form Extras

Form Extras

Form progress indicators and save/resume links require forms with multiple pages.

Rearrange Fields

If you prefer arranging form fields using a list, the Rearrange Fields button is for you. But there’s another way…

Rearrange Fields

Rearrange Fields

Rearranging fields should be drag and drop easy — and it is. Hover over the fields you want to move, click and hold the multi-directional arrow and drag the fields to your desired placement.

Click and Drag to Rearrange

Click and Drag to Rearrange

Other Basics

Other basic editing such as deleting, duplicating and editing (labels, etc.) is done using the buttons next to the multi-directional arrow previously mentioned.

Edit Basics

Edit Basics

If you attempt to edit a field but it doesn’t delete or allow you to edit additional details like the label, field type, etc., your session may have ended due to inactivity. Simply refresh and login again.

Edit Details

Editing the details of a field gives you options to change everything from the field type, label, supporting text, field size, format, default value or even conditional logic. With these settings you’ll be able to easily manage fine grain control of every form field.

Edit Details

Edit Details

It’s also worth noting that these additional options give you the flexibility to create forms to fit nearly any of your possible needs.

Step 3

In step three, you customize general form settings including template styles. An important section here is Security.

Form Creation Step 3

Form Creation Step 3

Security

Allowing your client’s, customer’s and/or visitor’s information to exchange hands over the web can be a serious security risk. Not to worry though, Formstack has you covered by offering options to password protect your forms, use SSL, encrypt notification emails or encrypt your saved data. These are important options to have available.

Security Options

Security Options

3rd Party Integration

Forms of all types will be used by many Formstack users that won’t need payment processing, CRM, email or other web apps integration, but there are a lot of situations where this will be required. Without this optional integration, Formstack’s versatility would be seriously limited — especially for business class customers.

3rd Parties - Payment Processors and CRM

3rd Parties - Payment Processors and CRM

There may be a few 3rd parties missing, but most of the major ones are there. In fact, my first response to this list was, “Awesome.” They cover everything I use (Paypal, Google Checkout, Google Docs and FreshBooks), which is going to make my life much easier!

3rd Parties - Email and Web Apps

3rd Parties - Email and Web Apps

Step 4

In step four, you put your newly created form to use! Link to the form, embed it using JavaScript, install a TypePad widget, download and integrate the raw HTML or use form forwarding.

Form Creation Step 4

Form Creation Step 4

I would definitely like to see some additional integration options for platforms like WordPress, Tumblr, etc., but these current options are a pretty good set already.

Forms include instant validation for fields like Phone, etc., depending on how you integrate the form.

Custom Built Forms

Although there are many different pre-built forms available, you may want to build a custom form at some point from scratch. The process is just as easy as starting from a pre-built form, except you’re starting with a blank page and entering the form fields and elements you want with the customized details you want. Everything else is basically the same.

My Forms

Now that I have a form created, visiting the Forms page will show an overview of all my forms. You can quickly change the view from grid layout to list layout and easily view basic stats on the forms such as creation date, view count and submission count.

My Forms

My Forms

Editing and Data

Hover over your forms to view form options like building, settings, view data, use, duplicate or trash. I’ve entered a sample form submission which is displayed in the table in the form data view. You can manipulate the submissions as necessary, download as a PDF or RTF or edit additional configuration options.

View Data

View Data

In this case, the form was set to send the form submission information via email as well. So viewing form submissions via the form data view isn’t required.

Style Templates and Users

If you frequently use particular styles, you can create style templates for reuse later. I won’t cover this but the process is very easy while also including options for more advanced styling with CSS and HTML. Should you need to allow others to create or manage forms, you’re able to create users (assuming your price plan allows it).

Final Thoughts

Overall, Formstack does a really great job of making form creation easy enough for anyone while including more than enough in-depth options for the far more advanced users. Integration with third party services is a must and they’ve got most of the major ones covered. Security isn’t an afterthought with Formstack either. It’s a slightly less noticeable configuration option and none of the security options are turned on by default but they’re available for you to protect your information and the information of others.

Initially I didn’t really like the seemingly overly simplistic administration interface, but, as I assumed, it is essential for really focusing on management of your forms without the clutter of unnecessary information or website elements. Too many other services attempt to include these extra bits and it really just distracts from your primary goal, the reason for signing up for their service.

Giveaway!

Free Pro Plans for Giveaway

Free Pro Plans for Giveaway

Not only does Formstack’s offerings rock, they’re also being generous enough to give away two Pro plans, free for a year. At $29 per month, that’s a value of $348 each! If you would like to win one of these awesome Pro plan accounts, leave a comment below and let us know how you would use it. Winners will be selected randomly and will be announced this Friday, the 22nd.

Please Note: Envato staff or people who have written more than two articles or tutorials for Phototuts+ are ineligible to enter.

Update: Winners have been announced here.


Summary

Formstack provides organizations with an easy way to build web forms that integrate with their websites without any programming, software, or special skills.

10
  • http://twitter.com/jdbannister John Bannister

    I would use it to collect membership details for my University Theatre Society and to sell tickets with the PayPal integrations!

  • http://withoiutink.com withoutink

    I would love to use this for the company I recently started. I require a form builder that connects to PayPal or Google Checkout + Mailchimp. This provides me with all of that and more.

  • http://andrewburgess.posterous.com Andrew Burgess

    Wow, that would make my life so much easier! I’ve been trying to wrap my head around preparing form input for a database, and it’s not a simple concept. This would speed up my development big time!

  • Rick Carlton

    I would use Formspring to help my talented but not geeks staff create forms that look and work as well as everything else we produce.

  • http://www.urbacs.com Jayson Manship

    I discovered FormSpring about 6 months ago and have recommended them to many of my clients. The Indiana Pacers use FormSpring to sell group tickets. Hallmark Homes used FormSpring to collect/process volunteer registrations for Extreme Makeover: Home Edition. At URBaCS, we use FormSpring for contact forms and basic sales pages for many of our small business clients.

    I too would give FormSpring a 10-out-of-10. I use the form creation interface and the API and the software has saved me time, money and headache.

  • Cassie Dull

    I love Formspring! I have lots of uses for our school to use Formspring… summer school registration, donation form, contact form, authorization forms, the list goes on and on…

  • http://www.kulturka.net/wystawa/page1/page8/page8.html Matto

    Would be helpful for the websites I create.

  • http://www.fai.in.th Fai

    I would love to use it to simplify my event organization. Normally, i use an Google Docs for this one but FormSpring will make registration easier and more flexible ;)

  • Omer

    Hi! thanks for this amazing giveaway! I would use Formspring to finish my work faster and concentrate on my studies!

  • http://twitter.com/MGKong Maxx

    I would use it as a contact form for my website and to gather additional information of my visitors.

  • http://www.vvc.edu Justin Gatewood

    I already use this for all of our college’s online form submission stuff, and have for many years, and I use a starter account for a few of my private clients’ websites, but I would like to take my private use to the next level for my clients, and a free business account would make that happen!

  • Federico

    Hi:
    I gonna use it to track down my forms and save me a ton of work to clean up the email address

  • http://thetechzonelive.co.cc Anthony Di Iorio

    I would use it to allow users to contact me instead of having them open an email client. I would also use it to accept requests and donations.

  • Jordan Humphreys

    I would use it to process membership fees for my University’s International Business Society.

  • Tony

    10/10? FormSpring is as best as it ever could be? Ever? Nothing could be better? Good for them! They might as well stop now!

    • http://jremick.com Jarel Remick

      10/10 isn’t perfection but if 10/10 isn’t achievable then that would be a poor rating system. FormSpring is a wonderful service, but no service is perfect nor will any service be perfect. They do deserve the rating though, they’re a leader in their market. :-)

  • Brad

    I would use it to save the world.

  • Ethan Wright

    I need a form, but I know nothing about server side programming, this would relieve my headaches about forms.

  • Carl

    My brother and I are trying to create a web app to access a database and then automatically fill out a government-standardized form with many fields. We’ll also have many other forms to create in order to make this project successful. We’re bootstrapping this project, so having access to FormSpring would be a great help!

    But I’m also wondering if FormSpring is up to the challenge. The form we need to create is complex – and it has to look a certain way.

  • Karl

    I can’t decide for sure how I would use it. I belong to the Peninsula Players Theater group who could benefit from this. Also we have a few clients who might be able to use this on their websites. Customization capabilities and the ability to integrate this into existing sites would be helpful.

  • Daniel

    I would integrate it into my upcoming redesigned website gathering a database and/or contact and/or support.

  • idntt

    I’d use on my FAQ farm business.

    • Colin

      Hi I’m working on an FAQ related little app and was wondering what an FAQ farm is. Could you get in touch and just let me know what you do? My email is vindexus [@] gmail dot com

      • Fred Waters

        According to Wikipedia, a FAQ farm is a site like Answers.com where users post questions and other (hopefully knowledgeable) people post answers. In fact, again according to Wikipedia, Answers.com was originally called “FAQ Farm”.

  • http://www.campsteve.com CampSteve

    I would definitely use this on two personal websites I am creating. I’m a designer and not a developer, so I need to use easy-to-build solutions for the technical aspects of website creation. Here’s what I need:

    - A general purpose email list form.
    - A general purpose contact me form.
    - A form for clients to fill out information I need for design projects.
    - A form that serves as a “contract”, kinda like registering for any website.
    - A form for clients to submit photo reference.

    Some of these, I need for more than one site. Man, FormSpring would rock my world!

  • Riccardo

    I wuold just use it for my clients’ sites.

  • Fabian Henzler

    Sounds great…saves time and energy =) want one =D

  • http://mio-english.com Temma

    I will use it as application form of my English school in my website.

  • Igor Furnas

    Really nice. It would be really nice to handle some surveys for university papers.

  • http://hector-lee.com Hector Lee

    I’m starting up my website and would really like to get feedback on how to improve it.

  • http://twitter.com/trevorgerzen Trevor Gerzen

    I would use it for my contact form. I created a super simple contact form with my ridiculously limited PHP knowledge and get spammed through it all the time. This would be awesome since I’m not a PHP developer :)

  • http://www.warstwy.com adone

    Great giveaway. I need this for my next website projects.

  • http://www.irvingling.com Irving

    I’m part of the organizing committee for a Global Health Conference (http://www.ghc10.org).
    The conference is coming up soon and I’d love to have a sleek, professional Events Registration form for the conference with paypal integration, etc.
    I’ve tried several WP plugins but none seems to look as good and they lack several functional qualities that Formspring seems to have.

    I’d be great to use this and hopefully create a brilliant events registration form.

    Thanks webappstorm.

    Irving

  • jeff

    No mention of Wufoo? That almost seems a bit odd, since its so awesome. I have been using it for about a year. It seems to have all these features and then some, plus it is cheaper.

    • http://jremick.com Jarel Remick

      Wufoo is awesome and I thought about comparing several aspects of the two services. As it was, the review was pretty long so I decided not to. I think I might do a comparison review of both services though.

  • Brian

    Just tried out the free version to create a course evaluation form for my students. It took only minutes — a brilliant and intuitive app. I’d use it for a whole bunch of classroom stuff…

  • http://www.todotweet.com Alexander Wolfe

    I would love to use this on a new application that I’m building. Would be a great way to implement forms without all the headache. Thanks.

  • http://www.mariche.com Richard

    Seems great for doing mockups of forms for customers.

  • Pingback: FormSpring Giveaway and Threadsy Invites | Web.AppStorm

  • Sylvain Vandoolaeghe

    wow, sounds really cool. Being a webdesigner, i’d make great use of this. Forms being a bit of a pain html and css wise :-s

  • Pingback: FormSpring Giveaway and Threadsy Invites | Arthur Chu | Web Develepment Aggregator

  • Pingback: Best of AppStorm in January | iPhone.AppStorm

  • Pingback: Best of AppStorm in January | appinferno | hottest news best iphone4g apps

  • http://www.lindauermacs.com Charles Lindauer

    FormSpring looks like a great tool for web designers/developers who need to create forms in quantity, as well as for the individual who needs a form. I really like the ease of adding security and spam-resistance to forms!

  • http://www.buzzrecruitment.co.nz Gareth

    Looks Awesome. I’d use FormSpring as the base for a online Salary Survey project for the Hospitality Industry.
    Pair it with Campaign Monitor and Google Docs. It’s great!

  • Pingback: Best of AppStorm in January | Best Web Magazine

  • Pingback: Formstack, SpiderOak, SmugMug and RTM Giveaway | Web.AppStorm

  • Pingback: Earth Day: How Are You Contributing? | Web.AppStorm

  • Lori

    I would use it for registration for events for my two non-profits. Used to use eventbrite but too expensive.

  • http://homie.com wutitdo homie

    formstacks is garbage. no repeating sections and calculating repeating fields do no exist. tables are non-existant as well. all of which should be basic functions of a form. the interface is made for 10 year olds. you’re better off building a free pdf or infopath form. why these idiots decided to reinvent the wheel… I HAVE NO IDEA!!

  • Mike

    Formstack can be used for many practical data collection purposes as well – would like to see more integration with charting and reporting apps though.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow