Capturing Campaign Data

We added a new content type in the Form Builder to automatically capture referrer information (where visitors are coming from) and other campaign-related data (what ad they clicked, email they read, etc..). Here’s how it works:

Open your web form in the Form Builder, and in the “Add Content” menu, go to “More…”, “Analytics”, and click “GA Referrer Tracking” [1].

This adds five hidden tracking fields to your web form. Save, publish your form if needed, and you’re done!

A few things you should know:

Here’s what each tracking field does:

source

Indicates the source of the traffic (often a domain name)

campaign

For paid traffic, this will contain the AdWord campaign name. It can also show organic for traffic coming from a search engine, or referral for traffic coming from another website.

medium

Indicates a method of delivery. If your email marketing is integrated with Google Analytics, you could see email here. Other possible values are CPC for paid traffic, referral and organic.

keyword

For Adword traffic, this will show the keywords that triggered the ad.

content

For referral traffic, this typically indicates the address of the page that referred to your site.

Also,

• Note that Google Analytics records the tracking data the first time someone visits your site – and will keep it for up to six months. If you want to test this feature, make sure to clear your cookies first.
• If your form is hosted by FormAssembly, you need to make sure that cross-domain tracking is correctly configured. To do so, add this bit of code to every page that includes a direct link to your form, or uses an iframe to display your form:

  <script type="text/javascript" src="//tfaforms.com/js/ga_crossdomain_tracking.js"></script>

That’s all. Enjoy your new data, and let us know if you put this to good use!

FormAssembly offers several ways to publish a web form. The most convenient one, is to simply let FormAssembly host it for you, since it just works out-of-the-box. However, since the form is not technically residing on your website, it’s won’t be included in your traffic report.

To fix this follow these 3 easy steps:

Setup the Tracking Code

1. Open your form in the Form Builder and add the ‘GA Tracking Code’ element, from the ‘Add Content’ menu

2. With the tracking code now present in your web form, you need to configure it with the desired Google Analytics profile ID (visit your Google Analytics account dashboard to obtain this value).

Click the Google Account ID field [1], click ‘options’ [2], then ‘advanced options’ [3] and under ‘default value’ [4] enter the ID [5].

3. Save your form and you’re almost good to go…

Enable Cross-Domain Tracking

So far, we’ve made sure that traffic to your web form will be reported in the desired Google Analytics profile, however, there is one more thing you need to do to make sure that the Google Analytics session carries on to your form and all tracking information is correctly measured.

For every page that includes a direct link to your form, or uses an iframe to display your form, add the following code:

<script type="text/javascript" src="//tfaforms.com/js/ga_crossdomain_tracking.js"></script>

This little piece of javascript code insures that cross-domain tracking is correctly configured.

As a reminder, these instructions only apply if FormAssembly is hosting the form for you. If you published the form using the copy&paste method (or the publishing REST API) and tracking is otherwise already set up on your site, you don’t need to do anything.

If you’re unsure about the instructions above or have any questions, don’t hesitate to contact us. We’re always happy to help.

Negative feedback happens. Sometimes we can’t do much about it, besides issuing a refund or recommending a better suited alternative. We never, however, bury our heads in the sand and pretend that the user “just doesn’t get it.” If there’s one thing we ought to do right – 100% of the time – it’s to allow people to quickly and easily create a web form.

Worse than this negative feedback would have been no feedback at all. Our frustrated customer, Maya, could have just left without a word. Instead, she gave us a way to engage.

Luckily, I happened to spot her tweet right away. I took a deep breath, gathered my thoughts and then replied. Maya graciously agreed to give us a second chance – and later suggested (as a savvy marketer) that we record our conversation and tell the story.

We routinely do usability tests and investigate support requests to better understand how different types of people approach our form building tool. People have different expectations, shaped by their prior experiences with software, and it’s our job to accommodate that. I was pretty sure that if I could help her get started, she would have no trouble moving forward on her own. And if not, at least I would learn something about our product on the way.

We set up a web meeting, during which Maya first explained what she was trying to achieve and then, very helpfully, walked me through her thought process as she interacted with the application. We then proceeded to talk about the features she needed as I demonstrated how to set them up in her form.

The next morning – Maya updated her feedback.

“Awesome customer service experience with @formassembly. Giving the 121 training and the product 2 thumbs up.”

