Skip to content

Ja Forms

Webmater resources..

Archive

Category: Ja Forms

Finer Form Analytics with Segmentation

Oct 29
Ja Forms

We are happy to announce the addition of our Segmentation feature to the ClickTale Form Analytics Suite. Previously exclusive to our Visual Heatmaps, Segmentation enables online businesses to optimize their website according to the specific browsing behavior of different user groups. Filling out a web form is usually a key step in the conversion process of every website and, now, that process can be optimized even more. Businesses can segment out the various behavioral patterns to identify what’s preventing different visitor types from successfully completing online forms.

Your website visitors have a wide variety of objectives, and experience your website in many different ways. A web form that may seem easy to fill and clear to interpret for one visitor may seem complicated and confusing to another.

The ClickTale Form Analytics Suite is dedicated entirely to improving your online forms’ performance, ensuring that more visitors are able to easily and effectively complete your forms. The ClickTale Form Analytics Suite is composed of five reports: the Conversion Report, Drop Report, Time Report, Blank Field Report, and Refill Report. These reports reveal which fields on your forms take too long to fill, are most frequently left blank, and cause your visitors to leave.

The new Segmented Form Analytics enables you to differentiate between multiple user groups and the way in which they interact with your forms. So no matter which Form Analytics report you are exploring, you can distinguish between many types of users, including:

  • Visitors of different screen sizes and fold heights
  • Visitors from different locations and who speak different languages
  • Existing customers vs. first time visitors
  • Converted customers vs. abandoned visitors
  • Organic Search Engine generated traffic vs. a paid search, email, or any other campaign traffic
  • And many more:

Let’s take a few examples:

Suppose you wanted to evaluate the conversion process of one of your forms written in English. You know that you have a high amount of international visitors, but you do not know how well your web form performs in each international country. Using Segmentation, you can choose to track only US customers and then compare this report to one tracking only Spanish customers, French customers, or any country you wish to monitor. With the Blank Field report, you may find out that one field is too confusing to fill in for international visitors speaking a language besides English, or that one field does not apply outside of the US. Once you begin encountering discoveries such as these, you can then optimize your form in ways that inevitably facilitate the user experience and increase your conversion rates.

Even successfully converting forms can benefit greatly from Segmented Form Analytics. If you have a high form conversion rate, it would be valuable to know why that small percentage of visitors still abandons your form. Perhaps there is a form element that could be enhanced and would cause these visitors to convert as well? Maybe these visitors are being sent from a specific email campaign that receives Java Script errors and for that reason they do not convert? With Segmentation you are able to instantly check and change your form to reflect what you find out. Your list of why’s and what if’s becomes smaller, and your chances of higher conversions only gets better.

So sign up today and start using Segmentation to learn how to optimize your web forms based on your customers’ varied online behavior.

 

Comments Off none Read more

How to Validate HTML Web Forms with jQuery – The Absolute Basics

Oct 29
Ja Forms

How to Validate HTML Web Forms with jQuery – The Absolute Basics

When publishing a form or application to your website, you want to be sure the information that you receive is standardized in some way. Many form authors design their web forms to require that certain information be submitted before the user can proceed, like a name or a street address, or that form fields contain certain kinds of information, like making sure an email address looks like an email address and that text is not being provided for things like phone numbers. This helps to increase the value of the data you receive.

Using jQuery is often one of the quickest solutions to preparing a script that can validate your form. The HTML used to create the form should include ids or consistently applied class attributes. For the purpose of this post, we are going to work with simple form that seeks to collect a web visitors first name, last name, email address, postal code, phone number, and type of phone. Here’s the form code that does that:

 

<form action=”” method=”post”>

 

<legend>Registration Form</legend>

<label class=”formComponent“>First Name:</label>
<input type=”text” name=”f1″ id=”f1” title=”First Name” value=”” class=”formComponent“$gt;

<label class=”formComponent“>Last Name:</label>
<input type=”text” name=”f3″ id=”f3” title=”Last Name” value=”” class=”formComponent“>

<label class=”formComponent“>Email Address:</label>
<input type=”text” name=”f5″ id=”f5” title=”Email Address” value=”” class=”formComponent“>

<label class=”formComponent“>Zip:</label>
<input type=”text” name=”f7″ id=”f7” title=”Zip” value=”” class=”formComponent“>

<input id=”register” type=”submit” name=”submit” value=”Register Me“/>

</form>

