Here are the take-homes in summary form (see below for more)

• Keep pages short
• Minimize mouse usage
• Avoid multiple columns
• Place labels close to fields
• Hide what’s not necessary yet

And here’s the full explanation …

Keep Pages Short

If you have a long form, you can make it seem less overwhelming by dividing it up into page sections. This also removes the need for a lot of scrolling up and down if each page can fit in the respondent’s screen.

How do you add a page? In the Form Builder, click the “Add Section” button, and then select “Page” from the available section types. You can then drag and drop the questions to the correct page.

Minimize Mouse Usage

When typing into a form, it is easiest to use the tab key to move from field to field, but many users do not know this. We can still help them feel less overwhelmed by eliminating the need to grab the mouse and click around.

A date field is a perfect example. We instinctively want to add separate fields for the month, day and year, perhaps in the hope of preventing typos and improving the quality of the collected data. The opposite is actually more likely. Since it’s slower to enter a date this way, respondents are more inclined to select the first values to save time: January 1st. It’s usually worth letting users type in the necessary information in a single text field instead. In the Form Builder, you can add a popup calendar to date fields to provide another way to enter a date.

Avoid Multiple Columns

It is natural to try to copy the layout of paper forms since this is what we are (still) most used to. When using paper, we have limited space and so to make full use of each sheet of paper, we use multiple columns.

With a web form however, we do not have these constraints. Multiple columns actually slow down the process of filling out a form since users are moving their eyes and mouse from one side of the screen to the other.

Place Labels Close to Fields

Another simple way to help your users is to place the labels directly above the fields rather than to the side.  Notice that in the left image below, the eyes follow a straight line down the left side of the page with labels on top but not with the image on the right.

Hide Until Necessary

You may have some items that are needed for some respondents but are not for others. You can use what is called conditional questions to only show those items when needed. This option can be found in the Advanced Properties of the section in the Form Builder.

For example, when collecting contact information, you can ask the respondent if they have recently changed their address or phone number.  If the answer is “yes”, an additional question will collect the new contact details.

Answering “no” will take the respondent to the next relevant question. This can keep them from needing to fill out information you already have.

If you want more information about how to improve your forms and maximize your response rate, look at the “Additional Resources” section below.

The FormAssembly team is always working to improve your user experience. We love to hear about how you use FormAssembly and features that you would like to see added in the future. Visit our User Voice Forum, hit us up on Twitter or send us an email.

Some Additional Resources

For more about how to improve the content of your forms see Getting the most out of your forms: Writing compelling forms

For more about how to make your forms user-friendly see  Getting the most out of your forms: Usability Part 1 – in particular the section entitled “Only display necessary information and Use conditionals to your advantage”

For more about how to choose the best format and design for your form see  Getting the most out of your forms: Usability Part 2 – in particular the following sections “Choose the correct input format,” “Use default values when possible,” and “Create meaningful partitions.”

And for some additional things you can do to ensure good responses see:

Getting the most out of your forms: A few more thoughts

FormAssembly strives to make your web forms easier and more effective for all users, not just those who speak English. You can localize your forms for your audience in a few simple steps.

What is Localization?

Localization refers to FormAssembly’s ability to present system messages in a number of different languages. The form itself will always display in whatever language you create it in; localization does not translate the form itself. Localization does, however, enable FormAssembly system messages such as error messages, alerts, and automatically generated text such as “Add another response” to appear in the language of your choice.

Example of localized error messages.

Localizing Your Form

To enable localization for your form, go to the My Forms page and select the form from the list. Then, open the “Display Options” tab. Select the language in which you would like the system messages to appear. Don’t forget to click the “Apply” button to save your changes.

Choose the language in which system messages should appear.

Contributing Translations

At FormAssembly, we’ve enlisted the help of our users in creating ever-expanding language options. Almost all the translations currently available have been contributed by users. Nine languages have been fully translated, another 15 are 80% complete or more, and about 30 at various lower stages of completion. If your customers’ language has not been completely translated, you may contribute by logging in to your account and going to http://app.formassembly.com/translate. Select the language to which you’d like to contribute, then look for the yellow alert sign next to untranslated messages. Once you’ve made the translation, click “Save.” We’ll review the translations and update the settings within a few days.

