The Form Builder

Have more questions? Submit a request

The Builder is a fresh look & improved builder experience to help you build a form & get to value faster. 

The Builder

 

Builder.png

Accessing the Builder

When you select Create New in the upper right corner of the Forms page, you will be given the option to start a blank canvas in the Legacy Builder by selecting Start or select GIVE IT A TRY on the right side of the screen. This will launch the Builder. The Builder will always be available when starting a new form from scratch.

Note

If you have Web Forms, the Create New button is a drop down menu and you will select Mobile Form to access the Builder.

Path_to_Builder_BETA.png

Form Building Basics in the Builder

The Builder is both fresh and familiar at the same time. Build a form fast with these new and existing functionalities.

Name Your Form

Renaming_Form.gif

The name of the form will automatically populate with '[User's Name] New Form.' Hover over the area to reveal the title box, highlight the placeholder title and either immediately start typing the new title or type backspace/delete. 

Configuring Screens & Tables

Screens are sections in a form like Customer Information, Employee Information, Work Completed, etc. 

With tables, users can enter the same row of information multiple times. For example, an inspection checklist may have multiple rows for rooms and within each row, a set of inspection values. For a time card, an employee may need to enter start time, end time, and lunch for every day they worked that week. A table is a great solution for these and many other use cases.  

There are several methods for adding a screen or table to your form in the Builder:

Method 1:

Select Add Screen or Add Table located directly under a screen on the workspace. 

Add_Screen.gif 

Method 2:

Select Add Screen or Add Table located in the Screens preview panel on the right.

Add_Screen_2.gif

Method 3:

A unique feature of the Builder is the ability to create a new screen in the middle of an existing screen. Hover slightly to the right between two existing fields and a + sign will appear for you to select Screen Break. You can create a screen break and the next field(s) will be moved to a new screen. 

Add_Screen_3a.gif

Method 4:

Hover slightly to the right of the space between screens and a + sign will appear for you to select Add Screen or Add Table.

Add_Screen_3b.gif

Naming Screens & Tables

Method 1:

Within a screen in the workspace, select the ‘Type screen name’ or 'Type table name' placeholder text to add a screen or table name and press enter or remove your cursor from the screen name text box. 

Naming_a_Screen.gif

Method 2:

Within the Screens preview panel, select the ‘Type screen name’ or 'Type table name' placeholder text to add a screen or table name and press enter or remove your cursor from the screen name text box. 

Naming_a_Screen_2.gif

Method 3:

Within the screen settings modal, accessible through the gear icon in the upper right corner of each screen, select 'Type screen name' or 'Type table name' and start typing. Move your mouse away from the screen name text box or type enter to update the name.

Naming_a_Screen_3.gif

Editing Screen & Table Settings

Screen Settings Modal

To adjust screen settings, select the gear icon in the upper right corner of the screen. 

Tip: Press ESC to close the settings modal.

Screen_Settings.gif

Screen Ellipsis

In the upper right hand corner of a screen, select the ellipsis icon to open the menu and select Duplicate Screen or Delete Screen

Screen_Ellipses.png

Table Functionality

After adding a table, the column title 'Untitled col 1' appears with a lock icon on the left hand side. The lock icon indicates this column is the Key Field within the table, which cannot be moved or deleted. Key Fields can be the following field types: Text, Number, Date, Time, Barcode, and Single Choice in the style of Drop Down.

A table is slightly different from a screen. The primary differences are: 

  • Tables have a column tag attached to the column/field.
  • A table appears as a grid in the Preview panel.
  • Users can add as many rows as they need when completing a submission.

Grid_Preview.png

Configuring Fields

A field is at the core of building a form so we made it as easy and smart as possible. Field types allow you to quickly capture information in the format that makes the most sense for the information being collected or completing an action during the submission process. For example, date fields make adding a date easy and calculation fields can add, subtract, multiply, or divide values captured in the form or constants.

A field can be added to a screen multiple ways:

Drag & Drop or Click to Add

Use the Fields Library to drag-and-drop a field to a specific part of the screen or select a field type and it will be added as the last field within a screen.

Adding_Fields.gif

+ Between Fields

Hover between two existing fields in a screen to expose a + button, then select Add Field

Adding_Fields_2.gif

Smart Field Recognition

Leverage smart fields to add fields fast. To add your first field to a form, select + Add Field, start typing a field label, and press Enter.

Adding_Fields_3.gif

Current Terms for Smart Field Recognition

Image_from_iOS__1_.jpgImage_from_iOS__2_.jpgImage_from_iOS__6_.jpgImage_from_iOS__5_.jpg      Image_from_iOS__7_.jpgImage_from_iOS__4_.jpgImage_from_iOS__3_.jpg

 

Field Types

The field types you are familiar with are not missing, but simply in another location. Field types like Long Text, Drop Down, and Slider are now Styles in their respective Field Settings located on the General tab within the settings gear. Below are all current field types in the Builder and a list of the Legacy Builder field types that are now styles in the Builder.

