Using Episerver Online Form Builder

To see how powerful the Episerver forms are, we set out to see how easy it would be to recreate one of our custom forms that we had created for a previous project.

It’s a multi-step form requiring little input from the developer.

The case study itself is going to be written with the assumption the reader has had some basic experience with these forms and has a general understanding as to how they work.

However if you are not familiar with these forms I recommend you check out the articleintroducing Episerver forms.

Now you know what they are, I would also recommend this article to get a better understanding of why it’s better to move from the old XForms to the Episerver Forms.

Listed below are some of the key features our client had requested for us to create, which at the time you could not do with the XForms.

Summary of our key Requirements:

1. Multi-step form wizard
2. Validation on field dependency
3. Regular Expressions
4. Custom Integration

Go to the media tab which is normally located at the top right of your Episerver admin screen. Here you can see listed the forms that the site currently uses (if any) or an empty folder. On the sub-menu of this folder you can then select New Form and after giving your form an appropriate name, you can proceed with the next requirement.

Once you have a form created, you need to drag that form onto your page. Note that publishing the form is only publishing it in the form folder not the page itself – you then need to drag and drop the form you are working on, onto the page before you can actually see this on the frontend.

MULTI-STEP FORM WIZARD

Properties can be dragged and dropped onto a page to create your desired input and configure them until you are happy with the end result. The process for creating the multi-step is no different. You drag and drop the action element Form Step every time you want the properties to show on another tab.

By adding a step to a section of the form it gives you a visual “break point” of the step without hindering your view of the form.  When viewing the form as a user it would look like the following.  

Results

1. I find the multi-step very easy to add and change around.  If you’ve placed the input in the wrong place, you can simply drag it to the correct location.
2.  Another benefit I found with this method was that it was easy to see how the form was going to render without having to rebuild the project, waiting for it to load and then moving through the form to see if you moved the correct property.
3. By default there is a progression bar that gets added as you add steps.

Tip

• If you have more than 6 steps or a lot of properties in your sections then the form can become very crowded – if you haven’t named everything appropriately you will find it very difficult to find any particular property.

VALIDATION ON FIELD DEPENDENCY

Another requirement that the client had was to ensure there was a chained field dependency on data input e.g. User Answers “Yes” to the question “Would you like to supply an Address?”, therefore the User is prompted for Address fields, and Address fields will not be mandatory. Although this would require custom code to achieve this requirement can be achieved in Episerver forms. 

In the example below I have it so that if on the drop down you select the 1st option then Call Back & Info step 1 will show. If what is selected is the 2nd option then Call Back & Info step 2 will show and so on.

To carry this out when creating your step you need to go onto the settings tab of the result option you wish to show in this case it is Call Back & Info step 

Here you would create your Query so if this property has the correct value, you show the next step. You would use this process to create your other results.

Results

1. Once you understand how this is set up, it is very easy to create the field dependency.
2. As mentioned above, if your steps have a lot of properties and you haven’t named your inputs and steps correctly, it can be hard to set up the conditions on the settings tab.
3. The only way to add in the field dependency is with the use of the form steps as it stands there is no way to show or hide properties on the same step – they have to be separated.

Tip

• The progress bar will jump to the correct step – similar to how Amazon would jump certain steps in a process when checking out.

 REGULAR EXPRESSIONS

When adding new properties to the form, the client would have the ability to add regular expression to the properties itself.  The regular expression is easy enough to add to the inputs. When creating the input, check the regular expression option and paste in the expression you wish to validate against. Save the property, publish and that’s it! 

Results

1. This is one of the easier set ups to do.
2. I haven’t found a regular expression at the moment that hasn’t worked (the expression used above is for postal codes.)

Observations

The only issue I found with using the regular expressions is that on the validation of the input, the user is thrown a not so nice error message as shown below.

CUSTOM INTEGRATION

When submitting the form you can decide how the form should be handled – you can have the form go to another page, display just a thank you message while having the submission get emailed to the client.  However other than these standard features the new forms also come with the option to use your own custom form handling.  In this example I have added in some code behind that takes the submission and convert this into a pdf where it is store to be viewed later. This is done using the web hook feature, which is located on the form setting itself.

For an example of a practical implementation of this the Client may wish to have the Form data pushed to their CRM, Email Automation platform (e.g. Silverpop or Copernica), or to push to a custom 3rd party Application.

How to use webhooks

To implement the web hook was straight forward once I added in the controller (and added code to other relevant files e.g global.asax ) then added in the URL to the form I was able to grab the data that had been submitted to the form and create a pdf with the data.  With this I would be able to send this data to other email marketing software such as Copernica or Silverpop.  From there the client would be able to target the users with email campaigns etc.

Observations

• Throughout the whole process shown above it would be in this step where the developer would need to add in custom code – the set up for this is hefty enough however this is a very good tutorial to get started - http://c2experience.com/blog/2016/02/getting-hooked-on-Episerver-webhooks/
• Once you have the webhook set up and you can get the data – the data can be set up as a json object.

Episerver empowers businesses to easily manage their website content. Find out more about Episerver here.