Custom Templates

The form used for entering data into CloudTables is simple and clean and works well when there aren't many fields. If you have a large number of fields you wish to edit, it may be more convenient if those fields are grouped together by category.

In this example we replace the standard form with a custom form. The custom form is crude, but you can customise this as you please so the styling is in tune with your site.

This example uses the following code:

#customForm {
  display: flex;
  flex-flow: row wrap;

#customForm fieldset {
  flex: 1;
  border: 1px solid #aaa;
  margin: 0.5em;

#customForm fieldset legend {
  padding: 5px 20px;
  border: 1px solid #aaa;
  font-weight: bold;

#customForm {
  flex: 2 100%;

#customForm legend {
  background: #bfffbf;

#customForm legend {
  background: #ffffbf;

#customForm legend {
  background: #ffbfbf;

#customForm div.DTE_Field {
  padding: 5px;
<div id="customForm" style="display: none;">
  <fieldset class="name">
    <div data-editor-template="dp-52"></div>
  <fieldset class="office">
    <div data-editor-template="dp-54"></div>
  <fieldset class="hr">
    <legend>HR info</legend>
    <div data-editor-template="dp-55"></div>
    <div data-editor-template="dp-53"></div>
    <div data-editor-template="dp-57"></div>
    <div data-editor-template="dp-56"></div>
document.addEventListener('ct-ready', function(e) {
  var editor = e.editor;

Other examples



Editor API Integration

More coming soon...

We are working on building up more examples of CloudTables. Please stay tuned, they're on their way!