Last updated:
This article explains how to embed Formcentric forms into a website.
As a first step, install the Formcentric client in your project:
If you want to include local SCSS files from a theme, you will also require SASS:
Embedding uses the function mount() from @formcentric/client. As there is no official Angular component at the moment, we recommend creating a small, project-specific Angular wrapper component.
A potential implementation could look as follows:
formcentric.component.ts:
formcentric.component.html:
Using the component:
Theme resources can be integrated directly into the Angular application as SCSS and JavaScript.
Import the styles from the selected theme into src/styles.scss, for example:
Then import the JavaScript templates from the theme into your Angular application – into main.ts, for example, or into your local wrapper component:
Then extend the mount() configuration:
Please note:
skipThemeLoad: true and skipTemplatesLoad: true are used to prevent the same resources also being loaded at runtime.
If you want to pass theme variables directly, you can set these as extra values in the configuration:
mount() returns an instance with lifecycle methods. This can be used for the targeted control of the embedded form.
Example:
Note the following:
ready is triggered as soon as the initialisation has been successfully completed.reload() re-initialises the form in the same container.stop() terminates the running instance but leaves the target element in the DOM.unmount() removes the form and performs a full cleanup for the instance.The SDK integration is restart-based. Configuration values are applied on initialisation and not carried across live to a running instance automatically.
If you change configuration values, the embedding should be re-established explicitly – by using a controlled unmount() followed by another mount(), for example.
For Angular, we recommend using your own input like remountKey, which triggers a targeted re-initialisation.
Note the following:
remountKey should trigger a re-initialisation.embedId or formDefinition should also lead to a repeat embedding.embedId should remain stable.For simple integration projects, optional callbacks can be used directly in the configuration:
onReady: is called after successful initialisationonError: is called after initialisation errors or runtime errorsExample:
If you are using your own Angular wrapper component, these callbacks can also be forwarded externally via @Output() events – such as ready and error, for example.