One of jQuery’s main advantages is that it is able to access HTML elements in a much more intuitive way than traditional Javascript and accounts for browser differences in the process, so if you’ve given id and class attributes to your form elements like we have with our example above, you can easily reference and take action upon events that take place when a user is interacting with that element of the form.

You can reference a form element by its class $(‘.aSampleClass’), id $(‘#aSampleId’), tag name $(‘span’), or its position among elements with the same tag name like $(‘a:first’) or $(‘p:second’).

To create an effective script that is not too intrusive to the user’s experience and that helps speed up the process of finding and correcting missing or invalid information, warn the user right away if there is incorrect or missing information in the form. Why wait until the user gets all the way to the submit button if you don’t need to? If the form is long or goes well-beyond the visual fold of a laptop-sized browser, whose viewport offers only about 600 pixels of vertical space, highlighting incorrect fields before the user gets all the way to the bottom of the page.

To check the value of the field right after a user exits it, you will first need to know how to make your script reference the field you desire. For our sample form, we want to make sure the user fills our the ‘First Name’ field in the form. This field has an id of ‘f1′ so we can access it’s value like this:

$(‘#f1′).val();

It may be a good idea for us to write this as a variable since we are likely going to reference this field and its value again elsewhere in our script. We can write a variable that links to the field by id and a second variable to capture and store the value in the first name field like this:

 

var firstNameField = $(‘#f1′);
var firstName = “”

Why just two quotes with nothing between them for the variable firstName? Since when the page loads we want the variable to default to nothing — meaning no first name. The empty quotes in Javascript create what is called an empty string: text with no content.

Now, if the user enters something in the first name field, we need the variable to capture the name. To know that this a name has been given, we have to detect that the user left the first name field, either by tabbing out of the field or clicking elsewhere on the web page with their mouse of touch device. Leaving a field is called a ‘blur’ just like entering a field is called a ‘focus’. To get the value in the first name field, we set up our code to respond to the blur event:

 

var firstNameField = $(‘#f1′);
var firstName = “”;

firstNameField.blur(

 

firstName = firstNameField.val();

);

Now that we’ve got that done, we need to do something with this information. First, let’s check if the user left the field blank. When an input field is blank, its value will be equal to nothing:

 

firstNameField.val() == “”;

Using an if statement, we can set our code to do one thing if the field is empty and another if the field has been filled out.

 

if (firstNameField.val() == “”) {

firstNameField.prev().css(‘font-color’,’red’);
firstNameField.prev().css(‘background-color’,’#CFF’);

} else {

 

firstName = firstNameField.val();

}

The code will now cause our label for the first name field to turn red with a pink background behind it. firstNameField is our variable which points to the field. .prev() is a jQuery method which more or less looks back one element from the element you select. In our form, the <label> tag precedes all of our <input>, which we’ve placed before each <input> field. So, firstNameField.prev() accesses the label for our first name field and the .css() method changes the styles applied to it. .css(‘font-color’,’red’) turns the font red and .css(‘background-color’,’#CFF’) changes the background color. You could use this same method to make the label text bold — .css(‘font-weight’,’bold’); — or increase the size of its font — .css(‘font-size’,’24px’);.

Comments Off none Read more

Ja Forms

Oct 15
Ja Forms

Basic Tips for Designing a Quote Request Web Form

Whether you’re a solo freelancer or the head of a huge web design agency (or somewhere in between), your website often serves as the first point of contact with a potential new client. Displaying an impressive portfolio of work along with a few client testimonials is a great start. But the final piece is key: Your contact form, or as many call it, the “Request a Quote” form, also known as Request for Quotation (RFQ) form or Request for Proposal (RFP) form.

Converting new visitors to sales leads (and ultimately to paying clients) is how we sustain ourselves in this business of web design. With a carefully designed “Request a Quote” form, we can get this process off on the right foot.

In this article, I will discuss some of the factors to consider when designing this key feature of your website. Along the way, we will look at the “Request a Quote” form of different web design shops to get some ideas brewing.

Asking the Right Questions

When it comes to designing a “Request a Quote” form for your web design business, there are no right or wrong questions to ask. It all depends on your specific needs, style, and the way you conduct business. That said, here are some typical pieces of information that you may find useful when designing your “Request a Quote” form. The following discusses some ideas for form fields in your web form.

Contact Information

This one’s obvious. But don’t go overboard. An email address is essential (make it required). Phone/Skype ID, maybe (but make it optional). Street address? I’d skip that for now until you decide to take on the project and draw up the contract. Also, ask for the URL of their existing website if they have one (make this field optional); the vast majority of web design projects are website redesign projects.

Tell Us About Yourself

Determine some information about the people you’ll be working with. Find out what industry they’re in, who their competitors are, who their customers are, where they’re based at, etc.

Specific Needs

This may be up to you to recommend, but some clients may already know what they’re looking for. Perhaps a dropdown menu or checkboxes on things they’re looking to get done (which also shows the things you’re capable of doing). Give them a way to specify which of your services they’re interested in. For example, they may be interested in logo design, getting a CMS set up, and so on.

Timelines

Do they have a specific deadline they need to meet? How much time do they have for this project?

Upload a Document

I haven’t found many sites that include this as a form field, but I decided this would be a helpful thing to add on my own “Request a Quote” form so that requestors can include Word documents or images with their form submission. Additionally, some clients may already have their project requirements written out in a document; this gives them the option to attach it to their quote request.

The Budget

Whether or not to talk about budget so early in the process is a tricky question. The initial reaction for any savvy negotiator is to shy away from revealing their “number” too soon. But in the web design industry, the budget question is a real concern for everyone involved.

The cost of web design varies wildly across the spectrum. You can get a template-based design for under $100, hire a mid-range design shop for a few thousand, or go the large agency route where budgets go from tens to hundreds of thousands of dollars. This is why I feel it’s important to include the budget question in your “Request a Quote” form. Get some ballpark numbers out in the open early in the process to make sure you and your potential client aren’t wasting each other’s valuable time.

Considering User Experience

Designing for a particular user experience is always important in any web design project. Designing your “Request a Quote” form is no different. A key factor to consider here is how much time and effort will you require of your visitors who wish to request a quote.

I prefer the “quick and simple” approach where I gather just a few — but very important — pieces of information, just to get the ball rolling. These can be basic, open-ended questions about their business, their goals, and their budget. Once I receive this initial request, we schedule a time to chat where I aim to flesh out all of the details I’ll need in order to devise an accurate proposal for them.

The Foundation Six website features a short form, asking only the essential questions.

Keeping the “Request a Quote” form quick and simple avoids overwhelming the would-be client and makes them feel comfortable and productive. These are positive emotions for our potential client to come away with after their first interaction with us (even if this interaction happens over the web). This in turn makes them more likely to end up hiring us for their project.

Copy, Personality, and Responsive Web Forms

Your “Request a Quote” form is the very first step in a personal relationship between you and your potential client. Infusing your own personality into your form can make it feel warm and inviting.

It’s a good idea to keep all of the copy throughout your site consistent and authentic. This extends to your contact page and even within your “Request a Quote” form itself. A few well-crafted pieces of copy can help the visitor along as they progress through the contact form.

Here are a few web forms with great personality.

Bold Perspective

The agency has a conversational approach which emulates the sense of engaging in a dialogue.

Request a Quote Form vs. Project Worksheet

Sometimes, the “Request a Quote” form is blended (or replaced) with a project worksheet. What’s the difference, you ask?

In my opinion, requesting a quote is a preliminary stage of the process that seeks to just get a feel for whether or not the parties are the right fit for one another.

A project worksheet, on the other hand, tackles more specific, targeted questions about the project — many of which are relevant only after the contract is signed and the project is underway.

Here are a few examples of the project worksheet being incorporated into a web designer’s site.

Bold Perspective

Bold Perspective has a conversational and responsive interface that takes the visitor down several paths depending on their specific needs. It’s a very creative approach and actually fun to fill out!

Resources for Designing Quote Request Forms

Here are a few tools which may prove useful to you as you design your “Request a Quote” form:

  • FormStack — allows you to quickly create any type of web form with their easy to use drag-and-drop form builder
  • Gravity Forms — If you have a WordPress site, I highly recommend this premium forms plugin
  • Best Practices for Hints and Validation in Web Forms – Some ideas for error-checking and data validation of your “Request a Quote” form
  • 25 Stylish Examples of Web Forms — Here is a collection of web form designs for inspiratio

Wrapping Up

In the end, it’s up to you how you wish to design your “Request a Quote” form. It’s an important part of not only your website, but also your business as a whole. It deserves careful consideration, testing, reassessing and tweaking until it does what it’s intended to do: Win you more business and have happier clients.

1 Comment none Read more
Ja Forms
Copyright © 2012 Ja Forms Promoted by SEO Link Building top