Claris Platform: Use Case Web Form

In our last article on “Use Case Assessment“, we worked with Arbor Tree Care Services to assess the Claris platform for implementing their use case. Although there are some concerns about what may or may not be possible, they are going to try out Claris Studio for creating a web form for customer job enquiries.

Planning the Form

Regardless of what you may see in flashy marketing presentations, it is important to plan out what you want before jumping on the tools. Arbor Tree Care Services can identify with this — they don’t just climb up a tree and start cutting it down!

From our use case, we identified the following data needed to be able to properly and efficiently process customer requests:

• contact name
• preferred contact method — phone or email
• location of the work
• type of work required — with other details for specific work (e.g. tree height/girth for tree felling)
• suggested time frame for work (e.g. emergency, this week, next month…)
• any relevant comments (with examples e.g. site access, known issues)
• how they found us

We also identified some specific issues with previous form submissions that we need to address:

• lack of detail about work requirements — free text is not getting the details we need
• too much information required — e.g. we don’t need a full address on enquiry (just a location)

Form Structure

We are going to break the web form into a number of sections. This will help by:

• not overwhelming the customer with a barrage of questions to fill out
• asking relevant questions for the work required

The first page is pretty simple. We will collect contact information and basics of the job. Best tools for the job? Simple pen and paper! This is what we came up with:

Just as it is important to plan, it is also important not to overthink these things!

We can see a few requirements in our plan:

• setting up a logo and heading along with brief welcome instructions
• text fields
• choice of contact method
• conditional appearance of fields based on desired contact method
• list of job types to select from
• next page will be conditional on the work type selected
• multiple pages for work type criteria (we should plan those too)
• common final page to wrap up the job and then thanks for submitting

The important thing about this sort of planning is that we are not distracted by the tools. We are planning the form to fit our needs, not letting the tools drive our design. At this early stage, we can see some advantages of our design:

• minimal data required in the first instance to present a simple work request
• present either email or phone field by choice
• provide a selection of work types to classify the request (not just “trim some trees”)
• present questions relevant to the work requested (no irrelevant fields)

Now we can get into Claris Studio and start building the form. This is where we will see if the tools will meet our needs.

Building the Form Prototype

It is important to remember that we are not building the final web form here. This will be a prototype that we can test with selected users, get feedback and refine. Then we might just use the refined prototype to build the final form from scratch. This approach means that we are never completely wedded to our form — we can ditch it, start again, or walk away.

Start Page

So we open Claris Studio and get started with a new Form view. We open the Start Page and start building from our plan. In fairly quick time, our Claris Partner developer helps us to put together the first page of the web form. Working in Developer Mode, we can add objects such as logos, text and fields. We can configure fields such as the type of work choices. We can also apply conditions for the phone and email fields to appear with a selection of preferred contact method. There are some issues with some lack of options available for positioning objects on the page but we will push on.

We can preview the page as we work to see how it would appear to a customer. Our page has a header that contains our logo and some text. We have set this header to repeat on all pages. There is a limited number of theme colours but fortunately for us, green is good.

We have added a large copy of the logo to the Start Page as well as some welcoming text. The text can be formatted with mark-up language easily applied in an editor.

There is both a phone and an email field but only one appears according to the selection of a preferred contact method. Nice!

Type of work is a pop up list. The user can only select one choice there so we might need to consider using checkboxes if a customer might need more than one service. But that will also affect the control of following conditional pages.

Notice how there is a blank space beside last name? This was done by adding an empty text object as the third object on the row. Each row of the form can have a maximum of three objects. This is the only way to have any control of object size on the page. A bit limiting.

With a bit more playing around, we came up with a better (?) layout. We also made all the fields on this page required. We don’t like the position of the email (or phone) field when it appears but we already have three objects in that row and have no other options for positioning or sizing.

Next Pages

So now we move on to the next page the user will see. The Start Page (above) has a Submit button, but that will change to a Next button when we add a page in the flow. In the following screenshot, you can see that we have added three pages for job types (tree removal, stump grinding, mulching) and one for job comments.

While it looks like a linear flow, we will set up conditional logic to flow via the orange arrows marked. For example, if the user chooses stump grinding, the Next button will jump directly to page 3. The Next button on page 3 will jump directly to Job Comments (page 5). At least, that is the plan!

The start of this conditional path is set on the Next button on page 1. At this stage, we are accounting for three job types. The others will jump directly to job comments. We set up a condition for each possible option for type of work.

