Bulma

If your layout is implemented on the Bulma framework, the markup most likely looks like this:

<form>
  <div class="field">
    <label class="label">Username</label>
    <div class="control">
      <input class="input" type="text" name="name" value="">
    </div>
    <p class="help is-danger"></p>
  </div>

  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" name="email" value="">
    </div>
    <p class="help is-danger"></p>
  </div>

  <div class="field is-grouped">
    <div class="control">
      <button type="submit" class="button is-link">Submit</button>
    </div>
    <div class="control">
      <button type="reset" class="button is-link is-light">Cancel</button>
    </div>
  </div>
</form>

To prepare, you will need to do the following:

1. Add data-error="*" attributes for elements that will be displayed with the error text.
2. For FormIt compatibility, placeholders with values and errors must be specified.
3. In Bulma, invalid status is specified by the is-danger css class, so you need to specify it in the fetchit.frontend.input.invalid.class system setting.

INFO

Markup validators still swear by the empty action attribute, so you must specify a link to the page in it.

<form>
<form action="[[~[[*id]]]]" method="post">
  <div class="field">
    <label class="label">Username</label>
    <div class="control">
      <input class="input" type="text" name="name" value="">
      <input class="input" type="text" name="name" value="[[+fi.name]]">
    </div>
    <p class="help is-danger"></p>
    <p class="help is-danger" data-error="name">[[+fi.error.name]]</p>
  </div>

  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" name="email" value="">
      <input class="input" type="email" name="email" value="[[+fi.email]]">
    </div>
    <p class="help is-danger"></p>
    <p class="help is-danger" data-error="email">[[+fi.error.email]]</p>
  </div>

  <div class="field is-grouped">
    <div class="control">
      <button type="submit" class="button is-link">Submit</button>
    </div>
    <div class="control">
      <button type="reset" class="button is-link is-light">Cancel</button>
    </div>
  </div>
</form>