Responsive Form Styles
Arclab® Web Form Builder
Use Responsive Styles of Host Page
The form usually adapts automatically to the width of the host page or
host element.
That means if the width of the area containing the form
changes, the form width is automatically adjusted to the new width.
All you have to do is using a form width of 100%. This is the
default.
In addition to the width, the font size also changes for most responsive
pages. This is also automatically taken over from the host page or host
element. That means the font used in the form corresponds to the font of
the host page. If the font size of the host page changes, the font size
of the form also changes.
No settings in the form are necessary for
this.
The "Form Style Settings" for "Font Family" and "Font Size"
should be empty. This is the default.
If you want to use a different font size, width or other style, you can set this as described in the next section.
Use Custom Responsive Styles
If you want to use a responsive font size or width that differs from
the host page (or host element), you can set this under:
"Style Settings" > "Responsive Form Styles".
Responsive "Font Size":
If you only want to change the font size, leave the "Form Width"
field or other styles blank.
The following example shows the usage:
The styles depend on the width of the browser or the display resolution
for mobile devices.
Define the settings (based on the browser
width) in ascending order, starting with the lowest possible
browser width or 0 (zero).
If the browser width is between
0px and 799px (800px-1) the "Font-Size" should be 10px.
If the browser width is between 800px and 1199px (1200px-1) the
"Font-Size" should be 12px.
If the browser width is between 1200px
and 1999px (2000px-1) the "Font-Size" should be 14px.
If the browser
width is greater than 2000px the "Font Size" should be 16px.
The "browser width" is always in px (Pixel), so
you don't need to add "px" for browser width.
The "Font Size" and
"Form Width" could be defined in different units, like px, pt, em, ...
so you need to add the unit here.
Responsive "Form Width":
The form width can be defined in the same way as the font size.
Please note that the form should not be wider than the space provided in the host page.
If the available space is already set in the host page, it is recommended to keep the default width of 100%.
Other Styles:
In addition to the form width and font size, other styles can also
be set depending on the browser width.
Click on "Edit Styles"
to open the styles editor:
