Development

The following provides a brief explanation of key terms.

The Formcentric client is a modern and modular JavaScript application based on Preact. The client is used for the dynamic embedding and presentation of Formcentric forms in modern web applications and content management systems (CMS). The application consists of two main modules:

Formcentric forms must be correctly embedded in a web page before they can be displayed and used. The embedding process ensures that the form is loaded correctly and presented in the required design. To learn how to embed Formcentric forms into standard websites, see the article General embedding. If you're working with a framework, detailed guides are available for React, Vue and Angular. Guidance on local development – including how to set up a proxy server using Docker and Caddy – can be found in the article Local development.

You configure your application with attributes on the form container, and by changing, modifying and adding values on the Formcentric window object . When doing so, note that attributes in the markup are always defined as a string – even if their actual type is different. The following configuration options are available: Attributes : Configure behavior directly via HTML attributes on the form container Window object : Advanced customisation through the global window.formcentric object Heights and widths : Control the form’s size and responsiveness Parent URL : Use data-fc-parent-url for SPA support and double opt-in flows Captcha Providers : Choose and configure a captcha provider for spam protection

Formcentric forms include built-in debugging options to help you troubleshoot issues during development or in live operations. You can activate debugging in two ways: locally via an attribute or globally via the window object.

You can use the Formcentric Theme Customisation Workspace to design your own themes. This workspace has been specially developed for modifying Formcentric themes. In the workspace, you can modify existing Formcentric themes or create your own theme. By changing theme variables and using functionality such as SCSS partials and JavaScript templates, you can modify the design, markup and styling of your forms to meet your requirements. You also have the option of creating your own custom themes, adding fonts and images, and exporting your modifications for various target environments. For more details, see Setting up the workspace and Documentation.