System messages are translated by users

We look forward to your contribution to the translations and to helping you get the most out of your web forms. If you have any questions or comments, leave them below, give us a shout on Twitter, or leave a suggestion at our UserVoice Forum.

The ability to create custom “Commonly Used Elements” may help you save some of that time. “Commonly Used Elements” are mini-templates for your web forms. To create a custom element, open a form that contains the section you’d like to reproduce. Select the section or element from the Outline, then click the “Commonly Used Elements” dropdown. Select “Create new from selection.”

Select “Ok” when asked whether you want to create a new predefined element, and then you’ll see that the element appears in the “Commonly Used Elements” list.

To edit the title and category of the new element you just created, select “Manage this list.”

You can now use this element just like the other commonly used elements. Simply select it from the list and click the “Add” button.

We love to hear from you, so feel free to leave a comment below, get in touch via Twitter, or use our contact form.

If you haven’t used the Theme Editor, or haven’t taken a look at it in awhile, you might want to check out our latest screencast. This screencast highlights all the major features of the Theme Editor and shows how little visual tweaks can have a big effect on how your form looks on your site.

We’re planning on finding some of the best examples and making them available to all FormAssembly users soon. If you think yours should be considered, let us know via Twitter or our contact form.

This screencast features a simple web-to-lead form with an attachment, but you should be able to get a feel for how the new connector works. We’ll post a more complex example soon.

Set Regular Expression Validation

If you haven’t already done so, create the field whose length you would like to limit. Then, in the Properties panel, select “custom (regular expression)” from the “Format” dropdown. In the Regular Expression text area, type:

^[\s\S]{0,5}$

Change the “5″ to the number of characters you would like to limit the answer².

Don’t Forget the Hint

As with all validation on FormAssembly, this only runs when the respondent clicks the submit button. Until then, he or she won’t know that there is a character limit unless you specify it on your form. A hint is helpful in this instance.

You can also use the Custom Validation Message to remind respondents about the character limit.

See also a discussion in our user forum on using regular expressions to impose character limits.

Got a Quick Tip of your own? Using a FormAssembly form in a unique way? Let us know! Leave a comment, tell us via Twitter, or contact us.

Limiting the number of decimal places is actually quite easy and requires only a little javascript.

Define variables

First, make sure you’ve defined the variables you want to use in the calculation. Give them meaningful names so you can easily remember what they represent. For this example, let’s consider that we’re planning a trip. We know how many people are coming and the total cost of the trip, so we want to find the cost per person and round it to the nearest cent.

Our first variable is the number of people.

Next, define the total cost variable.

Adding the Calculation

Create your calculation field, then determine the formula you need to use. In this case, that will be cost/people. To round to two decimal places, add .toFixed(2) to the end of the formula, so the final formula looks like this:

(cost/people).toFixed(2)

Other Calculations

FormAssembly enables you to use many different calculations on your forms. For more information, see our Support Documentation and our previous blog post on using calculations and repeatable sections.

If you have a Google account, you may have used Google Spreadsheets or Google Sites. FormAssembly now integrates directly with both.

Google Spreadsheets

If you’ve used Google’s native form solution in Google Spreadsheets, you may have found it lacking in key features. FormAssembly web forms offer advanced calculations, conditional logic, and additional third-party integration. Our Google Spreadsheets integration combines the best of both worlds, making it very easy for you to get your data from complex forms in a spreasheet without having to perform a manual export. Once you’ve enabled the connector, submitted responses will be immediately added to your Google Spreadsheet.

You’ll find the Google Spreadsheets connector in the Connectors tab. The Google Spreadsheet connector, like the other connectors, is available only to users who subscribe to the Professional plan.

Google Sites

In addition to this new way to view your responses, we’ve added an additional method for publishing your web form. Google Sites are free, easy to set up and maintain, and offer many design options. With FormAssembly’s Google Sites integration, you can quickly add your web form to your existing site. You can get started by opening the publish tab for your web form and click on “Publish to Google Sites.”

