This only works on Classic Forms where the layout is a TABLE
Once the page is created you execute JavaScript to move the DOM elements in the second TD column containing the description to the first TD column

- Find Field by definition in
<!-- comment -->
- Find description by
ms-metadata
- move (appendChild) Node to first Column (first TD after TR)
- add a BR so the description is below the Fieldname
Allmost all answers/blogs will take you on a jQuery adventure for Step
1. Finding the TD with input
fields, then parsing innerHTML to find that (green) String
The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)
The jQuery lovers will then do String magic to get the data from that
green string comment.
One eval
statement can turn that comment into 3 variables.
Solution
So the only native JavaScript you have to use
(from a Content Editor WebPart below your Form, so it executes after the Form is displayed)
is:
var formCSI = new function (form){
function getComments(element) {
function acceptNode() { // IE *requires* this argument where other browsers don't.
return NodeFilter.FILTER_ACCEPT;
}
var safeFilter = acceptNode;// IE *requires* this argument where other browsers don't.
safeFilter.acceptNode = acceptNode;
return document.createTreeWalker(element, NodeFilter.SHOW_COMMENT, safeFilter, false);
}
var tree=getComments(form);
while (node=tree.nextNode()) {//loop all found <!-- comments -->
eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
console.info(CSI_InternalName,CSI_Type,CSI_Name);
var TD=node.parentNode;//column with input field
var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
var desc=TD.getElementsByClassName('ms-metadata')[0];//find description span
if(desc){
console.info('Move Description','\n',desc,'\n',TR.firstElementChild);
TR.firstElementChild.appendChild(desc);//move description to first Column
desc.insertBefore(document.createElement('BR'),desc.firstChild);//add BR before desc
}
}
return this;//return formCSI as object
}(document.querySelector('.ms-formtable'));//IIFE execute function immediatly
//formCSI now is an object referencing all Form Row TR elements
formCSI.Title.style.background='pink';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again
You can delete half the lines,
I left them in to show how easy Form manipulation without jQuery is.
Since native javascript .appendChild() actually moves elements, you could move any whole Field into any other HTML layout...
iForm