Advertisement

Make Better Online Forms with Typeform

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

There's the standard online forms that you've surely filled out dozens of times, with their rows of bullet points interspersed with text fields. They're ugly, difficult to quickly scan through, and require you to switch between your keyboard and mouse when filling them out. And on a mobile device, they're even more annoying as you have to squint to see and then carefully tap each option.

You can likely list a half-dozen different online form tools if you wanted to make a form, but most of them are essentially the same. Most, that is, except for Typeform. Fresh out of beta, Typeform makes it easy to design advanced forms—complete with picture buttons, logic jumps, and more—that work great on traditional computers thanks to keyboard shortcuts, and work equally great on mobile devices.

Typeform is the perfect modern form tool, and in this tutorial, I'll show you how you can use it to quickly make a form that'll work great on any device, and let you take your forms far beyond what most of us think of as a form.

Screencast

The Typeform Difference

Use pictures as buttons in a Typeform
Pictures as buttons, videos as field descriptions—Typeform is like no other form tool.

Typeform is a brand new tool for creating online forms that's far better than most other form tools for a number of reasons. It's best feature is the way its forms work—as you've seen in the screencast and picture above, Typeforms only show one question at a time, and can include images and icons as buttons that are easy to tap, but are just as easy to select on a keyboard by typing the letter that's before each option. That makes them far easier to use on a smartphone or tablet, as well as on a desktop where you finally won't have to reach back and forth between your mouse and keyboard to fill out a form.

There's a lot more that's great about Typeform—it's easy to use, lets you add logic to create interactive forms, has beautifully simple design tools, and turns your data into nice reports with zero extra work. Then, its pricing is great. You can make unlimited basic forms for free, or pay $10 one-time to make a Pro form (forms with logic, advanced analytics, custom user notifications, and more) and access one month of its data. Or, you can get a Pro account for $20/month if you pay annually and make as many pro forms as you'd like.

Put the great features and pricing together, and you've got a winner. So before you signup and start making a form, go try out the Typeform Demo form to see how nice Typeforms are to fill out. Now, ready to make a form like that for your customers?

Legos for Adults

Like many online form tools, Typeform gives you a list of elements you can include in your form. You'll find what you want to include on the left, then drag-and-drop it to the appropriate spot on your form design in the right. Most Typeforms start out with a Welcome screen—which can include a picture or video along with a text description of the form and a customizable button to enter the form—and end with a Thank you screen that can invite your users to share the form or visit your site. You can choose to include those or not.

Creating a form in Typeform
Drag-and-drop form elements into the order you want

Beyond those two sections, everything else goes in the middle of your form screen. Drag the section you want to the spot you want, and a settings pane will automatically open where you can fill in the rest of the info that's needed. There's the standard text and multiple choice options you'll expect to see, along with statement sections where you can include text or multimedia for your users to see without any accompanying questions. That's a great way to, say, get feedback on an ad campaign or product design ideas.

Creating your own buttons in Typeform
Use pictures as buttons in Typeforms.

There's also two form tools that you'll most likely want to use, since they're so unlike most online forms: picture choice and ratings. The picture choice option is much like any other multi-choice form tool, only this time it includes a picture for each option in your form. The rating option lets your users rate anything you show them—text, multimedia, or perhaps their experience at your business—with stars and other icons.

When you're first getting your form options in place, don't worry too much about their order. You can always come back and reposition your finished form elements once you've entered everything.

Logical Forms

Adding logic jumps to a Typeform
Add logic jumps in pro Typeforms to make interactive forms that customize the next answers and responses based on previous input

Your form responders are not all the same, and the questions you'll want to ask them will likely vary based on their previous answers. That's where logic jumps—a pro feature in Typeform—come in. Simply hover over the first question that you want to process its answers for the logic jump, and click the curved arrow to add a logic jump. There, you can pick what you want to show the user next based on what they chose in the original question.

Typeform can handle simple if-this-answer-then-show-this type of logic, but it can also group questions so you'll only show certain options to people who answered, say, a set of 3 questions in the same way. It's easy to add logic jumps and play around with the possibilities, and with a little work, you can almost make your form into a basic smart data entry app.

