COPY PASTE

Jarel Remick  | http://web.appstorm.net
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.
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 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 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.

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.
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.
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.
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 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.
Upon sign up you’re given a success message and emailed your login details.

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.

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.
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

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 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 Extras

With the form extras you can customize the layout of form elements, add progress indicators, customize the Submit button or add CAPTCHA.
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…
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.

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.
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.
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.

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.

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.
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!

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.
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.

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.
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!

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.