Simple Styling of EPiServer Forms

Prior to EPiServer Forms 4.5, we were forced to inject in our own styling by editing the less files. This often resulted in breaking functionality where javascript were dependant upon these base CSS classes. EPiServer last year changed this by binding javascript to data attributes freeing us from styling shackles.

This article is for those that are struggling to put the pieces of styling EPiServer Forms together and want a straight forward example.

  1. Implement a class inheriting from IViewModeExternalResources
  2. Create your custom style sheet
  3. Add in Styles to match EPiServer Forms Markup
  4. Build, Run & Test

 

1. Implement a class inheriting from IViewModeExternalResources

Create the follow class anywhere in your solution:

[ServiceConfiguration(ServiceType = typeof(IViewModeExternalResources))]
public class EPiServerFormsViewModeExternalResources : IViewModeExternalResources
{
   public IEnumerable Resources
   {
      get
      {
         var rcList = new List();
         rcList.Add(new Tuple("css", "/YourCssPath/CustomEPiServerForms.css"));
         return rcList;
      }
   }
}

 

2. Create your custom style sheet

Create a css class anywhere in your solution and update the path in step where the text is bold in the previous step.

 

3. Add in Styles to match EPiServer Forms Markup

So here is where your front end designer comes in. You’ll need to provide the markup that will allow them to identify which classes style check section of the form.

Here’s an example for the textbox element

/* Textbox Element */
   .FormTextbox .Form__Element__Caption {
   color: orange;
}
   .FormTextbox .FormTextbox__Input {
   color: red;
}

The TextBox element will appear as follows on the episerver form:

EPiServerFormsColouring

Examples of other elements with their css classes:

Form Element HTML Tag class name
Textbox label .FormTextbox .Form__Element__Captio
Textbox input .FormTextbox .FormTextbox__Input
Number label .FormTextbox–Number .Form__Element__Captio
Number input .FormTextbox–Number.Form .Textbox__Input
Submit button .Form__Element .FormSubmitButton

You can investigate the remaining elements by looking at the ascx files located in EPiServerForms module folder in the ElementBlocks section:

WithEPiServerFormsStyling

 

4. Build, Run & Test

Run the solution and navigate to the page where you’ve setup your EPiServer Forms example.

You will find that your css should be getting loaded in along with the page.

If a style isn’t getting applied but you know it’s being attached to the html tag then try applying the css keyword !important. Sometimes you may be using bootstrap classes and that is overriding your styles.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s