I wish we had more time to help out every customer that way. A happy customer and a public endorsement is great. Getting another insight into the mind of a customer – thanks to an improvised usability test – makes it really invaluable.

The bottom line is that our customers invest more than just their money. They also invest their time and attention, and we are mindful to not waste it. If you’ve tried our service and had a less than stellar experience, please do let us know – chances are we can make it work for you – or find a way to make our product better.

As we improve on the previous iteration of our form building tool, we’re changing a few more things that our existing users might find confusing at first. Here’s a run down that should help you get re-situated quickly:

1. The Form Name

We’re now making a distinction between the form name and the form title. The form title is optional and, when set, displayed at the top of the form, while the form name is used throughout the application – and visible to the form owner only.

This change allows you to choose more meaningful names for internal use, independently of what is visible on the form.

To edit the form name, go to “Properties” and “Form Name” [1].

2. Conditional Questions

If you edit an existing form in the new Form Builder, do not be alarmed if your conditional elements are visible in the design area. This is normal. Hidden form elements are now displayed so you can edit them easily. To see your form as your respondents will see it, use the “Preview” option in the “View” menu.

In the design area, conditional elements are shown as semi-transparent, with a ‘conditional’ tag on the side.

3. Grid and Inline Sections

To simplify our interface a bit, we removed the “Grid” and “Inline” section types from the previous Form Builder. You can now use groups or fieldsets to achieve the same result.

From the “Add Content” / “Section” menu, add a group or fieldset. Click the “Options” icon to access the sidebar and navigate to the “Presentation” panel [3]. There you can choose how elements in the section should be laid out: “inline” and “grid” would give you the same behavior as the old grid and inline sections.

4. Commonly Used Elements

What was previously called “Commonly Used Elements”, or “Predefined Elements”, are now listed in the “Add Content” menu, under the “More…” category. From there, you can access any predefined element that you’ve previously created.

To create a new predefined element, build it first in the Form Builder, select it in the preview area, and, in the sidebar, click the “Add to Predefined Content” option.

That’s all for today. We hope that these short blog posts helped you get up and running more quickly with our new Form Builder.

We still have to cover a number of brand new features, so subscribe to our RSS feed or follow us on Twitter to be notified when the next post is published.

In the meantime, click here to play with the form builder.

Like many CRM tools, Capsule provides you with a pretty generic Web-to-Lead form – so let’s see how we can replace it with a FormAssembly form and still get your leads sent to CapsuleCRM.

1. Let’s grab a CapsuleCRM Form Key: Log into your CapsuleCRM account, go to Settings – Integration and Website Contact Form Integration. Make a note of the Form Key value – we’ll need it later. You can disregard the remaining instructions on that page.

2. Open the CapsuleCRM Contact Form template in our Form Builder. You may remove fields you don’t need, or just click save and head to the Connectors tab to finalize the setup. Click “configure” next to “HTTP Connector”

3. In the connector setup screen, enter the Form Key (from step 1.), set the “run mode” to “interactive” at the top of the screen, and save.

There is no step 4!  Your FormAssembly web form is now integrated with CapsuleCRM.  Any new lead submissions that come into your FormAssembly form will automatically be sent into your CapsuleCRM account as new leads.

Note: Integration with CapsuleCRM requires a FormAssembly Professional account.

We’ve seen how to do the basic editing and how to edit field properties. We’re now going to look at how you can reorganize your web form by deleting, copying or moving form elements.

The Outline

If you’re familiar with the older version of our form building tool, you might remember that those three operations could be done with the Outline.

The outline is still here, and still a great way to work through long forms. You can use it to reorder form fields with drag&drop, or to quickly jump to any part of the form.

It’s no longer visible by default though, since all tasks that used to require the outline can now be done directly in the preview area. To show the outline [2], go to the “view” menu [1] and click “outline”.

TIP: Your preference is automatically saved, so next time you open a form, the outline will be visible.

Copying & Deleting

The copy option [3] is now available in the sidebar – which can be accessed by selecting a form element and clicking the blue “options” icon. In some browsers, you can also use a right click in the preview to bring up a contextual menu with the “copy” option.

The delete option is available in the sidebar and on the floating toolbar.

Moving Elements

