I came across a scenario to implement Conditional Section for Sitecore 9.0 to hide/show fields based on user input. This feature was introduced on Sitecore 9.1(Checkout my other blog here). Since the project is in Sitecore 9.0, I decided to create a custom control using speak.
Let’s get started.
Step 1: Create form element in core DB using speak
Switch to Core DB
Go to /sitecore/client/Applications/FormsBuilder/Components/Layouts/PropertyGridForm/PageSettings/Settings
Create a template based of Form Parameters. (I couldn’t find it when i tried from Insert Template, so i duplicated the existed one- MutliLine Text. If you know, how to add Form Parameters template(not using Sitecore Rocks), please leave a comment.)
Add the FormTextBox Parameters template. Since I duplicated MultiLineText field, it came with the Details, Validation, Styling and Advanced. I feel it’s best shortcut to create quick.
Fill out FormLabel, IsLableOnTop and BindingConfiguration fields.
Repeat the fields as many as you need. Here i added one more to compare the value.
NOTE: IsLabelOnTop is unchecked for additional fields
Step 2: Create form template in Master DB
On Master DB, create a custom template under Basic/Lists/Security/Structure folders based on Field Type template(/sitecore/templates/System/Forms/Field Type). I created under Structure Section as it’s Condition Section.
Fill out Property Editor field by choosing the custom control that was created in Core DB. You can see all the fields listed shown in below screen shot.
Fields(View Path, Model Type)will be filled out after creating code behind and razor view files.
Step 3: Create model and view in Visual Studio
Create model and view in project under Helix structure
Now you should see the new form control on the elements panel. Drag and Drop to any form and fill out the Target Field and True Value fields appropriately and put any element(s) inside Conditional Section to show/hide the element(s).
Don’t forget to publish all the templates and forms!
Happy Sitecoring! Leave a comment if you have any questions.
I came across a requirement from a client that they wanted to show Country and it’s states grouped in a dropownlist. I created a custom grouped dropdown to fit into the scenario. Since this is an extension of dropdownlist, no speak knowledge required.
Let’s get started
Step 1: Create custom dropdown list
Create a custom dropdownlist under /sitecore/system/Settings/Forms/Field Types/Lists based on Field Type(/sitecore/templates/System/Forms/Field Type) template like below
Step 2: Create a code behind class and razor view
create a code behind class like this in VS project
public class StateDropdown : DropDownListViewModel
protected override void InitItemProperties(Item item)
protected override void UpdateItemFields(Item item)
public Dictionary<string, Dictionary<string, string>> Regions()
if(string.IsNullOrEmpty(DataSource)) return new Dictionary<string, Dictionary<string, string>>();
Dictionary<string, Dictionary<string, string>> counrtyCollection = new Dictionary<string, Dictionary<string, string>>();
Item item = Context.Database.GetItem(DataSource);
var children = item.GetChildren();
foreach (Item child in children)
counrtyCollection.Add(child.Fields["Name"].Value, new Dictionary<string, string>());
foreach (Item desc in child.Children)
Create a razor view like this and build project
var regions = Model.Regions();
<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
<select id="@Html.IdFor(m => Model.Value)" data-trigger name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" placeholder="Select Your Work Location" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)>
<option placeholder>Select Your Work Location</option>
@foreach (var region in regions)
<optGroup data-id="@region.Value" label="@region.Key">
@foreach (var state in region.Value)
@Html.ValidationMessageFor(m => Model.Value)
Step 3: Fill out the fields
Fill out the View Path, Model Type and Property Editor(should be Property Editor Settings/DropDown List).
you are now all set to utilize the custom dropdown list in Forms Designer. Don’t forget to publish the field!
Hope this is helpful. Any questions, please leave a comment.
Sitecore 9 form feature is awesome and simple to work with. It is more like Visual Studio Toolbox and you can drag and drop the fields.
I had a requirement from Client asking for Ajax form and wanted to show Confirmation/Success message after the form is submitted. Out of the box, this is achievable with the Form.
Here is a small guide on how to create a form with confirmation message:
1. Select Forms from Dashboard.
2. Click Create button.
3. Select blank form.
4. Drag a page for main content.
5. Drag a another page for confirmation message.
6. Design the fields according to needs. Here I’m doing Email Signup form. You can add field validation and css-class as needed.
Please make sure you have these scripts in Layout.cshtml.