Text___Numbers.png Choices.pngMultimedia.pngDate__Time____Location.pngOther.png

Text Field Type Styles: Single Lines (Short Text), Multiple Lines (Long Text)

Number Field Type Styles:  Number, Increment, Slider, Currency

Single Choice Field Type Styles:  Drop Down, Radio Buttons, Boxes

Multiple Choice Field Type Styles: Checkboxes, Buttons

Calculation Field Type Styles: Table Calculation (Summary)

Unique Field Interactions

When a single choice, multiple choice, calculation, or payment field is added to a screen, users are asked to enter options for single choice and multiple choice or a calculation for a calculation field. 

Single_or_Multiple_Choice.pngCalculation.png

New_Payment.png

 

Editing and Reordering Fields

Reorder Fields

To edit the order in which fields appear, simply hover over the field, select and hold while dragging the field to another location. Fields can be moved within a screen or to another screen. 

Reorder_Fields.gif

Delete or Copy a Field

Hover over the field you would like to delete or copy and three icons will appear. Select the trash icon to delete. Select the second icon, two sheets of paper, to copy the field. Copying a field with multiple settings configured can save time during the building process.

Copying_or_Deleting_a_Field.gif

Field Settings

Field Settings are found in the third icon, the gear, when you hover over a field. Field settings will vary for each field type, however there are a few settings in the General tab that will be consistent across most, if not all, field types. 

Field Type Drop Down

To quickly switch a field type.

Field_Type_Drop_Down.gif

Required & Read Only

(1) Makes a field required to be filled out. 

(2) Does not allow the user to interact with the field in the form.

Required_and_Read_Only.png

Style

Dependent on field type. Picture below is the Date field type.

Style.png

Default Value

Provides a value by default to the user filling out the form. Pictured below is the Time field type.

Default_Value.png

Calculations, Conditions, & Reference Data in the Builder

Calculations

One of the fields that help automate your form completion process is calculations. This field type is configured in the form building process and will run automatically when completing a submission, so the submitter can rely on the form to do the math for them.

Calculations in the Builder are located within the gear icon on calculation field types. Form builders will also get a reminder to the add calculation with a unique pop up detailed above in Unique Field Interactions. The layout of the calculation is now stacked. Calculations can draw upon other field values or use constants in the format of a number with up to six decimals or US currency.

Calculation.gif

Table Calculations

Table Calculation is the new verbiage for the Summary Field and is located within the Calculation field settings modal as a radio button. When selected, you will be directed to select the Table and the Column you wish to Sum automatically. Average and Count are greyed out as these functions are not available yet but are Coming Soon!

Table_Calculation.gif

Conditions

Conditions allow users to skip or reveal screens and fields in the normal workflow if certain user defined conditions are met. 

Field Conditions

Access to Field Conditions is now located in the Field Settings modal. The modal is accessible through the third icon, the gear, on each field. 

Field_Conditions.gif

Screen Conditions

Screen Conditions are located within the gear icon on each screen.

Screen_Conditions.gif

Conditions are written in an "If - Then" statement. For example, if the projected costs of a project are over $1,000, the form requires an approval signature. Conditions can be based on a value, like the example below, or on a checkbox. Fields will have a branch icon to indicate a condition is attached.

Condition_Setup.gif

Reference Data

Reference Data is available in the Builder. Now located in the settings gear of relevant fields, you can add reference data by importing comma separated value (also called CSV) files or using the Google Sheets integration. Fields will have a lightning bolt icon to indicate that it has reference data attached.

Additionally, all field types that support reference data are available to test in the interactive preview

Reference_Data.gif

New Features in the Builder

Undo/Redo Buttons

User's can Undo and Redo an action in the Builder when they make a mistake or want to retrieve a recent change.

  • To undo the last action, users can select the Undo button or hold CTRL + Z (or CMD + Z on MacOS). Users can undo every action until the last publish. 
  • To redo the last action, users can select the Redo button or hold CTRL + Y (or CMD + Y on MacOS).

Undo_Redo.gif

Preview Panel

As you create your form in the workspace area, watch in the Preview on the right hand side to see how your form appears on a mobile device. If you have a long form with many screens, toggle to the Screens tab to see all of the screens within your form at a higher level.

It is important to keep in mind that the only interaction available in the Preview panel is moving from one screen to another.

Preview_Panel.gif

Testing in Browser

It's easy to build forms and test them directly from your browser! Create your form in the workspace and select Test to try out your form in a browser. Go fill it in to see if everything is working correctly. 

Please note this is a simulation of filling out a form on a mobile device and no data is being captured. If your form is complete, go ahead and Publish to send the form to your users to fill out on their mobile devices in the field. 

Test_in_Browser.gif

Saving & Publishing a Form in the Builder

Saving a Form

Users can save their work at any time during the form building process. To save a form, select Save on the top right.

Important notes:

  • Saving a form does NOT create a new version.
  • A form must be saved before publishing the form.
  • A form can be tested without saving a form first.

Saving.gif

Publishing a Form

After a user has saved their progress in a form, they can select Publish to share it with their users.

