Appearance

Appearance settings apply a predefined visual style and optional form-specific CSS. Use them to make a form fit the surrounding WordPress theme without changing its fields or submission behavior.

Open Appearance

1. In WordPress, go to Kali Forms > Forms and edit a form.
2. Select Settings in the builder navigation.
3. Select Appearance.

Choose a predefined style

1. Open Predefined styles.
2. Review the live example for each style.
3. Select the style you want to use.
4. Use the sun or moon control on a style card to choose its light or dark version.
5. Wait for the autosave indicator before leaving the builder.

Kali Forms 3.0.0 groups the presets into:

• Theme styling: Default, Rounded borders, Straight borders, Rounded with background, and Straight with background.
• Minimalistic styling: Minimalistic, Minimalistic rounded, Minimalistic straight, Minimalistic rounded with background, and Minimalistic straight with background.

Each option has a light and dark version. The preset affects the form container, labels, and controls; it does not change the layout configured in Builder.

Add Custom CSS

Use Custom CSS for small, form-specific changes that the presets do not provide.

1. Give the form a unique Form CSS Id in Settings > General Settings > Advanced.
2. Return to Settings > Appearance.
3. Open Custom CSS.
4. Enter CSS scoped to the form’s ID.
5. Select Save.
6. Open a published page containing the form and verify the result at desktop and mobile widths.

For example:

#docs-general-settings-form {
border: 2px solid #0f766e;
padding: 1rem;
}

Scoping every rule prevents the form’s styles from affecting unrelated elements on the page. Kali Forms renders the saved CSS in a form-specific <style> element on pages where the form appears.