By default, a ConvertCalculator form adopts your website's style settings.
Fonts, headers, colors, spacing are all inherited from your website. For this reason, your form in the builder looks different than your 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.
In 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!
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 select 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.
With 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.