<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxform.js"></script>
    <script src="../../../dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
    <script src="../../../dhtmlxMenu/codebase/ext/dhtmlxmenu_ext.js"></script>
    <style>
        /* for menu proper showing */
        .dhxform_obj_dhx_skyblue div.dhxform_item_label_left div.dhxform_control {
            position: relative;
        }
    </style>
    <script>
var myForm,
formData,
menu;
function doOnLoad() {
    // init form
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 110,
        inputWidth: 120
    }, {
        type: "input",
        label: "Font Family",
        name: "font",
        value: ""
    }, {
        type: "input",
        label: "Font Size",
        name: "size",
        value: ""
    }, {
        type: "input",
        label: "Font Color",
        name: "color",
        value: ""
    }];
    myForm = new dhtmlXForm("myForm", formData);
 
    // init menu
    menu = new dhtmlXMenuObject();
    menu.renderAsContextMenu();
    menu.attachEvent("onBeforeContextMenu", function(zoneId) {
        return loadMenuItems(menuZones[zoneId]);
    });
    menu.attachEvent("onClick", function(id, zoneId) {
        myForm.setItemValue(menuZones[zoneId], menu.getItemText(id));
    });
 
    // attach menu to form's inputs
    // inputs have random ids
    var t = ["font", "size", "color"];
    for (var q = 0; q < t.length; q++) {
        var id = myForm.getInput(t[q]).id;
        menuZones[id] = t[q];
        menu.addContextZone(id);
    }
}
// here ids will stored, after form init values will updated
// will used in loadMenuItems()
var menuZones = {};
var menuItems = {
    font: [{
        id: "tahoma",
        text: "Tahoma",
        icon: null
    }, {
        id: "arial",
        text: "Arial",
        icon: null
    }, {
        id: "verdana",
        text: "Verdana",
        icon: null
    }],
    size: [{
        id: "11",
        text: "11px",
        icon: null
    }, {
        id: "12",
        text: "12px",
        icon: null
    }, {
        id: "13",
        text: "13px",
        icon: null
    }],
    color: [{
        id: "red",
        text: "Red",
        icon: null
    }, {
        id: "green",
        text: "Green",
        icon: null
    }, {
        id: "blue",
        text: "Blue",
        icon: null
    }]
    };
// will generate items based on clicked item
function loadMenuItems(id) {
    menu.clearAll();
    for (var q = 0; q < menuItems[id].length; q++) {
        menu.addNewChild(menu.topId, q, menuItems[id][q].id, menuItems[id][q].text, false, menuItems[id][q].icon);
    }
    return true;
}</script>
 
 
    <div style="padding-bottom: 10px;">Right-Click on any input</div>
    <div id="myForm" style="height:500px;"></div>