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 article introducing 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:
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.
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.
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!
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.
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.
Episerver empowers businesses to easily manage their website content. Find out more about Episerver here.