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
See also REST API doc
Request
URL: <um-rest-url>/de.pinuts.cmsbs.restapi.Forms/index
Parameters:
umopen
: API token (prior to UM 7.56)locale
: language code (de, en…)search
: filter results by substring match to name, title or description
Headers (UM 7.56 or newer):
Authorization
: Basic Auth credentials of API key with permissionde.pinuts.cmsbs.restapi:ListForms
See also Universal Messenger 7.56.0 (EN) | Securing REST endpoints with API keys
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>