Webform editor

Customizing Workflow colors

For some light customization, you can change the colors of certain buttons, links, and components throughout a Workflow by using the advanced JSON editor*. In this article we’ll teach you how to apply custom colors to your Workflow.

For more advanced styling options, we recommend using a custom CSS stylesheet (white labeling) instead.

Please note that the advanced editor is only available on Custom plans.

Back to Help Center

Custom colors can be applied to both Workflows as well as Etch e-signature packets. You can manage Workflow custom colors through the advanced editor, which is what we are covering in this article. Etch custom colors can be managed via API.

Understanding custom colors

Custom colors allow you to specify the colors of different components within your Workflow and can be managed via the style object in your Workflow (Weld) configuration file.

There are five types of components that you can customize with the following keys: infoColor, linkColor, primaryColor, successColor, and secondaryColor.

infoColor

infoColor controls the colors of informational actions within your Workflow and are typically used to mark incomplete items. For example, the steps on a signature page and the signature fields that have yet to be signed.

Default vs. customized infoColor in signature pages

linkColor

linkColor controls the colors of any links included in your Workflow, such as links added via explanation text fields. The ‘Sign All’ link on the signature page will also be updated.

Default vs. customized linkColor in Workflows

primaryColor

primaryColor controls the main colors within your Workflow, including the title underline, the load spinner, and to highlight completed signature fields on the signing page. It’s also the same color used with main actions within the Webform such as page forward (e.g. Next), Review Info, and the Finish & Submit buttons.

Custom primaryColor in Webforms

Default vs. customized primaryColor in Webforms

Custom primaryColor in Workflow signature pages

Default vs. customized primaryColor in signature pages

successColor

successColor controls the color of completed actions within your Workflow, such as finished steps on a signature page and completed Webform cards included in the Webform finish page.

By default, completed Webform cards are not shown on the Webform finish page. To enable them, set "showCompletedForms": true in the finishPage array of your Webform (Forge) configuration file.

Default vs. customized successColor in Workflows

secondaryColor

secondaryColor controls the color of secondary actions within your Workflow, such as ‘Edit Info’ and pencil icons in the Webform review page, the ‘Copy Link’ button on the Webform finish page.

Default vs. customized secondaryColor in Workflows

Applying custom colors

Each style key can be used individually, meaning you can use some or all of them together. Please note however, that a CSS stylesheet can override the colors specified with custom color keys. We generally recommend using either custom colors or the CSS stylesheet, not both together.

Each style key can be used individually, meaning you can use some or all of them together. Please note however, that a css stylesheet can override the colors specified with custom color keys. We generally recommend using either custom colors or the CSS stylesheet, not both together.

After you’ve decided which style keys you'd like to use, you’ll need to identify the HEX codes of the colors you'd like to use.

From there, you can add your style keys and hex code values to your Workflow (weld) configuration files with JSON formatting. For more information about our advanced editor, please see this guide

Here is an example of a Workflow configuration file with custom colors:

{
  // the "style" object will need to be added in to your
  // Workflow (weld) config
  "style": {
    "infoColor": "#FF33DD", //pink
    "linkColor": "#FFA500", //orange
    "primaryColor": "#3386FF", //blue
    "successColor": "#FFF633", //yellow
    "secondaryColor": "#CC33FF" //purple
  }
}

To apply custom colors to your Workflow:

  1. Navigate to the Workflow editor
  2. Click on the three vertical dots to the right of Edit Workflow
  3. Select Edit Weld JSON from the dropdown menu
  4. Add the relevant key(s) and the corresponding hex color code(s) to the "style": {} object
    • e.g. "primaryColor": "#3386FF"
  5. Save

Some color updates can be seen live in the Webform preview after you've saved your configuration changes and refreshed the page.

To see all of your color customizations, including those on the Webform completion and signature pages, use a test submission instead.

Back to Help Center

Other common posts

1 - 0 of 0

Contact support

We know dealing with tech support can be painful. It's our goal to help you as quickly and efficiently as possible. Once we get your message, we will email you back as soon as we can.
    Want to try Anvil first?
    Sign up for free or try it now with any document.