Form design settings in Balbooa Joomla Forms




Balbooa Joomla Forms Builder provides two ways of setting up form design: Basic for beginners and Advanced for experienced users.




Basic design settings


Click on the icon Design to open Design Settings.


Color Scheme

Form global colors.

Style

  • Default - default form styles.
  • Rounded - rounds corners of the form elements.

Width

Sets the width of the form (% or px).

Layout

  • Default - default form layout.
  • Lightbox - displays the form in a lightbox.

Font

  • Font - sets Font Family.
  • Size - sets the size of the font.
  • Spacing - sets the vertical spacing between fields.




Advanced design settings


Click on the icon Advanced Settings to open form advanced settings.




Form settings

Width

Width

Sets the width of the form (% or px).

Full Width

Sets the full width of the form.


Background

Color

Changes background color and opacity.


Spacing

Padding

Sets the space between form content and its border.


Border

Radius

Round the corners of an element (px).

Color

Changes border color and opacity.

Width

Sets the width of the border (px).


Shadow

Value

Sets shadow value.

Color

Changes shadow color and opacity.





Label settings

Font

Sets Font Family.

Size

Sets the font size (px or em).

Letter Spacing

Sets the amount of space between letters (px or em).

Line Height

Sets the height of the line box.

Color

Sets the color and opacity.

Properties

Sets boldness, style, uppercase and alignment.





Field settings

Background

Color

Sets the background color and opacity.


Spacing

Padding

Sets the spacing within a field (px).

Margin

Sets the external spacing between fields (px).


Border

Radius

Rounds the corners of an element (px).

Color

Changes border color and opacity of fields.

Width

Sets the width of the border (px).


Font

Font

Sets Font Family.

Size

Sets the font size (px or em).

Letter Spacing

Sets the amount of space between letters (px or em).

Line Height

Sets the height of the line box.

Color

Sets the color and opacity.

Properties

Sets boldness, style, uppercase and alignment.


Icon

Size

Sets the size (px or em).

Color

Sets the color and opacity.

Properties

Sets alignment.

Related articles