Skip to main content
Match your pop-ups and embedded blocks to your brand by setting custom colors and fonts. The form editor accepts the same color values and font families you already use on your website, so the form blends in instead of looking like a third-party widget.

​
Pick the right colors

You have two reliable ways to find the exact colors your site uses:
  • Use a color-picker browser extension like Eye Dropper. Open your website, click the extension, and hover over the element whose color you want. You’ll get the exact HEX value.
  • Check your brand book. If your company has documented brand colors, use the HEX values listed there.
Once you have the color values, open the form in the editor and go to Form colors. Paste the HEX values into the corresponding fields (background, button, text, border, etc.). The preview updates immediately so you can compare it against your site.
Sample a handful of colors from your site at once — primary background, accent, button color, body text color, and border color. That covers almost every field in the form’s color settings.

​
Use your website’s font

To make the form’s text match your site, copy the exact font-family value from your website and paste it into the form’s font settings.
1

Inspect a text element on your website

Right-click a text block on your website and choose Inspect (in Safari, choose Inspect Element). The browser developer tools will open with that element selected.
2

Find the font-family value

In the Styles panel, locate the font-family property for the element. Copy the entire value, including every fallback font and any quotation marks.For example: "Helvetica Neue", Helvetica, Arial, sans-serif
3

Open the form in the editor

Go to the form you want to update and click Edit.
4

Enable custom fonts

In Fonts: general settings, turn on Use custom font.
5

Paste the font-family value

Paste the value you copied into the custom font field and save.
The custom font may not render correctly inside the Maestra editor preview — the editor doesn’t always have access to fonts hosted on your domain. To see the real result, open the form’s test link on your website. The font will render correctly there because the browser pulls it from the same source your site does.
If your font is loaded from a private CDN or requires authentication, it may not load on the form even though the font-family value is correct. In that case, host the font in a publicly accessible location or use a Google Fonts equivalent as a fallback.