> 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/reference/match-theme-themes.md).

# Themes that support Match theme styling

Check whether your theme is on the supported list for Match theme styling, and test it yourself if it is not.

**Match theme styling if possible** makes a form borrow the field and button styling of your store theme. The "if possible" matters: it only works for themes **Powerful Contact Form Builder** carries styling for.

## What the setting actually does

With the setting on, the app draws the form's inputs and buttons with styling written for your theme instead of the presets under **Style**.

| Setting                                        | Effect while Match theme styling is on                              |
| ---------------------------------------------- | ------------------------------------------------------------------- |
| **Style**                                      | Replaced. Your theme's field styling is used instead of the preset. |
| **Layout**, **Font**, **Font Size**, **Width** | Still applied.                                                      |
| **Customize colors** and the color schemes     | Still applied, so they can clash with the theme.                    |

The checkbox sits in two places, and both change the same thing:

* Form editor > **Appearance** > **Theme style**.

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-516d403c872b48c02689811bdbb580e33a1bbc2d%2Fscreenshot-reference-theme-style-setting.png?alt=media" alt=""><figcaption></figcaption></figure>

* The **Publish** window, step 1 **Display style** > **Automatically match form style with your theme**.

## Which themes it covers

The app recognizes your theme automatically. Beside the checkbox, the words **supported themes** link to this list, which grows over time. If yours is not here, run the test below — the setting may still work.

<details open>

<summary>Supported themes, A–Z</summary>

**A** — Abode, Aesthetic, Aisle, Alchemy, Amber, Andaman, Atlantic, Aurora

**B** — Banjo, Barcelona, Baseline, Bazaar, Be Yours, Berlin, Blum, Blockshop, Boost, Borders, Broadcast, Brava, Bullet

**C** — Canopy, Cama, Cello, Chord, Colorblock, Colors, Combine, Concept, Copenhagen, Cornerstone, Craft, Crave, Creative, Creator

**D** — Digital, District, Distinctive, Divide, Dawn

**E** — Effortless, Electro, Elysian, Emerge, Emporium, Energy, Enterprise, Envy, Essence, Essentials, Eurus, Expanse, Expression

**F** — Fame, Fashionopolism, Fetch, Flawless, Flow, Focal, Foodie, Forge, Fresh

**G** — Galleria

**H** — Habitat, Handmade, Highlight, Honey, Huge

**I** — Icon, Impact, Impulse, Infinity

**K** — Kairo, Kidu, King, Kingdom

**L** — Local, Loft, Lorenza, Luxe, Lute

**M** — Machina, Madrid, Marble, Maranello, Masonry, Modules, Mono, Monk, Motion, Murmel

**N** — Next, Noblesse

**O** — Origin, Outsiders

**P** — Paris, Pesto, Piano, Pipline, Polyform, Portland, Prestige, Providence, Publisher, Pursuit

**R** — Reformation, Refresh, Release, Relax, Responsive, Retina, Retro, Ride, Roam

**S** — Sahara, Satoshi, Select, Sense, Shapes, Shine, Showcase, Sleek, Soul, Spark, Spotlight, Split, Startup, Story, Streamline, Studio, StyleScape, Symmetry

**T** — Taiga, Tailor, Takeout, Taste, Testament, Tokyo, Toyo, Trade

**U** — Urban, Urge

**V** — Veena, Venue, Vivid, Vision

**W** — Warehouse, Whisk, Woodstock

**Y** — Yuva

**Z** — Zest, Zora

</details>

The list grows over time, so a theme missing from it is not necessarily unsupported — run the test below. A theme built for you, bought outside the **Shopify Theme Store** or heavily rewritten gives the app nothing to match against: the checkbox stays on but has no effect.

## Test it on your own theme

{% stepper %}
{% step %}

## Put a form on a page first

The editor's preview does not load your theme, so you need a form already published — see [Publish the form to a page](/getting-started/quickstart/publish-the-form.md). Note how its fields and submit button look now.

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-7177a29433a3bf45a79b47a1dcfbbf6653d09761%2Fscreenshot-reference-match-theme-before.png?alt=media" alt="Previous enable match theme"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

## Turn the setting on

Open the form, click **Appearance**, scroll to **Theme style** and select **Match theme styling if possible**. Save the form.

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-d955b161322e68e0a42f182ef49651e0e4863c22%2Fscreenshot-form-match-theme.png?alt=media" alt="Enable match theme"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

## Reload the storefront page

Reload your storefront tab — a hard reload if your browser caches — and compare:

| What you see                                                          | What it means                                                                |
| --------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| The inputs and buttons now look like the ones elsewhere in your theme | Your theme is supported and the match is working.                            |
| Nothing changed at all                                                | Your theme is not covered. Turn the setting off and style the form yourself. |
| Something changed, but it looks worse                                 | Your theme is supported, but the result does not suit this form.             |
| {% endstep %}                                                         |                                                                              |
| {% endstepper %}                                                      |                                                                              |

<figure><img src="https://2907469752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FehM2rz7MmKkWcJmgvJOe%2Fuploads%2Fgit-blob-942ead391ed68b5ada0e9f742e1d417d9e5e35d5%2Fscreenshot-reference-match-theme-before-after.png?alt=media" alt="After enable match theme"><figcaption></figcaption></figure>

{% hint style="warning" %}
A multi-step form cannot use this setting: the checkbox is turned off in the **Publish** window and the display style tiles are disabled.
{% endhint %}

## If the result does not fit

Turn the setting off and match the theme by hand:

1. Clear the checkbox and save.
2. Under **Style**, pick the preset closest to your theme's inputs — **Classic** for bordered fields, **Line** for underlined ones, **Flat** for solid blocks.
3. Set **Button** and **Button label** to your theme's button colors, and **Text** to its body text color.
4. Under **Font**, pick your theme's font, or leave it on **Default** to inherit it.

See [Colors and color schemes](/design-your-form/colours.md) and [Fonts, size and spacing](/design-your-form/fonts-and-sizing.md).

## Common questions

<details>

<summary>I switched themes. Do I need to check again?</summary>

Yes. The match depends on which theme is serving the page. Remember to switch the app embed on in the new theme too — see [Theme integration](/display-and-placement/enable-the-app-embed.md).

</details>

<details>

<summary>Does it apply to popup and floating forms?</summary>

Yes, whatever **Layout** you chose.

</details>

<br>

## Next steps

* [Colors and color schemes](/design-your-form/colours.md) — match colors by hand.
* [Custom CSS](/settings/custom-css.md) — styling the presets cannot reach.