In the default settings, a form has no fixed height or width and simply takes up the space that it needs to. This typically means that the form will adapt to the height of its content. However, if you need a fixed height or a maximum width, you can configure these values individually for each embedding. To do this, form authors can specify the required dimensions of the form directly via the embedding page in the Formcentric Cloud interface.
The embedding code will then include a form container on which data attributes are defined for heights and widths. The Formcentric client sets the corresponding style attributes in the background and adjusts the form to the defined values automatically. As one example, confirmation messages will then be centred within the container. If scrolling is necessary, the client activates this automatically.
The data attributes also have the advantage of offering automated optimisation for mobile devices. As scrolling for this use case affects the entire page, containers with limits can worsen the user experience, as double scrolling is frequently problematical. On mobile devices, the form therefore ignores a configured height limit and automatically extends to its full height.
If you specify a fixed height of 800 px and a maximum width of 600 px using the Formcentric Cloud interface, this creates the following markup that you can include in your own web page:
<div data-fc-id="YOUR FORM ID" data-fc-height="800px" data-fc-max-width="600px"></div>
If you want more precise control over your form dimensions, you can achieve this directly in markup by using your own style attributes, style tags or CSS files. This lets you adjust the form behaviour to meet your exact requirements.
1. Modify the form container style attribute:
<div data-fc-id="YOUR FORM ID" style="height: 800px; max-width: 600px;"></div>
2. Modify the form container with user-defined CSS:
<div class="fc-container" data-fc-id="YOUR FORM ID"></div>
<style>
.fc-container {
height: 800px;
max-width: 600px;
}
</style>
3. Modify the parent element with markup and CSS:
<section class="fc-container">
<div data-fc-id="YOUR FORM ID"></div>
</section>
<style>
.fc-container {
height: 800px;
max-width: 600px;
overflow: auto; // activates scrolling if scrolling is needed
scroll-behavior: smooth; // for smooth scrolling to elements, such as with input errors (optional)
}
