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.


Responsive Form Styles


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.


Automatically adapt the font of the host page


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".


Custom Responsive 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:


Responsive Font Size


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:


Other responsive styles