Form integration


Siteprofile changes:

    <to type="all"/>

    <!-- Required for forms: enable rendering API -->
    <formintegration />
    <!-- Optional: enable all users to create (standard) forms -->
    <allowfiletype typedef="" />

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:

  @include wh-form-flex;

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 */
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  /* Give the fields their full width back */