The sidebar [3] offers two additional options to move the selected form element up or down. You can also simply drag&drop from the preview to any new location in your form. Check out the screencast below for a quick demonstration.

Play “Moving Form Elements” Screencast (52s)

If you are wondering how to place fields side-by-side, we’ll cover that and more in the next post. Subscribe to our RSS feed or follow us on Twitter to be notified when it is published.

In the meantime, click here to play with the form builder.

Today, we’ll show how to access and edit every property for fields and sections.

A single click on any form element in the preview will place the element in “edit mode”, revealing the floating toolbar [1].

In this mode, as we previously covered, you can edit the text directly and set the ‘required’ validation rule. For any other feature, click the ‘options’ button [2] to reveal the sidebar [3].

TIP: If you find yourself needing the sidebar often, you may want to check the “keep the sidebar open” box [4]. This will save you the extra click on the “options” button.

In the sidebar, you’ll find all possible configuration options for edited elements: validation rules, conditional rules, calculations, etc.. A click on each category will expand the relevant property panel [5].

Some of the less common options are hidden unless you check the “show advanced features” option [4]. Again, once you’re comfortable finding your way through the many features offered by the Form Builder, checking the “keep the sidebar open” and “show advanced features” boxes will be a big time-saver as you work on your forms.

Click here to continue to “Part 3 – Reorganizing your form”, or try the form builder right away.

The new interface is a radical departure from the previous version, but it’s simple, intuitive, and very easy to learn. Let’s start with the basics: Adding form fields and editing field labels – in 60 seconds.

The “Add Content” menu [1] lists everything you need to build a form.

The preview area [2] is where you lay out your content and do most of the editing.

When a form element is selected for editing, a floating toolbar [3] appears, giving access to basic formatting options. You can edit text directly, and when finished, another click anywhere on the screen will apply your changes and remove the toolbar.

Here’s a short screencast showing things in motion.

We have much more to show you, so check out Part 2 – Access and Editing Field Properties.

Throughout the years, we tinkered with it a great deal – addressing usability issues and adding features – but we reached a point where we needed a fresh start. So 8 months ago we started planning out an entirely new version.

Rebuilt from the ground up to provide a better user experience, faster form creation, and exciting new features, this new Form Builder is designed for the latest technologies on the latest devices (HTML5 on mobiles, tablets, PCs).

Today, we’re ready to make it publicly available for the first time.

A brand new interface

One of the most noticeable aspects of the new form builder is that editing happens in the preview (there’s a cute acronym for this: WYSIWYG). You can type text, drag&drop content and resize elements directly. It’s like working with a word processor. It’s intuitive and very fast.

Another thing you might notice is the clean and streamlined interface, despite the wealth of features. We’ve iterated through many experiments and usability tests to ensure that we only show the relevant tools for a given action. The two features that need to be obvious to first-time users are highlighted in blue and orange: ‘Add Content’ and ‘Save’. Other features are progressively revealed as content is added.

We didn’t forget our expert users either. You can use keyboard shortcuts, set preferences to save clicks, and use the outline to quickly navigate through even the largest forms.

New and Improved Features

Here’s an overview of the new features and other improvements. We’ll cover them in more details in the next few posts.

General Editing

• Rich-text editing on field labels, section and form titles.
• Easy resizing of labels and inputs.
• Reorganize your form with drag&drop.
• Undo/Redo on every step.
• Recovery from auto-save.
• Preview your form with iPad and iPhone screen emulation.

Field-level features

• New validation rules: time, ranges, url, length.
• Input auto-formatting with masks.
• Placeholder text support.

More layout options

• Likert scale / matrix questions.
• Easier multi-column layouts.
• Hint text can be placed below the input.

Form Management

• Form title and form name are now separated. You can have a meaningful name for internal use, and show something else on the form.
• Field labels can be hidden. This is useful when the label is not needed on the form, but you need something to work with when configuring post-processing features.

Better internationalization

• Support for right-to-left languages directly in the Form Builder.
• Preview form with localized messages.

Finally, we’ve also improved the inline help and templates can be accessed directly from the Form Builder. There are a few features that didn’t make the cut for this release. We’ll mention them in a blog post so you know what’s coming next.

We’re excited and impatient to get your feedback. Please take a minute to fill out our survey after you play with this new form builder for a little while.

Thank you and happy form building!

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