By default, a ConvertCalculator form adopts your website's style settings.

Fonts, headers, colors, and spacing are all inherited from your website. For this reason, your form in the builder looks different than the embedded form on your website. In most cases, the transition from our builder to your website is successful, and no further style changes are necessary.

When you need additional styling, we offer several possibilities:

• Form style settings
• Item style settings
• Custom styling with CSS

We will briefly explain the options below.

Form style settings

Your form style settings is where you can adjust the global styles of your form, such as:

• General settings: primary color, calculator background color, calculator spacing, and the element spacing
• Calculator font style: font family, text color, font size, font-weight, and text capitalization
• Heading style: heading font family, heading color, heading font-weight, heading capitalization
• Heading font sizes: heading 1 - heading 6
• Action style: button color, button corner rounding, link color, link style

Note: changes in your form style settings are directly visible in the app.

Do you need more generic style options for your calculator form? Don't hesitate to reach out by sending a chat message via the bubble in the bottom right corner!

Item style settings

When you want to modify specific form elements, you can change the item style settings, which are similar to form style settings. You can find the item style settings by selecting the form item you want to modify and selecting the Style tab.

At this point, the in-app item style settings are limited. Therefore, we refer to the custom styling options (see below) when more styling options are needed.

Custom styling with CSS

Using custom styling with CSS, you can manipulate any aspect of your calculation form. We provide a set list of supported class names that match the components of the form items. Further, with custom classes, you can vary the styling of equivalent form items.

Note: your custom styling is only visible on your embedded form and not in the builder.