MediaWizards Grimoire

Jul 30, 2022 - Huw Reddick

Creating custom forms using blocklists

In our previous Umbraco 8 projects we have installed the Formulate package to allow backoffice editors to create simple forms. Now we have started to use Umbraco 10, we discovered that Formulate is not currently available so needed to come up with another way to allow editors to create simple forms in the backoffice. I have used blocklists on some previous projects so decided to try creating a custom forms editor using a blocklist approach.

What does it need to do?

  1. Allow editors to add custom forms to a document
  2. Allow as much flexibility as possible to add form controls to each form
  3. Submit the form to a SurfaceController for processing

The end result still requires some custom coding of the SurfaceController once a form is setup (see section below), but it does allow the ediors to define the forms and add the controls they need.

 

Required Elements

To get started I created some base elements to use as Settings models for the Form, FormFields plus a KeyValuePair element for creating dropdowns, radiobuttons etc.

The KeyValuePair element has two text fields and will be used as the basis of a blocklist for any control that requires key value pairs, dropdowns, checkboxes etc.

  1. Key (TextString)
    This is the text/label displayed for the form control.
  2. Description (TextString)
    The value of the form control, this will be passed to the SurfaceController.
KeyValuePair Element Type

I also added a Blocklist Data Type to use the KeyValuePair element. This will be used to create checkboxes, radiobuttons and lists etc. 

Custom Form - Blocklist - KeyPair

The FieldSettings element contains all the common attributes and settings required to create a standard html form control.

  1. Name (Textstring)
    Used for the form control's name and id attributes, if the name contains spaces they will be removed for 'name' attribute and replaced with '-' for the id.
  2. Label (Textstring)
    The label displayed for the form control.
  3. Is Required (True/False)
    Toggle to make form control required or not required.
  4. Error Message (Textstring)
    The message to display if validation fails.
  5. Class (Textstring)
    Custom classes for the form control.

This element will be used as the settings model for each form control added to the Controls BlockList.

FieldSettings Element Type

The FormSettings contains the settings for the Form Blocklist.

  1. SurfaceController action (TextString)
    The name of the Action to use when submitting the form.
  2. Display Title (True/False)
    Show the form title as a legend tag for the form.
  3. Use Captcha (True/False)
    Adds an anti bot captcha to the form.
FormSettings Element Type

A second Element Type was created for the CustomForm to add some content for the form to use.

  1. Title (TextString)
    Title of the form.
  2. Introduction (Richtext Editor).
    A short description explaoning what the form is about, appears above the form tags.
  3. Success Message (Richtext Editor)
    A message to display on successful submission of the form.
  4. Form Controls (Blocklist)
    The controls Blocklist for adding form conrols to the form.
Form Element Type

A Blocklist Data Type was added to enable adding the form to a Document Type. It uses the Form element type for the Content model and FormSettings for the Settings model.

Custom Form - Blocklist - Form

Form Control Elements

With all the base elements and Blocklist data types created the next job was to create the elements for the actual form control types that will be available for editors to select.

CheckBox & RadioButtons

  1. Items
    set of KeyValue pairs for the checkboxes or radios items
  2. Layout
    Choose between horizontal or vertical layouts
  3. Help Text
CheckBox element

DropDown

  1. Items
    set of KeyValue pairs for the dropdown items
  2. Multiselect
    allow selection of multiple value
  3. Help Text
Dropdown element

RichText

  1. Rows
    number of rows for the RichText container, uses TinyMCE
  2. Help Text
RichText (TinyMCE) element

DatePicker

  1. Type
    Choose from date, time, date+time, week or month selectors
  2. Pattern
    regex validation expression, if required
  3. Placeholder
  4. Help Text
  5. Max
    maximum date limit
  6. Min
    minimum date limit
Date picker element

Text

  1. Type
    Chose the input type, text, number, password etc.
  2. Pattern
    regex validation pattern
  3. Placeholder
  4. Help Text
  5. Max (number field only)
  6. Maximum value allowed for number field
  7. Min (number field only)
    minimum value for number field
  8. Max Length
    maximum number of characters allowed
  9. Min Length
    minimum characters allowed
General Input field element

And finally a blocklist datatype was created to allow adding the field elements to the form blocklist.

Blocklist - Form Controls
Example Field editor

Nov 07, 2023
Email validation flow for Member registration

In this blog post I explain how to implement an email validation flow for Member registration.

Apr 13, 2023
Implementing a Forgot password for members part 2

In part 2 of my Implementing a Forgot password for members I explain how to implement the IMemberMailService to send the reset password email.

Mar 23, 2023
Implementing a Forgot password for members part 1

How to implement a ForgotPassword process for Umbraco members in Umbraco 9+

Feb 26, 2023
Events Calendar Block - Custom View

Custom views give you complete control over how a Block is rendered in the backoffice and this enables you to give a better representation of the content. In this article I will explain how I created a custom Block view based on the fullcalendar.io javascript library to display events in the backoffice.

Dec 21, 2022
Umbraco 10 - Razor Class Library Package
These are my experiences of creating an Umbraco package for the MediaWiz Forums, using package targets, razor class libraries, static web assets and template views.

Many thanks go to Kevin Jump and Luuk Peters without whose help I would probably have given up.