Visions In Code

Good people! I hope you are well out there 🙂
Before we start I must say that BLAZOR will rock your world! If you don’t know what it is, please read and be amazed here. Please checkout test project at github – Sitecore + Blazor

Anyaway let’s proceed… This post is about Sitecore Forms and Sitecore has done a really good job documenting the Sitecore Forms:
https://doc.sitecore.net/sitecore_experience_platform/digital_marketing/sitecore_forms

Some good videos from Sitecore:
Sitecore Forms – Creating a Form
Sitecore Forms – Reporting on Performance

As always there are some really great “community” posts out there:
Responsive Sitecore 9 Form with Bootstrap
BEST PRACTICES ON SITECORE 9 FORMS FOR DEVELOPMENT TEAMS
Adding custom category for Form elements
Sitecore-Forms-Extensions
… the list is long 🙂

I would like to share with you guys how easy it is to customize the controls without any customization(no creation of custom control and so on). Thanks to the very smart people who designed the Sitecore Forms (and it’s controls) it is quite easy to do really cool controls.

But before we do the “controls”, we need a form. We will also need a page to put the form on. You can have a separate layout for the form or use “current” layout. In our scenario we will use “current layout” and we will of course do it in Sitecore Habitat.

Sitecore Forms is using some css- and script files and they are located in:
siteroot/sitecore modules/Web/ExperienceForms

In order to render them you will have to add following “methods” in your layout:

@Html.RenderFormStyles()
@Html.RenderFormScripts()

Here I would like to introduce another approach, where you will NOT have to add above methods in your layout. Sitecore Habitat is your friend, I’m talking about Sitecore.Foundation.Assets. It will allow us to add files and inline scripting/styles to renderings. Which will then be rendered nicely on the page.

First we need to locate the rendering for the Mvc Form, we will find it at:
/sitecore/layout/Renderings/System/Forms/Mvc Form

Because we are using Sitecore.Foundation.Assets, we will have a new section on the rendering called Assets. Here we can add the files that Sitecore Forms needs (we can also add our own custom scripts and css here). We don’t want to mess with the original Mvc Form, let’s make a copy of it and put it in a (new) Feature folder “Forms”:

* Don’t forget to add the rendering to placeholder/s.

We will start with the script files and reference them, following are used by Sitecore Forms:

/sitecore modules/Web/ExperienceForms/scripts/jquery.validate.min.js
/sitecore modules/Web/ExperienceForms/scripts/jquery.validate.unobtrusive.min.js
/sitecore modules/Web/ExperienceForms/scripts/jquery.unobtrusive-ajax.min.js
/sitecore modules/Web/ExperienceForms/scripts/jquery.validate.unobtrusive.bootstrap.min.js
/sitecoer modules/Web/ExperienceForms/scripts/form.conditions.js
/sitecore modules/Web/ExperienceForms/scripts/form.tracking.js
/sitecore modules/Web/ExperienceForms/scripts/form.validate.js

* Since I’m already are using jQuery in current web application, we don’t need to reference jQuery again.
** Note the jquery.validate.unobtrusive.bootstrap.min.js, this is not by default. It’s added according to the very great post Responsive Sitecore 9 Form with Bootstrap.

(Later we will put css files here also…)

Let’s move on to the customization of controls 🙂

There are a tons of wonderful controls out there, here are some nice ones we can test:
SimpleMDE – Markdown Editor
Fast select
Bootstrap Dual Listbox

First out is the “Markdown component”
We need to add a script file and a css file. Let’s download the files and put them in a proper place, why not put them together with the Sitecore Forms files:

\sitecore modules\Web\ExperienceForms\css\markdown\simplemde.min.css
\sitecore modules\Web\ExperienceForms\scripts\markdown\simplemde.min.js

* Best would be if you created a Feature.Forms project and put your files in there.

Next we will be to reference the files in “our copied Mvc Form” rendering – Custom Mvc Form.
Locate the Assets section and add the script and css files.

Now for the fun stuff 🙂 We will create a form in the “Forms tool”. In the form we should have a section to wrap around the markdown component. For the markdown component we will use the Multiple-line control. In order to make it work we just need to set the class name to “markdownTest”.

What is left is to load the markdown editor, I’m a bit lazy so we will use the “Javascript inline” in the Assets section(on the rendering) and add the following line:

var simplemde = new SimpleMDE({ element: $(".markdownTest")[0] });

Now we have a fully fledged markdown editor in Sitecore Forms 🙂

Crazy isn’t it! It’s so easy…

Next is the “Bootstrap Dual Listbox”
Let’s do the same as above, download script and css files and put them in a proper place:

\sitecore modules\Web\ExperienceForms\css\duallistbox\bootstrap-duallistbox.min.css
\sitecore modules\Web\ExperienceForms\scripts\duallistbox\jquery.bootstrap-duallistbox.min.js

Again as above, we will reference the files in “our copied Mvc Form” rendering – Custom Mvc Form.
Locate the Assets section to add script and css files.

In the form we will wrap the DualListbox control in a section. For the DualListbox component we will use the ListBox control. To make it work we need to set the selection mode to Multiple and give it the class name “dualListTest”.

What is left is to load the duallistbox and we will use the “Javascript inline” in the Assets section(on the rendering) and add the following line:

var dualList = $('.dualListTest').bootstrapDualListbox();

The last one is the “Fast select” control
Let’s do the same as above, download script and css files and put them in a proper place:

\sitecore modules\Web\ExperienceForms\css\fastselect\fastselect.min.css
\sitecore modules\Web\ExperienceForms\scripts\fastselect\fastselect.standalone.min.js

Again as above, we will reference the files in “our copied Mvc Form” rendering – Custom Mvc Form.
Locate the Assets section to add script and css files.

In the form we will wrap the Fast select control in a section. For the Fast select component we will use the ListBox control. To make it work we need to set the selection mode to Multiple and give it the class name “fastSelectTest”.

To load the Fast select control, we will use the “Javascript inline” in the Assets section(on the rendering) and add the following line:

var fastSelectTest = $('.fastSelectTest').fastselect();

Here we have them all rendered nicely on a form:

To confirm they work properly, let’s add the Save Data from the submit actions to the submit button.
Here is the csv file…

A tip! Instead of doing a “Thank you” view to redirect to (when submitting the form). Why not create a second page in the form and let the submit button be a “Next”. Then just add some text to the new page, something like this:

That’s all for now folks 🙂