The new Episerver forms module was released recently and it’s a big improvement over the old XForms module. In today’s guide, I’m going to cover how to install Forms and hopefully explain why you should be using it… Imean it’s FREE after all! Episerver Forms is the latest and greatest forms module to allow content editors to create and add forms onto web pages without needing any development interference.
The Episerver forms component is the replacement to the old XForms. XForms used to do a good job in providing forms functionality within Episerver, however, times change and it was getting a bit out-of-date. Forms are now created as blocks, this means blocks can be versioned, combined with visitor groups, indexed for searching, added into a workflow and all the other benefits you get from working with a block. Forms also work with HTML5 and do not render out as tables anymore, so front-end developers should have a lot easier a task to make the forms responsive and use modern day markup.
The first thing you will need is to install Episerver 9+ onwards. After you have your project opened in Visual Studio it is time to open up the Nugent Package Manager. In Nuget search the Episerver repository for Forms and you should see an Episerver Forms package:
Click install, sit back and wait for Forms to install. After the installation, open up the Episerver editor and navigate to page in your website that has a content area. Click on the ‘Add Block’ option and you should be presented with a list of blocks you can create. You should now see a ‘Forms Container’, select that:
Before the block is created, you will be asked to fill in a number of properties like the title, description, show a summary confirmation message after submission, a confirmation message, allow anonymous submissions, allow multiple submissions from the same IP/cookies etc.. after you have created a block you can start to add form elements to it. The first, thing we are going to do is add a text box element to captcha an email. On your form container block, you should see a content area called ‘Form elements’, in here click add ‘new block’.
On the form element selection page, you will see a number of different elements you can add to your form, text elements, CAPTACHS, buttons etc…
In this example, we will use a textbox and a submit button to create a simple, email collection form. In the textbox element, I’ll add in the labels, required field element, an email validator.
To add the submit button repeat this process… add a new block in the form element and select submit button block. After you have a form element and a submit button, you should now be able to publish the form to the site, fill it in and view the submission data. In my site with no CSS, the form looks like this. If you inspect element you will also notice that no tables are being rendered anymore!!
Fill in the form and go back into the Episerver editor and open the form container block, on the top right hand side in the select view, you should be able to open up a ‘Forms Submission View’
From this screen, you can now see all your form submission data, how many forms have been posted per day and a whole load of features
Well, that covers a very basic overview about how to get started and create a very simple form using the new Episerver Form plug-in. The forms module has a lot more functionality than I’ve covered, but I’m hoping you get a good flavour of how easy it is to add forms without having to do any coding yourself.
If you have been using XForms you can still use the two plug-ins in parallel. At the minute, there is no way to import your XForms data into the new Forms data structure so you may need some parallel running.