How to apply custom CSS to particular WFFM form in Sitecore

WFFM forms is one the most useful module in Sitecore. By default Sitecore render WFFM form in vertical position. But what if you want to change its default CSS and make the form rendering customized.

WFFM form uses "Website\Views\Form\Index.cshtml" view for rendering the form. In this rendering "bootstrap.min.css" is one the CSS file for changing form look and feel.

Default CSS of WFFM form

But what if you want to apply some other CSS instead of this? One way is that change this CSS file with our custom file but the new CSS file reflect changes on all the WFFM forms.

How to change this CSS for any particular form only?

For this I just change the below line in "Website\Views\Form\Index.cshtml" view as

@using Sitecore.Forms.Mvc

@using Sitecore.Forms.Mvc.Html

@model Sitecore.Forms.Mvc.ViewModels.FormViewModel

@{

    ViewContext.ViewData.TemplateInfo.HtmlFieldPrefix = Model.ClientId;

    var main = string.Format("{0}main.js", Constants.ScriptsBaseUrl);

    var requirejs = string.Format("{0}require-2.1.15.js", Constants.ScriptsBaseUrl);

    var bootstrap = @Model.Item.ID.ToString().Equals("{B822847C-035B-48C9-BBDC-1DE3B96115E4}") ? "mybootstarp.css" : string.Format("{0}content/bootstrap.min.css", Constants.ScriptsBaseUrl);

   

As you can notice in yellow highlighted code part that I am comparing Model Item Id with my Sitecore form item id. If it matches, then I will render my CSS “mybootstarp.css” otherwise for rest of the forms default CSS "bootstrap.min.css" will used.

Custom CSS for particular WFFM form

Remember that “index.cshtml” is just a view, so we can write any custom logic in this view. 

I hope you like this Sitecore article. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this article if it’s useful for you.

Different ways of maintaining the key-value pairs in Sitecore

This article focus on different ways for maintaining keys and values details in Sitecore. We will focus on advantages and disadvantages of every approach.

1.      Sitecore Items

You can create Sitecore items which contain two fields like Key and Value. Sitecore itself uses this technique for maintaining dictionary values at /sitecore/system/Dictionary in CORE database to keep standard messages as below

Dictionary item in Sitecore

Advantage:

• You can keep Key as Share field and value as versioned/unversioned depend on requirement.
• It’s very easy to add a new fields in dictionary template apart from Key and Value field.

Disadvantages

• If there are large numbers of items, then it’s a performance overhead to process all the item and to find particular key and its value.

2.      Sitecore Fields

Create template that contains different Single-Line text fields where each field name act like a Key name and its data act like a value. One need to create item for maintaining key's values as

Key-Value field

Advantage

• Instead of processing hundreds of items, it’s very easy to process one item and gets values from its fields.

Disadvantage

• If you want to add a new key, then first add a field in template and then add its value to item. But remember, content editors generally don’t have access of template section.

3.      Name Value List field

We rarely use this field but believe me this can be very handy to maintaining key-value details.

Select field type as “Name Value List” in template. While creating item, you can enter as many records in name value details as

Name Value List Field

How to access in code?

Use below code to get all the values of Name Value List as 

string print = item["NameValueCollectionFieldName"];

print variable return values separated by “&” such as

 "key1=value%201&key2=value-2&key3=value_3&key4=value%204%20%26%20value%204.5&key5=value5"

As you can notice, key4 has value like “value 4 & value 4.5” which Sitecore encoded in “value%204%20%26%20value%204.5” just like we are encoding for query string.

Use below code to get individual key and value as 

System.Collections.Specialized.NameValueCollection nameValueCollection = Sitecore.Web.WebUtil.ParseUrlParameters(item["NameValueCollectionFieldName"]);

foreach(var nv in nameValueCollection) 

{

    print += "<BR> Key Name=" + nv.ToString() + "-- Value=" + nameValueCollection[nv.ToString()];

}

This loop print values like

//Key Name=key1-- Value=value 1

//Key Name=key2-- Value=value-2

//Key Name=key3-- Value=value_3

//Key Name=key4-- Value=value 4 & value 4.5

//Key Name=key5-- Value=value5

You can add new key and  access values as

//Add new key value pair

nameValueCollection.Add("newkeyName", "New key Value");

//Access value from keyname             

print += "<BR> " + nameValueCollection["key1"] + "^^^" + nameValueCollection["key9"];

In above statement, Key1 has value and key9 does not exist. So this will give output as "value 1^^^". So this shows that it should not give any error for non-exist key.

Advantage

• It’s very fast to access single item and single field for all the keys.
• You can cache value for this name value collection field and make it super-fast.
• If key is not present, you will not get the error :)

Disadvantage

• You can't add a new field if you want to hold any other details apart from key and value details.

I hope developer will try to use NameValue field in their assignments.

I hope you like this Sitecore article. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this article if it’s useful for you.