Integrate forms into a website

What to achieve

Editors should be able to create a content section for any web page which displays a form managed by the Universal Messenger. Editors can select available UM forms from within the CMS.

How to achieve it

The CMS must be able to create custom fields which can read, select and store structured objects from a remote REST interface.

Create a new section with a field to select the form, calling the UM REST interface
Add a HTML output for that section which outputs the selected form HTML snippet

Details

Universal Messenger Forms REST interface

Request

URL: <um-rest-url>/de.pinuts.cmsbs.restapi.Forms/index
Parameters:
- umopen: API key
- locale: language code (de, en…)
- search: filter results by substring match to name, title or description

Response

Format: JSON
Array of form (app instance) objects with the following attributes
- name: internal id (usually a GUID)
- title: Label, can be displayed to editors
- locale: Language code
- description
- type: App type (de.pinuts.cmsbs.newsletter, de.pinuts.cmsbs.contactform…)
- icon: PNG icon base64 encoded
- htmlSnippet: HTML snippet which must be used to insert into the web page HTML code to display the form.
  If the CMS can only store flat strings, this is the string to be stored.

Example response

[{
    "name": "a867711a-86eb-42d7-9bc0-2a1d26fd235a",
    "title": "Newsletter subscription",
    "description": "Subscribe to the general newsletter",
    "type": "de.pinuts.cmsbs.newsletter",
    "locale": "en",
    "icon": "iVBORw0KGgoAAAAN[...]FTkSuQmCC",
    "htmlSnippet": "<div>...</div><script>...</script>"
},
]

HTML output

Once the form has been selected the section HTML output must include the form htmlSnippet. The HTML snippet contains JavaScript code which loads the form via Ajax.

<section>
...
if form
  form.htmlSnippet
end
...
</section>