> For the complete documentation index, see [llms.txt](https://docs.powerfulform.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.powerfulform.com/design-your-form/form-design.md).

# Overview

Find the right page for changing how your form looks on your storefront.

Every design control in Powerful Contact Form Builder lives in one place: open a form, then click **Appearance** in the left sidebar of the form editor. This section explains each group of controls on that panel.

Changes are shown straight away in the live preview on the right of the editor, so you can try a setting and see the result before you save.

{% columns %}
{% column %} <i class="fa-object-group">:object-group:</i> [Choose a display style](/design-your-form/display-style.md)

<i class="fa-droplet">:droplet:</i> [Colors and color schemes](/design-your-form/colours.md)
{% endcolumn %}

{% column %} <i class="fa-a">:a:</i> [Fonts, size and spacing](/design-your-form/fonts-and-sizing.md)

<i class="fa-image">:image:</i> [Form background](/design-your-form/background.md)
{% endcolumn %}
{% endcolumns %}

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-8f5724e8c0cd289b30a7f4d0b29aa04aa496353c%2Fscreenshot-form-design-appearance-panel.png?alt=media" alt="The Appearance panel open in the form editor showing Layout, Form with image, Font, Width, Font Size and Style controls"><figcaption><p>Everything that changes how the form looks lives in the Appearance panel.</p></figcaption></figure>

{% hint style="info" %}
Design settings apply to one form only. If you want the same look on several forms, style one form the way you want it, then duplicate it from the forms list and change the fields on the copy.
{% endhint %}

<br>

## Next steps

* [The form editor](/build-your-form/form-editor-overview.md) — get your bearings in the editor before you start styling.
* [Manage your forms](/getting-started/manage-your-forms.md) — duplicate a styled form to reuse its design.
* [Publish the form to a page](/getting-started/quickstart/publish-the-form.md) — put the finished form on your storefront.
* [Custom CSS](/settings/custom-css.md) — for styling the app's design controls do not cover.