Technique

  • Set resolution to 1280x720
    • Why? It is a resolution that works well according to this post on the ScreenFlow blog; it is a 16:9 resolution, which is the default for YouTube videos; we need at least 1280 pixels in width for Form Builder (most likely a smaller resolution would be better for non-Form Builder screencasts).
    • How? Use the Window Resizer extension; setup a new resolution at 1280x720 in mobile mode, so the resolution applies to the viewport, not the entire window. The in Screen Flow, after recording, crop at 1280x720, aligning the area to the bottom left of the Chrome window.

Script

Part 1

  • Intro - Hi, and welcome to this demo of Form Builder, which is Orbeon’s form designer, and is a part of the Orbeon Forms product. Form Builder allows you to create, edit, manage, and deploy complex forms right from your web browser.
  • Home screen - Here we’re looking at the Orbeon Forms home screen, which gives you a quick access to Form Builder, as well as a few demo forms built with Form Builder.
  • Create a form - Let’s click on Form Builder to create a new form. Here, you have to enter two small pieces of information first: an application name, and a form name. Don’t worry too much about those, as you can change them later. I’ll enter “acme” as the app name, which is the name of my fictitious company, and “contact” as form name, since I’ll be creating a contact form. Since I’m here, I’ll set the title of the form to “Contact us”.

Part 2

  • Form Builder layout - Form Builder has a very simple organization: there is a title bar at the top, which also allows you to select the user interface’s language; there are buttons with actions you can perform at the bottom; there is a toolbar on the left; and finally the main design area in the center where you can see the form you’re creating.
  • In-place editing - Form Builder follows a “what you see is what you get” approach. Say I want to name the first section of my contact form “Personal information”, I can just click on the section title, type it, and press enter.
  • Section/grids - Forms are organized in sections and grids. Sections can be nested, so you can have sub-sections, and sub-sub-sections, and so on. Grids can have any number of lines and columns, and each cell of the grid can contain a form field. We think that this design is a good middle ground between too simple and too complex. Notice that when I move my mouse around, various icons and elements appear. So here I’m hovering on a grid which has two columns and one row. I can add a column by clicking on this icon here; I can insert columns in the middle by clicking on this other icon; and I can click on the trash can icons to get rid of the columns I have created. In a similar fashion I can insert rows into my grid.

Part 3

  • First name, Last name, Email - So now, let’s add a few fields to this first section. Let’s start with “first name”, which I add by simply clicking in the toolbox on the corresponding button. I do the same for “last name”, and “email”. For “email” I use a specialized “email address” field, which will make sure that what users enter is indeed a proper email address.
  • Phone with repeat - And now let’s add a phone number field. For the phone number, I’d like users to be able to enter several numbers, like a home, office and mobile number, this without having to several fields. This is something you can do with the “repeat” functionality, which is new in Orbeon Forms 4.0. So let’s see how a repeats work. You insert a repeat by clicking on “New Repeat” in the toolbar. A repeat is just like a grid in the sense that it can can have multiple columns. So let’s add a column. And in the first column I add a dropdown for the phone type. In the second column I add a phone number field. Now, let’s populate the dropdown; I click on the “Edit Items” link, which opens the Form Builder itemset editor. This lists a series of labels and values for the control. The difference between labels and values is that labels are shown to users, and values are stored in the database. This distinction allows you to change labels later on, while keeping the values the same, so data stored in the database isn’t impacted. This also allows you to localize labels in different languages, but have the same values stored in the database whatever language was used when filling out the form. Let’s remove the sample entries here… and add a few items… say “Mobile”. You notice that when I tab out of the field, Form Builder suggests a possible value, which I can of course change if needed. Let’s also add “Home”, “Office”, and “Other”. And we’re good with this dropdown.
  • Message section (with order number) - I will now add a new section that will contain information about the message that users will want to write. I click on “New Section”, and name the section “Message”. Then let’s add a text field and call it “order number”. I don’t need anything to the right of this field, but I don’t want it to take the whole width of the form, so I’ll add a second column here, just for the purpose of the layout.

Part 4

  • Questions and comments - Finally, I also want to add a big text field, for users to enter their message. Since I want the field to use the whole width of the form, I create a new grid by clicking on “New Grid”, add a “Text Area”, and name it “Questions and Comments”.
  • Make fields required - Now I think that in this form the First Name, Last Name and Email, in fact most of the controls will be required. And I can actually set that constraint with Form Builder. And to do so I go to the Validation Settings button. And I select the “Yes” radio button under “Required”. Let’s do this as well for the last name… and the message. Notice how a little red star shows next the label of the required control.
  • Save, test - I will now save the form to the database by pressing the Save button. I can also test the form we just created simply by pressing the Test button. The form appears in this dialog as if it was presented to the end user, and I can fill-out the data. This way I can very easily test that the layout of my controls is correct and that validation is working properly. Let’s just fill out the required fields: the first name, last name, and message… and you notice that this little icon indicates that I no longer have errors on my form because I have filled out all the required fields. Once I’m satisfied with my test, I can close the dialog.

Part 5

  • Publish, summary, new - Once I have edited, saved and tested my form, I can publish it. I do so by pressing the Publish button. I confirm, and Form Builder now copies my form definition to a different area of the database where published forms reside. I can now decide to go to the summary page of my new published Contact form. The summary page lists all the entries that have been submitted for this form, so typically, accessing that page is restricted to admins or people who need to access this information. Of course this list is now empty, since this is a form that I just created. Going back to Form Builder, notice that on publish, it also gave me the URL of a “new page”. This is the page you will link to for people to fill out your form. Let’s open it, and the form shows. Notice that I am no longer in Form Builder, but in the runtime environment, which we call Form Runner. I am now really capturing this data and I will be able to save it.
  • Errors Say I just enter the first name and try to save. Since the last name and message are required, Form Runner doesn’t let me save the data. At the bottom, it shows an “error summary”. Say I click on “last name”. Notice how Form Runner set the focus on the “last name” control, which can be convenient with large forms. So let’s fill out this last name and message… and of course, once all the required data is entered, I can save my data.

  • Conclusion - This completes our quick overview of Form Builder’s basic features. There are many Form Builder features we didn’t have time to cover in this screencast. So for more information, make sure to visit our website at www.orbeon.com. Thank you!