If you're using a pro form and want to make your form even smarter, there's also the option to include hidden fields in your form. These hidden fields let you pass data to the form—say, your user's email address and name—from the link they'll receive to the survey. That way, you'll get even more data in your form without having to bug your users for extra info.

Design Matters

Customizing a Typeforms design
Pick the fonts and colors you want in your form, then save them as your own Themekit to reuse in a click

Your Typeform should be looking quite nice by now, especially if you've included a logo on your Welcome screen. But to go the extra mile, head over to the Design tab in the top of your Typeform screen. Here, you'll find options to choose from a number of nice typefaces for your form (though you can only choose one typeface per form, and it's used in various sizes throughout the form automatically). You can also add a background image, or tweak your form's colors with pre-made palettes or your own background and text color selections.

Once you've picked the colors and typeface that'd best match your company's branding—or the style of the site you're embedding this form into—you can save the form's design for this one form. Or, click the Save to Themekit button to save your design choices for future themes, so you'll be able to style any other forms you make for this company in one-click.

Now all that's left to do is to share your form and start getting responses. You can just copy and share the form link that's ever-present in the top right-hand corner of your Typeform window, or click the Distribute tab to get the embed code to put it in your website. You'll be able to embed it directly into your page, or have it show as a popover or slide-over drawer, so you can get the finished form looking as integrated with your branding as you'd like. 

Digging Into Your Data

View Typeform analytics
Typeform gives you advanced analytics on your responses, as well as your form results.

You've made a great form, shared it with your customers or readers or friends, and finally have the data you had set out to capture in the first place. So open your form in Typeform and select the Analyze tab at the top, or just hover over your form on your Typform dashboard and click the small graph icon that'll appear. Here, you'll first see detailed metrics about your form, where you can see how many unique visits, responses, the average time to complete the form, and what platform people used when filling out your form. Just knowing what percentage of people filled out your form on a computer versus a tablet or phone will tell you a great deal about your customers, and where they're getting info about your company.

But you can get even more analytics about your customers from Typeform if you want. There's an option to add your Google Analytics tracking code if you'd like extremely detailed analytics, and then there's built-in advanced analytics coming soon, including options designed specifically to track how your social networks influence your form results.

Quick Reports in Typeform
Typeform's quick reports are the easiest way to get your data

Now it's time to get your results. There's the standard spreadsheet-style view of your data, but the best way to quickly see what your users are thinking is with Typeform's Reports. Just click the Reports button on the left side of the Analyze screen, and you'll see quick charts that break down the responses from your forms in an easy-to-understand manner. You can even pop the reports out into a separate window to show them full-screen at your company meetings. That'll save you serious time versus other form tools where you'd have to analyze the data yourself and make your own charts and presentations from the data by hand.

There's only the default report that shows all responses for now, but there's custom reports coming soon that'll make it even easier to automatically break down the info from your Typeforms and use it in your work.

Analyze data in Typeform
Dig deep into all of your data to see what your customers really think.

But if you still want the raw data—and especially if you've included text responses for your users—you'll want to check the Results tab in the Analyze view as well. Here you'll see a traditional spreadsheet-style view of all of your form results, complete with options to sort individual columns, turn on only the columns you want to see, filter the data by date, and search through the data. You can also download your Typeform data in .csv file as you'd expect, to analyze on your own in Excel or any other spreadsheet app.

All in all, the reports, analytics, and data tools in Typeform are straightforward and easy to use, and you'll find yourself with far more data from your forms than you'd have ever expected.

Conclusion

If you've ever found traditional web forms frustrating, and want to make a better form that's far more flexible than any other form, Typeform's the tool for you. It'll help you make forms faster, forms that are so nice your users will want to fill them out. Once the Stripe payment integration is added to Pro Typeforms, you'll be able to use them from everything from finding what your customers would be interested in and collecting preorders to selling your finished products and getting feedback on how people like your work.

Then, we've got a exclusive coupon code that'll let get 4 free months on a Pro plan (a $100 value) form now until March 17th. Just signup for a Typeform account, then upgrade to a Pro account inside the app using the coupon code TUTS+GRAB4, and start making some great Pro Typeforms.

Advertisement