To publish a form:

  • First, select Save to activate the Publish button.
  • Select Publish on the top right. In the Publish modal, select the users that will receive the form. 
  • Select the toggle to send users a notification that the newest version of the form is available.
  • Save.

Important notes:

  • A new version of the form will be created every time you select Publish.
  • A form must be saved before publishing the form.
  • The Publish button is disabled until the form is saved.
  • A form can be tested without publishing first.
  • The form can be shared with select users or all users.

Publishing.gif

Leaving the Builder

If you would like to return to your comfort zone, or need access to features not yet available in the Builder, simply press the link to the Legacy Builder in the banner across the top of the screen. Everything you have built will be in your form still and you will not have lost any of your progress so you can switch back with confidence. Once you switch back to the current Builder, you cannot return to the Builder in this form so please be sure before you proceed.  

Return to Current Builder.png

            Are_You_Sure.png

 

Articles in this section

Was this article helpful?
2 out of 2 found this helpful
Share

Comments

13 comments

Please sign in to leave a comment.

  • I'm liking where the Beta is headed (thank-you for Undo/Redo!).

    When might we expect Builder-BETA to support ref-data fueled drop-down lists and multi-select lists? Will loop screens be included? System defaults?

    2
  • Hey Darren,

    Thank you for trying Building BETA and the feedback on Undo/Redo, we are really exciting to launch this feature that has been a request from our wonderful community. Our product team is excited to review everything for consideration in our future product roadmap and will keep our community up to date on what is available when it's ready, especially reference data as we know how important it is to our users.

    Also, some of the field types you are familiar with are not missing, just simply in another location. Drop down lists are under the 'Single Choice' field type as a 'Style' in the settings gear under the 'General' tab. Multi-choice Buttons and Checkboxes are available as a 'Style' under the 'Multiple Choice' field type in the settings gear under the 'General' tab. 

    Loop screens got a little name update as well to align better with industry standards. Loop screens are now called 'Tables' and information about adding and configuring screens and tables are near the top of this article.

    Could you please elaborate on what you mean by 'System Defaults?' We have 'Default Value' in the settings gear, detailed above, but we may be thinking of two different things. Thank you so much for clarifying!

    0
  • Thanks Lauren for the direction to the Dropdown style for Single Choice, etc.

    In the current editor, for Short Text fields, under More, you can select a System Default, to include "Username", "Company Name", "First Name", "Last Name",  and "Full Name (First Last)". 
    We often use this to pre-populate the identity of the user filling out the form.

     

    1
  • Hey Darren,

    Happy to help! And of course, great catch! Since it's in BETA, there are several features that are still in progress to bring Builder BETA to full parity with the current Builder. If there is something you need in current Builder, you can always build the majority of your form in Builder BETA and switch to current Builder to add those last few features that you need! I hope this helps but please let me know if you have any additional questions. 

    0
  • Love the addition/clarity of the tables! Such a user friendly way of incorporating what was a loop. Going forward getting to the point where tables can use reference data will be key. 

    1
  • Hey Doug,

    Thank you for the feedback! We are really pleased with the clarity that our language update has brought to users already! As of today (28 Oct. 2021), reference data can be used on a table or a screen with the Text, Number, and Barcode field type in the key field to auto populate other columns in the table or fields in the screen. Other field types that allow reference data include Static Text, Rating, and Link. We will keep the community up to date on when reference data will be ready for the Single Choice field type. 

    0
  • Definitely needing the reference data in the drop down menus based off other drop down menus.  When will this freature be available? 

     

    Also - will this new building builder be for already developed forms? This would be extrememly helpful so that we can continue to build on and improve our current apps.

    0
  • Hi Chase,

    I have not been given a projected date for reference data on drop down menus but I will be sure to update when I know more.

    In order for forms built in the current Builder to be opened in Builder BETA, we need to achieve full feature parity. We have no current plans to sunset the current Builder and therefore we do not know when forms will be compatible with both Builders. We will be sure to inform GoCanvas users and the Community when feature parity is imminent. 

    0
  • I do like Builder BETA but it is missing a loop. It does not have option to loop other screen. I really need that option can it be added? 

    0
  • Hi Tatiana,

    Thanks for commenting here so we can clarify that we have updated language in the Builder BETA! To better align with industry standards, we have changed the name of Loop Screens to "Table." You can add a Table using the same methods as adding a Screen. Here is an article dedicated to Screens and Tables. Please let me know if you have any other questions!

    0
  • Hello everyone,

    I come bearing great news: Builder BETA now supports Reference Data on Single Choice Drop Down field types! These drop down menus are also available for testing in the Smart Preview. We will be sure to keep this post updated as more reference data functionality becomes available in Builder BETA.

    0
  • Will the option to add static images be added as well? 

    0
  • Hi Taylor,

    The product team is committed to feature parity for Builder BETA so that migration to Builder BETA from the current builder will be possible. I do not have a timeline for when feature parity will be available but it is currently in progress. I will be sure to update when I know more.

    0