Form Fields - Creative Elements Documentation

English

French

German

Form Fields lets you define the default appearance of form labels and input fields across your store. You can create consistent typography, colors, borders, shadows, focus feedback, autofill styling, and spacing from one central place.

These styles target both standard PrestaShop form controls and Creative Elements form fields, helping native and page-builder forms follow the same visual system.

Tip: Keep form styling simple and predictable. Clear labels, readable text, visible field boundaries, and an obvious Focus state make forms easier to understand and complete.

Label

Define the default appearance of labels displayed with form fields.

Color: Set the text color of form labels.
Typography: Configure the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing used by labels.

Field

Configure the typography and visual states of text-based form fields.

Typography: Define the typography used inside form fields.

Normal

Text Color: Set the default color of text inside the field.
Background Color: Set the default field background color.
Box Shadow: Add and configure a shadow around the field.
Border: Configure the border type, width, and color.
Border Radius: Round one or more corners of the field. Available units are px and %.

Focus

Text Color

Set the text color while the field is focused.

Background Color

Set the field background color while focused.

Box Shadow

Configure the shadow displayed around the focused field.

Outline

Add an outline around the focused field.

Type: Choose Solid, Double, Dotted, Dashed, or Groove.
Color: Set the outline color.
Width : Set the outline width up to 20px.

Border

Configure the border displayed while the field is focused.

Border Radius

Set the field corner radius while focused. Available units are px and %.

Transition Duration (ms)

Set how long the transition between the Normal and Focus styles takes. The value can be set up to 3000 milliseconds.

Autofill

Text Color: Set the text color used when the browser automatically fills a field.
Background Color: Set the background color of browser-autofilled fields.
Border: Configure the border of autofilled fields.

Spacing

Padding: Set the space between the field content and its edges independently for responsive devices. Available units are px, em, and %.

Labels

Labels identify the purpose of each field. Theme Style provides separate Color and Typography controls so labels can remain consistent across different forms.

Tip: Labels should remain easy to read and visually connected to their fields. Avoid making them so subtle that visitors have to rely only on placeholder text to understand what information is required.

Field typography

The Typography setting controls text displayed inside supported form fields. This provides a shared typographic baseline before the visual Normal, Focus, and Autofill states are applied.

Using the same typography across forms helps native PrestaShop controls and Creative Elements form fields feel like parts of the same interface.

Normal state

The Normal state defines how a field appears when it is available for input but is not currently focused. It includes Text Color, Background Color, Box Shadow, Border, and Border Radius.

This state should clearly communicate the field boundaries without competing visually with the surrounding content.

Tip: Make sure the field has enough contrast against the page background. If both the background and border are very subtle, visitors may have difficulty recognizing where they can enter information.

Focus state

The Focus state is displayed while a visitor is actively interacting with a field. It can have its own Text Color, Background Color, Box Shadow, Outline, Border, and Border Radius.

A visible Focus state is especially important for keyboard navigation because it helps visitors understand which field is currently active.

Important: Avoid removing all visible focus feedback. A clear Focus state improves usability and accessibility for visitors navigating forms with a keyboard.

Outline

The Focus state includes an optional Outline. Unlike the field border, the outline provides an additional visual indicator around the focused control.

Type: Choose Solid, Double, Dotted, Dashed, or Groove. Solid is the default outline type.
Color: Set the outline color.
Width: Set the outline thickness independently for responsive devices, up to 20px.

Tip: An outline can create a strong Focus indicator without changing the field's normal border. Use a color that remains clearly visible against the surrounding background.

Transition Duration

Transition Duration controls how quickly a field changes between its Normal and Focus styles. The value is specified in milliseconds and can be set up to 3000ms.

A short transition can make changes in color, border, or shadow feel smoother while keeping the interface responsive.

Autofill state

Browsers can automatically populate saved information such as names, email addresses, or addresses. The Autofill state lets these fields follow your form design instead of relying entirely on the browser's default appearance.

You can define the Autofill Text Color, Background Color, and Border independently.

Good to know: Autofill styling targets the browser's WebKit autofill state. The exact appearance can still vary depending on the browser and platform.

Padding

Padding controls the space between field content and the field edges. It is responsive and can be adjusted independently for desktop, tablet, and mobile using px, em, or %.

Padding has a strong influence on the perceived size of form controls. Increasing vertical padding creates taller, more spacious fields without requiring a fixed height.

Tip: Prefer comfortable padding over forcing a fixed field height. This gives text more room and adapts better when typography or responsive settings change.

PrestaShop and Creative Elements form fields

Theme Style Form Fields targets standard PrestaShop .form-control elements as well as Creative Elements textual form fields. This allows both types of controls to share the same visual defaults.

Note: The final appearance can still be affected by the active PrestaShop theme, individual widget settings, third-party modules, or custom CSS.

Using Global Colors and Global Fonts

Form labels and fields can use Global Colors and Global Fonts where available, helping the form system stay connected to the rest of your site's design language.

For example, label typography can reuse the same font system as body text, while Focus colors can use a recurring brand or interaction color.

Recommended workflow

Configure the Color and Typography of form labels.
Set the default Field Typography.
Define a clear Normal state with readable text and recognizable field boundaries.
Create a visible Focus state for mouse and keyboard interaction.
Add an Outline if you need stronger focus feedback.
Use a short Transition Duration if the Focus state changes color, border, or shadow.
Configure the Autofill state so browser-filled fields remain consistent with the design.
Set responsive Padding to create comfortable field dimensions.
Test the result in both Creative Elements forms and native PrestaShop forms.