Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

K Khan
Jan 19, 2016
(1 votes)

Color Palette for Forms

There are few blogs have already been written to extend new EPiServer forms. This blog is to extend the concept of customization in Form and providing an element to let the users select a color from color pallete with four easy steps.


1. Extend a text element

using System.ComponentModel.DataAnnotations;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.Forms.Implementation.Elements;
using EPiServer.Shell.ObjectEditing;

namespace AlloyDemoKit.Forms
        DisplayName = "Color Picker Textbox",
        GroupName = "Form Elements",
        GUID = "70740CE9-7FEE-4582-B224-BAFC0D926889")]
    public class ColorPickerElementBlock : TextboxElementBlock

2. Add language elements

  <language name="English" id="en">    
        <name>Color Picker</name>
        <description />

3. Create a view (Views/Shared/Blocks/ColorPickerElementBlock.cshtml

@model AlloyDemoKit.Forms.ColorPickerElementBlock
@using EPiServer
@using AlloyDemoKit.Models.Pages.Models.Blocks
<link rel="stylesheet" href="//" media="screen">
<script src="//" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
    require(["dijit/ColorPalette", "dojo/dom", "dojo/on", "dojo/query", "dojo/NodeList-dom", "dojo/domReady!"], function (ColorPalette, dom, on, query) {
        var node = dom.byId("@Model.FormElement.Guid");
        var myPalette = new ColorPalette({
            palette: "7x10",
            onChange: function (val) {
                node.value = val;
                query("#placeHolderForColorPalette").style("display", "none");
        }, "placeHolderForColorPalette");
        query("#placeHolderForColorPalette").style("display", "none");
        on(node, "focus", function () {            
                query("#placeHolderForColorPalette").style("display", "");
<div class="Form__Element FormTextbox" data-epiforms-element-name="@Model.FormElement.Code">
    <label for="@Model.FormElement.Guid">
    <input type="text" name="@Model.FormElement.Code" class="FormTextbox__Input" id="@Model.FormElement.Guid" @Model.FormElement.AttributesString />
    <span data-epiforms-linked-name="@Model.FormElement.Code" class="Form__Element__ValidationError" style="display: none;">*</span>
    <div><span id="placeHolderForColorPalette"></span></div>

4. Other language elements

<selectcolor>My Favourite Color</selectcolor>

Ready to go

Image favouritecolor.PNG

Image favouritecoloredit.PNG

Scholarly articles:
Building out a custom form element with the new Episerver forms
Creating custom form elements in Episerver.Forms
Custom EPiServer Forms field

Jan 19, 2016


May 22, 2017 10:44 PM

Please login to comment.
Latest blogs
Stop Managing Humans in Your CMS

Too many times, a content management system becomes a people management system. Meaning, an organization uses the CMS to manage all the information...

Deane Barker | Nov 30, 2023

A day in the life of an Optimizely Developer - Optimizely CMS 12: The advantages and considerations when exploring an upgrade

GRAHAM CARR - LEAD .NET DEVELOPER, 28 Nov 2023 In 2022, Optimizely released CMS 12 as part of its ongoing evolution of the platform to help provide...

Graham Carr | Nov 28, 2023

A day in the life of an Optimizely Developer - OptiUKNorth Meetup January 2024

It's time for another UK North Optimizely meet up! After the success of the last one, Ibrar Hussain (26) and Paul Gruffydd (Kin + Carta) will be...

Graham Carr | Nov 28, 2023

Publish content to Optimizely CMS using a custom GPT from OpenAI 🤖

Do you find the traditional editor interface complicated and cluttered? Would you like an editorial AI assistant you can chat with? You can!

Tomas Hensrud Gulla | Nov 28, 2023 | Syndicated blog