Form integration

Prerequisites

Siteprofile changes:

  <apply>
    <to type="all"/>

    <!-- Required for forms: enable rendering API -->
    <formintegration />
   
    <!-- Optional: enable all users to create (standard) forms -->
    <allowfiletype typedef="http://www.webhare.net/xmlns/publisher/formwebtool" />
  </apply>

Add the proper JavaScript libraries:

//At minimum, activates required CSS and JSON/RPC links
import * as dompack from 'dompack';
import * as forms from '@mod-publisher/js/forms'; 
forms.setup({ validate: true });

//Optionally: replaces upload fields with a nicer and edit-supporting version
import UploadField from '@mod-publisher/js/forms/fields/upload';
dompack.register(".wh-form__upload", node => new UploadField(node));

//Enable the imgedit and/or rtd fields:
import ImgEditField from '@mod-publisher/js/forms/fields/imgedit';
dompack.register(".wh-form__imgedit", node => new ImgEditField(node));

import RTDField from '@mod-publisher/js/forms/fields/rtd';
dompack.register(".wh-form__rtd", node => new RTDField(node));

Form styling

Using SCSS, import the main forms CSS:

@import '~@mod-publisher/js/forms/styles';

This includes a default mixin to apply "flex" CSS styling to the forms. Set a minimum width for fields and include this mixin:

@at-root
{
  @include wh-form-flex;
}
.wh-form__label
{
  min-width:150px;
}

Responsive styling

Many sites may want form labels next to their fields in desktop mode, but will want to put the fields below the questions on mobile. Eg:

@media (max-width: 505px)
{
  /* Order the inputs vertical from their labels */
  .wh-form__fieldgroup
  {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  /* Give the fields their full width back */
  .wh-form__fields
  {
    width:100%;
  }
}
Next

Comments