12.10.2011 Fixed a bug in the description for how to address the headings by name in the fields object.

20.06.2011 Fixed a bug with Firefox. The function “init_fields()” in the code for the file “BuildHeadingsFromArray.js” is replaced with “init_field_v2()”.

04.03.2010 Small update to the function “buildHeadingsFromArray(arr)” to skip “wrong FieldInternalNames”. Added padding-Left option.

I have previously shown a method for creating headings in a SharePoint form based on a single line text field

Here is another method that creates the headings without having to add a “placeholder” in the form.

With this “headings script” you can add a description to the field. This description can contain text or HTML (links, images etc):

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The sourcecode for the file “BuildHeadingsFromArray.js” is found below.

Add this code to a CEWP below the list form in NewForm, DispForm and EditForm:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/BuildHeadingsFromArray.js"></script>
<script type="text/javascript">
arrOfHeadings = [{"headingText":"This is a heading",				  
	"insertBefore":"Dummy2",
	"fontSize":"17",
	"fontWeight":"bold",
	"fontColor":"black",
	"paddingTop":"10",
	"paddingBottom":"2",
	"paddingLeft":"2",
	"descriptionText":"This description can contain text or HTML, like this link: <a href='https://spjsblog.com' target='_blank'>SharePoint JavaScripts</a> that opens in a new window.",
	"descrFontSize":"9",
	"descrFontColor":"black",
	"descrPaddingTop":"0",
	"descrPaddingBottom":"5"},	
	{"headingText":"This is a red heading",				  
	"insertBefore":"Dummy4",
	"fontSize":"17",
	"fontWeight":"bold",
	"fontColor":"#EE2C2C",
	"paddingTop":"10",
	"paddingBottom":"5",
	"paddingLeft":"2"}];
				  
buildHeadingsFromArray(arrOfHeadings);
</script>

Read here how to add a CEWP to the NewForm, DispForm or EditForm, and how to find the FieldInternalName of your columns.

You build the headings by creating an array of objects containing the various arguments to the script:

• headingText: The actual heading.
• insertBefore: FieldInternalName of the field to add the heading to.
• fontSize: Size in pixels.
• fontWeight: “normal”, “bold” etc.
• strong>fontColor: Color name or hex value.
• paddingTop: Padding in pixels.
• paddingBottom: Padding in pixels.
• descriptionText: The description test – leave blank if no description is required.
• descrFontSize: Size in pixels.
• descrFontColor: Color name or hex value.
• descrPaddingTop: Padding in pixels.
• descrPaddingBottom: Padding in pixels.

When the script to build the headings is executed, all the headings created are added to the “fields” object, and can be referred like any other field like this:
Heading before a field:
$(fields[“headingBefore_FieldInternalName of the field to add the heading to“])
Heading after a field:
$(fields[“headingAfter_FieldInternalName of the field to add the heading to“])
The sourcecode for the file “BuildHeadingsFromArray.js” looks like this:

/* Build headings from array
 * -----------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * v1.4
 * LastMod 20.06.2011
 * -----------------------------
 * Include reference to:
	jquery - http://jquery.com
	BuildHeadingsFromArray.js - This file
 * -----------------------------
 Call form CEWP below list form in NewForm, DispForm or EditForm like this:
	<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="/test/English/Javascript/BuildHeadingsFromArray.js"></script>
	<script type="text/javascript">
	arrOfHeadings = [{"headingText":"This is a heading",
					  "insertBefore":"Dummy2",
					  "insertAfter":"",
					  "fontSize":"17",
					  "fontWeight":"bold",
					  "fontColor":"black",
					  "padding":"10 2 5 2",
					  "descriptionText":"This is the description This is the description This is the description",
					  "descrFontSize":"9",
					  "descrFontColor":"black",
					  "descrPadding":"0 0 0 0"},
					  {"headingText":"This is another heading",
					  "insertBefore":"Dummy4",
					  "insertAfter":"",
					  "fontSize":"17",
					  "fontWeight":"bold",
					  "fontColor":"black",
					  "padding":"10 2 5 2"}];

	buildHeadingsFromArray(arrOfHeadings);
	</script>
*/

function buildHeadingsFromArray(arr){
if(typeof(fields)=='undefined')fields = init_fields_v2();
	$.each(arr,function(i,item){
	// Does the field exist?
	if(fields[item['insertBefore']]==undefined && fields[item['insertAfter']]==undefined)return;
		// Build heading
		var str = "";
		str += "<tr><td colspan='2' class='ms-formbody' style='padding:0'>";
		str += "<div style='font-size:"+item['fontSize']+"px;color:"+item['fontColor']+";font-weight:"+item['fontWeight']+";padding:"+item['padding']+"'>";
		str += item['headingText']+"</div>";
		// Description
		if(item['descriptionText']!=undefined){
			str += "<div style='font-size:"+item['descrFontSize']+"px;color:"+item['descrFontColor']+";padding:"+item['descrPadding']+"'>";
			str += item['descriptionText']+"</div>";
		}
		str += "</td></tr>";
		if(item['insertBefore']!=''){		
			$(fields[item['insertBefore']]).before(str);
			// Add heading to fields object - refer as "heading_FieldInternalName"
			fields['headingBefore_'+item['insertBefore']]=$(fields[item['insertBefore']]).prev();
		}else if(item['insertAfter']!=''){
			$(fields[item['insertAfter']]).after(str);	
			// Add heading to fields object - refer as "heading_FieldInternalName"
			fields['headingAfter_'+item['insertAfter']]=$(fields[item['insertAfter']]).next();
		}		
	});
}

function init_fields_v2(){
	var res = {};
	$("td.ms-formbody").each(function(){
	var myMatch = $(this).html().match(/FieldName="(.+)"s+FieldInternalName="(.+)"s+FieldType="(.+)"s+/);	
		if(myMatch!=null){
			// Display name
			var disp = myMatch[1];
			// FieldInternalName
			var fin = myMatch[2];
			// FieldType
			var type = myMatch[3];
			if(type=='SPFieldNote'){
				if($(this).find('script').length>0){
					type=type+"_HTML";
				}
			}
			if(type=='SPFieldLookup'){
				if($(this).find('input').length>0){
					type=type+"_Input";
				}
			}
			// Build object
			res[fin] = this.parentNode;
			$(res[fin]).attr('FieldDispName',disp);
			$(res[fin]).attr('FieldType',type);
		}		
	});
	return res;
}

Save as “BuildHeadingsFromArray.js”, mind the file extension, and upload to the scriptlibrary as shown above.

Ask if something is unclear.

Regards
Alexander