You can add custom question types to a form by setting up a custom element which extends from JSFormElement.

TypeScript implementation

This example assumes a simple field that will be output to the HTML prerendered (ie: with its contents)

[component simplefield]
  <my-simple-field name="[name]">
    Your answer? <span class="answer"></span> <button type="button">>Set</button>
  </my-simple-field>
[/component]

And the implementation for the field

import { JSFormElement } from '@webhare/forms';

export class MySimpleField extends JSFormElement<{ answer: number }> {
  didsetup = false;

  connectedCallback() {
    if (!this.didsetup) //attach event listeners only on first connect
      this.querySelector("button")?.addEventListener("click", () => this.setAnswer());

    this.didsetup = true;
  }
  get value() {
    return {
      answer: parseInt(this.querySelector(".answer")?.textContent || "") || 0
    };
  }
  set value(val: { answer: number }) {
    this.querySelector(".answer")!.textContent = String(val.answer);
  }
  setAnswer() {
    this.value = { answer: this.value.answer + 14 };
  }
}

customElements.define('my-simple-field', MySimpleField);

And to refer to this component in a form definition:

   <customfield name="simple_field" title="Simple field" contentswitty="formtest.witty:simplefield" />
Next