Customization

Styling Form

There is a possibility to make changes in the look and feel of a form. For this you need to take the following steps:

add a new CSS class(es) with desired settings in the < style > section of your HTML page or in your file with styles (don't forget to include your file on the page in this case)

<style>
    .my_first_class {
        /*some styles*/
    }
 
    .my_second_class {
        /*some styles*/
    }
</style>

specify the name of the created CSS class (or names of classes separated by spaces) as the value of the cellCss property in the Form configuration:

var form = new dhx.Form({
    cellCss:"my_first_class my_second_class"
});

Styling Form controls

You can modify styling of Form controls as well using the cellCss option inside the object of a related control.

<style>
    .bg-white .dhx_input {
        background: #fff;
    }
</style>
 
 
var form = new dhx.Form("form-sample", {
    cellCss:"bg-gray",
    rows: [
        {   
            cellCss:"bg-white",
            type: "input",
            label: "Name",
            placeholder: "John Doe"
        },
        {
            cellCss:"bg-white",
            type: "input",
            label: "Email",
            placeholder: "jd@mail.name"
        }
    ]
});

Form styling