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