Claris Studio: Edit Web Forms
In our last article, Claris Studio: Create And Share Web Forms, we looked at the basics of creating a web form and sharing it with the public via a web URL. Now we move on to editing the Form provided, looking at the tools and features of Claris Studio Forms.
Just a reminder that Claris Studio is rapidly evolving, but we will try to keep this article updated as tools and features change.
Updates have been added 2 May 2023.
Creating a Form
As a manager in Claris Studio, you can create a new View that is a Form. This is done using Add Views > New Views for an existing Hub.
If the Hub already has Views, you can Select Data for Form. Either:
- Blank — creates both Form and Spreadsheet View based on new table
- Choose “Views with same data as <form name>” — creates only Form View based on existing table
Create a new Form for an existing table from a Hub:
- click Add Views
- click New Views
- click Form (view)
- click Next
- select “Views with same data as <form name>”
- click Create
When we create a new Form in this way, Claris Studio creates a two page form — Start Page and Confirmation Page. There are fields from the existing table on the first page.
With any Form, the first thing you need to do is to give it a meaningful name. The default name provided by Claris Studio is shown in the header row displaying the Hub name and other Views in the Hub. The form name can be changed there — click and choose Edit View Name.
Holiday Planning Example
The example we will use here is one where we are setting up views for our holiday planning. The Form allows our whole family to suggest things for planning our holiday and categorising them as travel, accommodation, activities or expenses. They can assign a budget to an item as needed.
The Form will provide us easy access to add a new record when it occurs to anyone. This will be convenient as we will not have to sign in or use an app — just have an Internet connection and our phone.
Our Form will provide simple and quick data entry, with options for more details. It is a very good idea to have a plan of your new Form in your head or preferably on paper.
Edit Page
When we have the Form View open, you see the page flow (in this case two pages). You can easily click to rename each page, and add a new page in the flow.
Once you have set up the pages you need for your Form, it is easy to edit the first page — hover over the page to see Edit Page, and click.
Page Settings
The cogwheel icon at the top right of the page being edited is for Page Settings. The settings are quite basic — Theme Colour and Required Field Objects.
There are four theme colour choices. This will affect the colour of the header and the buttons at the bottom of the page.
There is a checkbox to instantly set all field objects on the page to required (not empty). This saves you having to individually set each field. If most of the fields on the page were required, you could turn on all required and then turn off the optional fields.
The three horizontal dots (meatballs) icon provides either Delete Page (if the Form has three or more pages) or Delete Workflow (for two pages, deletes the entire View).
Field Objects
A page holds objects. Objects are either Field Objects or Static Objects.
New objects can be added from the Add Object widget at the top of the screen. Simply drag an object from the widget onto the page and the widget will close. There is an option to “pin” the widget to Keep list open in a movable floating window.
If you position the mouse beside or between objects or rows, a green line with a + symbol also allows you to add objects in the clicked location.
Adding a Field Object from the widget will create a new field in your table. You can drag existing fields onto a page from the Sidebar > Fields list. Note that some fields will be greyed out because they already exist on one page of the Form. Currently, the limitation is that any one Field can only exist once across all pages of a Form.
To start, all the field objects are arranged down the page, one per row. Fields can be dragged around on the page. They will rearrange and resize according to where they are placed. You can place up to three objects (Field or Static) per row.
There is currently no way to custom-set the width of an object — it will either be full, half or one-third column width. There are no spacer objects but you can use an empty Text Block to force the resize of an object on a row (see below, the Budget field is between two empty text blocks).
When you hover over or select an object, it will display various controls and tools. The number and nature of these will depend on the object itself.
Most of the controls are annotated in the screenshot below:
- Label — the field label shown in the form to explain the data required (initially the same as field name, edit in place)
- Placeholder text — text displayed in an empty field to further explain what should be entered (edit in place)
- Vertical resize — available for some field objects (Long Text and Attachment) to drag to adjust vertical size of field
- Lightning (icon) — Action Engine to set conditions for hiding or showing field object
- Cogwheel* (icon) — field options depending on field object type — Required status (all fields), list control (Drop-down), signature area and pen colour (Signature), date and time format (Date, Time and Timestamp), decimal format and currency symbol (Currency)
- Meatballs (icon) — Duplicate (creates new field), or Delete field (from the page, not from the table)
- Field type* icon — signifies the field object type in an icon (as per Add Object widget list)
- Field name* — name in the table
- Options for Checkboxes and Single Choice fields — add, edit (direct), delete, reorder (drag)
* Update — Properties Panel
There has been an update to the access to field options, field type and field name. These have been moved to a Properties side panel. The panel provides access to options for the selected object type. As can be seen below, there are options for a Date field to change the field name, display label and placeholder; set the field to required; and set the date display format. The Field Type is displayed here but cannot be changed. The Properties panel can be toggled open or closed using the properties button at the top right.
Another update is that fields on the page have an area for “Add a description text” (sic). This is visible when you click a field and can be used to add additional information about the field to help the user e.g. suggested input. Click into the area in the field object to enter a description in place.
Object Actions
The Object Actions (lightning icon) needs a little more explanation. This is used to conditionally show or hide a Field Object, static image or text object. Field Objects can also have a conditional value set.
In the above example, we have determined that when the Tag field is Physical Activity, the Budget field will be hidden. Our logic is that physical activity (going for a hike or a swim) will never cost us anything so we don’t need a budget. We will now Apply the condition.
To set up, we first choose an action — Hide this object or Show this object. Then we can add multiple conditions to the action using + And When, and use the + Or When option to add alternative sets of hide conditions. Actions can be removed, or disabled by setting Action to None.
A new feature is that conditions can be created based on a calculation. The calculation engine of Claris Studio requires a whole new article.
This powerful feature allows you to create smarter forms where objects appear or disappear depending on responses in other fields.
As of the 15 Dec 22 update, when you conditionally hide a field object in Form and List-Detail views, objects beside and below adjust to fill the space.
Also note that if a field is set to Required, and it is hidden by an Action condition, the user will not be required to fill it in. Makes sense but the Claris engineers did think of that scenario.
When working with Object Actions for Field Objects, there is an additional section to Set the value.
In the above example, the Budget field will be set to $0 when the Status is set to On Hold. The logic here is that if an item is on hold, it should not have a budget. As with Show/Hide, any condition can have multiple parts (AND), and there can be multiple conditions (OR).
Static Objects
There are three static objects available — Text Block, Image and Header.
Static Text Blocks are added to a page to provide more information or messages to the user. As with field objects, they can be dragged around and will resize when placed next to other objects in a row.
Click on a Text Block to display options with three icons:
- M — opens a text editing dialog with buttons for rich text formatting
- Lightning — Show/Hide object conditions
- Meatballs — Duplicate or Delete
Text alignment is in the Properties panel when you select the text block.
Markdown is a lightweight markup language that you can use to add formatting elements to plain text documents. Simply type text directly in the Text Block or in the Text Editor, and use Markdown symbols to format. As markdown symbols are used, the text is formatted. For example
- # Heading level 1
- ## Heading level 2
- You can have **bold** text or *italicised* text or ***bold and italic***
- > Create a block quote
- >> And a nested block quote
- * bulleted list item
- *** for a horizontal rule
There is good support for Markdown. Have a play and see what works.
Static images can be added to a page for information or design. This is different to providing an attachment field for a user to upload an image.
- Add an Image Object from the widget, or
- Drag an image file directly onto the page.
The Properties panel provides options for vertical and horizontal Alignment of the image in the object and whether it Contains or Fills the object. As for Text Blocks, there are icons for show/hide conditions (lightning) and for Duplicate and Delete (meatballs). There is a resize icon at the bottom of the object to resize vertically.
A page can have a Header — an area at the top of the page.A page can have a Header — an area at the top of the page.
Click in the Header to view options in the Properties panel:
- Repeat the header on all pages. If turned off, each page has an independent header.
- Keep at top when scrolling — the page will scroll behind it as the header stays in place.
- Set Opacity to 100% (opaque) or 80% (slightly transparent).
- Background can be a colour (set by the theme) or an image.
- Set a Logo (image) and align left or right
- Two text sections — Title and Subtitle — display or not. When displayed, all text can be edited in position in the header.
There is a resize icon at the bottom of the header to resize vertically.
Page Buttons
All pages except the last have buttons at the bottom right. Button colour is controlled with the Page Setting Theme Colour. However, the text and position cannot currently be customised. The buttons are Next, Previous and Submit and are provided automatically as required.
The Next button will usually go to the next page in the workflow; the Submit button will usually go to the last page. However, you can control the workflow with Jump to Page options using an icon below the button (or below the page when looking at the entire View workflow).
In the example above, we have set a condition that, when true, will jump to the All Done page (skipping one or more pages). If the condition is false, the button behaves as normal.
You can add multiple conditions. These are evaluated in order listed with the first one evaluated as true being run (subsequent conditions are ignored).
This feature allows you to design forms to skip certain pages based on the answers to questions. For example, if a user answers that they do not own a car, then skip the car insurance page.
The page workflow is strictly linear. Hopefully there will be branching in future.
Back to Our Example
Phew! That is a lot of features available to set up a web form. Claris Studio is a very young web app but it already has a lot of power just in the Form Views.
So about our example? We have used a lot of the features above to set up a three page form. Before we share it to a public URL, we should test it to see how it works on different devices — a Laptop (1024px), Tablet (768px) and Mobile (360px).
Claris Studio provides an Open option to view the form with Developer Mode off.
Curiously, Claris have removed a previous option to display in various sizes and to test dark mode. Obviously you can test by enabling the public sharing and opening on different devices. But it is not as simple.
Here is our completed Form in workflow view:
The web form created by Claris Studio is responsive — it will resize and reorganise depending on the available screen size.
All that is left is to set up sharing as per our last article. And wait for the data to start rolling in from the family!
How easy and powerful is that?