Since the type of work field is required, it will always have a value when the user click the Next button. So they will jump to the appropriate next page. All conditions are evaluated in order. The first condition that returns “true” is actioned and others following are ignored.

There is no interface option to re-order existing conditions. Feature request!

So we move onto the next pages and add fields specific to each type of work. Claris Studio has automatically added Previous and Next buttons. The Previous button will respect the ‘previous’ page. So if we went from page 1 to page 3 (stump grinding), Previous would take us back to page 1. No programming required. Nice!

The condition for the Next button on the Tree Removal page needs to take the user to Job Comments. We can do this simply based on a required field (height of tree) being not empty.

The Stump Grinding page has some interesting conditional fields. The visibility of the fields is driven by how many stumps are selected. Most jobs will be 1–3 stumps but we have an option for more than three.

• choose 1 (stump) — single field to enter the stump width
• choose 2 (stumps) — fields to enter the widths for two stumps
• choose 3 (stumps) — fields to enter the widths for three stumps
• choose More than 3 — single field to enter the widths for all stumps

Nice smart interface for data entry.

The conditional visibility for stump 2 width is shown below. The Action chosen means that the field is shown when the stump quantity selected is either “2” or “3”. It will not be visible if the user has selected “1” or “more than 3”. The two conditions are a logical OR. This means that the field will be visible when either condition evaluates to true. Claris Studio provides an interface to construct complex logical conditions using AND and OR.

Exercise: see if you can guess what the Show conditions are for each of the (four) width fields

The condition of the Next button on the Stump Grinding page is based on the required field (stump qty) being not empty. It takes the user to Job Comments.

Job Comments

This page will give customers fields to specify when they would like the work done and anything else relevant to the job. It will be the last page every customer visits before submitting their request. As the second last page in the flow, Claris Studio automatically provides Previous and Submit buttons.

Submit

The Submit button takes the user to the last page in the flow — the Confirmation Page — where we have a message thanking them for their job request and assuring them that we will be in touch soon. This page does not accept any fields — just text block and image objects. At this point, the data is written to the Claris Studio table and cannot be edited by the customer.

We could add a comment advising the customer to Submit their request or use the Previous button to make sure everything is complete. There is no easy option to display a summary of their input before submitting.

We may be able to use a calculation field on a summary page. This will need more time to investigate.

Testing

Now we have our flow complete, we need to test form submissions. We will look at the general user experience of completing and submitting the form.

Data Entry

Generally good.

An annoyance with the phone field — on field entry it prompts with +1 suggesting that the number must be entered in international format. But there is no option for international codes such as +61 for Australia. You need to know and manually enter that, then your phone number and Claris Studio will format the number entered. This is a deal breaker for customers and would need to be changed to a short text field until Claris fix the problem.

Number fields (such as tree height) require a number and will remove any other characters.

It was easy to complete the form and, because only relevant fields were displayed, pretty quick to move through and submit a request. This will be great for customers.

Required Fields

Where fields were set as required, this worked well. If the user clicked Next, they were not able to proceed and Claris Studio marked required fields with “Required” in red. Also there was a message beside the buttons “Looks like there’s missing or invalid information”. Nice.

Page Navigation

Conditional page navigation worked well based on the job type selected on the first page, and then for skipping to the Job Comments page.

However, there were issues with the use of the Previous button. While it navigated to the correct Previous page, all data on that page needed to be re-entered in order to go forward again. If not done, Claris Studio thought the data was invalid. This was exacerbated on the Mulching page where Claris Studio thought that a hidden field needed to be filled in. This seems to be a serious bug with Claris Studio. Customers may not use the Previous buttons, but if they do, they will be very frustrated!

Submissions

Data submission worked well. The data was available in Spreadsheet view in Claris Studio and would be ready to be processed in the office. The structure of the form means that all data relevant to the job will be collected — a great improvement on the previous form.

Conclusions

This is a reasonably complex web form and it did take some time to build and test. But we found a lot of nice features available to make the user experience a good one.

There are a few things that came up in testing that may currently stop us from using the Claris Studio web form. More testing and modifications to the form are required. If those things can be resolved, we need to look at next steps:

• how do we add the form to our existing website?
• how will staff be notified of a new submission? Can this be automated?
• how will jobs be processed and additional data added?

Would you like to try it out?

We have added a link on our uLearnIT website for you to try out the form we have created. if you have any comments or suggestions, please comment on this post. Here is the link: Arbor Tree Care Services