Saturday, April 19, 2014

Once you are done reading this walkthrough, you'll know the basics of H2O and will be able to quickly setup new forms in minutes.   This walkthrough does not go into most of the features in H2O in order to keep this simple for those just starting out with H2O .  For styling, workflow, logic, custom views and other advanced features in H2O please review the other articles on this site.

We will create a simple form with two fields to collect a persons name and email address.  In order to start this, you must have H2O installed.  Instructions on installing H2O are below.  Skip the install details below if you have already installed H2O.

Installing H2O

Using the Module Definitions page in the Host menu of DotNetNuke,  install the core H2O module, H2O Forms Designer and the OnyakTech Library modules.  If you are upgrading, install the new releases over your existing installation.  The steps to install a module in DotNetNuke is below:

  1. Make a backup of your DNN installation and database.
  2. (Optional) Verify your web.config (see note below) for potential timeout issue
  3. Log in as host on your DNN installation
  4. Go to ‘Module Definitions’ under the host menu
  5. Select ‘Install New Module’ from the module list’s menu
  6. Browse to and select the H2O and click upload.
  7. Wait for all processing to finish.
  8. The web page you’re looking at should show you an installation report. Scroll down this report to check if there are any red text blocks signifying there were errors during install. If there were "time-out" errors, read the information below and try the install again.  If you continue to have problems with the install, contact Support from
  9. Repeat the install process for the H2O Forms Designer modules.  All other modules are optional.

Creating Your First H2O Form
There are four steps to creating your first form in H2O.  Create your form, setup a Team to administer the form, create your project to organize form related data & security and then finally configure the core H2O module to present the form to the user .   If you are new to H2O and want to create a form to collect and store data, follow the steps in Method 2 below and ignore Method 1 until after you have mastered form creation with H2O.

DO NOT place the H2O Forms Designer and the H2O core module on the same page.  These modules will not function properly if placed on the same page and the H2O Forms Designer should be secured to administrators or form designers ONLY.   The core H2O Forms Designer module is used to create and modify H2O Forms.  The H2O core module is used to present your forms to your users.

Create Your First Form

You can create forms with the core H2O module as well as the new Forms Designer.   However, it is recommended to use the new Forms Designer for form creation.  The forms creation process in the core H2O module will eventually be removed in future releases of H2O.  Ok...let's get started...

  1. Add the H2O Forms Designer module to a page secured page allowing only you or your team of H2O admins access.   The Forms Designer does not present information to the user, it's only purpose is to aid in form design
  2. Click the New Form image near the top of the module. Screen shot of this is to the right.
  3. After the New Form popup loads, enter a name for your form and description.  The Author field is automatically populated with your name.  The Author field is displayed in the Forms list and when someone uploads your form onto their site.
  4. You may leave the Form Rows and Column fields as is for now and click the Create New Form link at the bottom of the page. 

After you click the link to create the form, you will be presented with a screen that provides the next steps - ( Click Here to view this screen   The next step is to add controls to your screen by  clicking on the Edit link  in the Forms list.  If you don't see your form, refresh the page.

  After you click on the link to open the details of your form, you will see the screen shown to the left.    The next step is to add controls to your form by following the steps below:
  1. Click Edit Form Controls
  2. The Control Editor will now open and you can add/edit your controls.
  3. The first control we are going to create is a text box for the user's name.
  4. Type "Your Name" into the Name field.
  5. Select "TextBox" from the Type list that contains a list of controls you can add to your form.
  6. We want the user to be required to enter this value, so check the Check to Require Data Entry option.
  7. We also want this control enabled on the form, so check the Enabled option as well.
  8. Next, we will need a label for this control as well.  H2O will create one for us if we check Create Label To Match option.  Check this option.
  9. Now click Update Control Info
  10. Your form should now have two controls.  The controls on your form are listed in the first drop down box at the top of the screen.  Click here to see what it should look like.

We also want to add a control to obtain the user's email address and then send them a copy of the form results once the form is saved.  To do this...

  1. Click Add New Control
  2. Type Email into the Name field
  3. Select Email Response from the control Type list.
  4. Check the option to Enable and Require Data Entry
  5. We should also add a ToolTip to this control, you will see the custom H2O Tooltip displayed later in this walkthrough.
  6. We also want to make sure people enter valid email addresses, to do this we will enter the REGEX value to validate an email address into the Validation field.  Don't worry, you don't need to understand REGEX.  You can obtain REGEX validation strings from
  7. Finally, click Update Control Info to add this control to your form.

Now you're ready to drag the controls around the form designer to place them where you want them to be displayed.  Close the Controls window and click on Form Layout Designer.  (Click Here For Help)    Your form should look something like this (click here).

To move the controls around the form, click on the bar at the top of the controls container and drag it to another location on the form.  Once you are done, your form might look something like the image to the right.


Copyright 2012 by OnyakTech Privacy StatementTerms Of Use