Google Sites publishing is available to all users who subscribe to a paying plan.

Check out our Google Apps Marketplace listing and our next post for more information on Google Apps integration.

We hope these two new features will help you use FormAssembly more efficiently. We’d love to hear your feedback, either here in the comments, at our UserVoice forum, or via Twitter.

Create a Grid Row Section

The table layout is built on grid row sections. Therefore, the first thing to do is to create a new section. Make the section a “Grid Row” type.

Enter your question in the Grid Row section’s “Title” input. You’ll change this for each question.

Create a New Question

Next, create a new question, select the appropriate answer type. For this example, I’ll use radio buttons with the answer choices Yes, No, and Not Sure. Leave the question field blank (you’ve already entered the question in the section title), but add the answer choices. These choices will apply to all the questions in the table.

Be sure that your question is within the section you previously created. (To check, go to the Outline tab. You can drag and drop your question inside the section if needed.)

Copy Section as Needed

Copy this section until you have the number of questions you need. You can do this either by dragging and dropping within the Outline panel, or by hovering over the section in the Preview area and selecting “Copy Section.”

Change the title of each section to reflect the different questions you would like to ask.

Style the Table

In order to make the table format easier to read, you may want to apply some styling. Go to the outline, select your form’s name on the first line and open the Advanced panel. The CSS below causes alternating rows to be different colors. The first row is white, the second is gray, the third is white, and so on.

<style type="text/css">
.wForm form .alternate-0 td{
background-color: #ffffff !important;
}

.wForm form .alternate-0 th{
background-color: #ffffff !important;
}

.wForm form .alternate-1 td{
background-color: #F0F0F0 !important;
}

.wForm form .alternate-1 th{
background-color: #F0F0F0 !important;
}
</style>

The final result will look something like this.

You can modify the colors to match the rest of your forms color scheme by changing the #ffffff and #f0f0f0 codes. For a quick list of color codes, and to generate a custom color, check out this website.

We’ve also created an interactive tutorial within the Form Builder on using grid row sections. You can access it here.

If you have ideas for other tutorials or features you’d like to know more about, let us know via Twitter or leave a comment below. If you have suggestions for new features you’d like to see in FormAssembly, make a suggestion in our UserVoice forum.

Create Repeatable Section

First, you’ll need to create the section you’ll use in your calculation. In Form Builder, create a section (of any type), then open the Advanced panel and check the box to mark it as a Repeatable Section. If you like, you can change the text for the repeat link.

Add Questions to Section

Next, add questions to the section. For this example, we’ll be calculating the cost of purchasing a set of tickets, including tickets of different values. First, I’ve created the question for the user to select the type of tickets she would like.

Once the choices are set, open the Advanced panel and set the value for each choice. The value you set here will be used in the calculation for the total price.

Next, add a Quantity question so the user can say how many tickets she would like. As with the ticket type, be sure to open the Advanced panel and mark the field as a variable and name it.

Add Subtotal to Section

Then, create the Subtotal field. This field calculates the value of the ticket and quantity fields for this particular repeatable section. I chose to make mine a hidden field.

In the Advanced panel, mark the field as a calculated field, and enter the calculation you want it to perform; in this case, we will multiply ticket price times quantity. Make sure to also mark this as a variable in a calculated field, since we’ll be using it to get the grand total.

Create Grand Total Field

Finally, create the Grand Total field. Make sure to create the Grand Total field outside the repeated section. Open the Advanced panel, and mark the field as a calculated field. Simply enter the variable name of your subtotal field; the calculation will automatically add all the subtotal fields together. If you wish, check the “Lock” box; this will make the field appear as simply static text, instead of an input field.

Test Your Form

When your form is set up, make sure to test it to see the calculation in action.

For your convenience, you can access the form here. I’ve also added it as a template in the “Order Forms” category.

We hope you’ll find this new capability useful. If there are other features you would like to see, let us know in our UserVoice forum. We’d also love to hear your comments, below, or via Twitter.