Last updated:
This article describes how Formcentric forms are embedded into a website.
Formcentric forms must be correctly embedded in a web page before they can be displayed and used.
Embedding is completed in just a few steps. First, you will need to make the necessary domain settings in the Organisation section of the My domains area. Here, you need to add the domains and/or subdomains for the websites on which you intend to embed your forms. Read for more information Managing domains.
You can then copy the embedding code and include it in the HTML markup of the web page on which the form will be displayed.
Add script tag
Add the script tag to the <head> or at the end of the <body> of your web page:
Add form container
Add the form container at the point where you want to display your form:
After adding the embedding code, the form is loaded and displayed automatically.
Example
If theme resources should not be supplied by Formcentric but provided locally from your website, then their paths can be configured directly on the form container.
Two separate approaches are possible here.
Variant 1: Theme via theme directory and theme name
Variant 2: Configure theme files explicitly
In Static mode, all existing form containers are initialised after loading the script. If containers are only added to the DOM later, three mechanisms are available for this.
window.formcentric.initFormcentric()This re-initialises all currently available <div data-fc-id> containers.
data-fc-dynamic-init="true" on script tagWith this approach, the client monitors the DOM and initialises newly added form containers automatically.
data-fc-watch="true" on form containerWith this approach, the client monitors attribute changes on the form container. If an attribute change should change, the running instance is stopped and re-initialised with the new attributes.
In Static mode, there are no component-based error callbacks available. For development work, debugging therefore makes use of data-fc-debug on the container, data-fc-debug on the script tag or window.formcentric.debug.
Example using the form container:
