Custom styling with CSS

Learn how to use custom CSS to customise a calculator even further

When you embed a calculator on your website it will inherit your current stylesheet (CSS). The form will "copy" styles like font family, font sizes, form styles and layout, and line heights from your website.

Note: in case of styling errors in your form, a probable cause is conflicts with your website's stylesheet

By default, your calculation form will have basic styles applied. In case your want more personalization or simply want to improve the look and feel of your form elements, you can apply custom styling with CSS. Custom styling gives you the power to create the look you need.

To successfully apply the principles described in this article, experience with HTML and CSS is required.

Introduction

Before we dive into the details, we will first explain how form items are constructed. And how different components within the form item relate to each other. Form items, like multiple choice questions and formulas, consisting of various components and sub-components.

  • Components are the building blocks of the form item, like title, description, input, question-item and textarea. Item components are usually a div
  • Sub-components are the blocks within a component, like prefix, value, suffix for a formula result. Sub-components are usually a span

All item components and sub-components have supported ConvertCalculator classes. All classes begin with cc. For all classes cc is followed by two underscores and the specific type.

CSS stands for cascading style sheets. The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. Higher-order classes are therefore leading. Your embedded calculator form (class name cc) is the highest order.

The ConvertCalculator class structure is as follows:

  • Roughly, items in ConvertCalculator are either a question, formula, button, element or view-navigation:

    • cc__question (+ each question type is assigned a specific class)
    • cc__formula (+ each formula type is assigned a specific class)
    • cc__button (additionally cc__submission-button, cc__checkout-button, cc__link-button, cc__viewNavigation-button)
    • cc__element (additionally cc__image-element, cc_heading-element, cc__text-element)
    • cc__view-navigation (including cc__view-navigation-arrows, cc__view-navigation-numbered-dots, cc__view-navigation-dots)
  • Questions and formulas (can) have a title and a description:

    • cc__element-title: cc__question-title & cc__formula-title
    • cc__element-description: cc__question-description & cc__formula-description
  • Question types, where each question has a specific class name (see for details the CSS rules)

    • Number (number, range, number incrementer, order list)
    • Option (multiple choice, multiple selection, dropdown, button group)
    • Switch element (switch, yes/no)
    • Text (text, email where input field is a text area)
    • Input (phone, place, date, time, coupon where input field is an input)
    • Upload (file, signature)
  • Formula types

    • There are 3 formula types that have a specific class name
    • cc__formula-formula, cc__formula-table, cc__formula-layeredImages
  • State indicators, which are relevant for question types that include states such as option, time and date question, and the page numbering.

    • is-selected, is-hovered

The next paragraph gives an overview of the specific CSS rules you can apply for styling your calculator form.

Note: we have created a substantial list of supported class names. In case you cannot find the specific class name, you can always use advanced CSS to achieve the result you need.

How to apply custom styling with CSS

Applying custom CSS is easy. Just go to your calculator settings and select the "Custom Code" tab. Which is indicated by < >. You will see a dark rectangle, in which you can put your CSS.

Now just copy/paste your code or write it directly into the editor.

Note: expand the settings window to get some extra room

Add custom CSS

CSS-rules

Here you can find all CSS rules you can use in a calculator:

// Namespace (use this to scope rules)
.cc {}
// Flexbox container
.cc__flex-container

// Flexbox column
.cc__box {}
// Element class names (apply to both questions and formulas)
.cc__element-title {}
.cc__element-description {}

Number questions

// Number question type
.cc__number-question-wrapper {}
.cc__question-title {}
.cc__number-question {}
.cc__number-question-input {}
// Range question type
.cc__range-question-wrapper {}
.cc__range-question {}
.cc__range-question-value {}
.cc__range-question-min {}
.cc__range-question-max {}
// Number incrementer question type
.cc__numberIncrementer-question-wrapper {}
.cc__numberIncrementer-question {}
.cc__number-question-input {}
// Order List question type
.cc__orderList-question-wrapper {}
.cc__orderList-question {}
.cc__orderList-question-item {}
.cc__orderList-question-item-name {}
.cc__orderList-question-item-value {}

Option questions

// Radio question type
.cc__radio-question-wrapper {}
.cc__radio-question {}
.cc__radio-question-item {}
.cc__radio-question-item-label {}
.cc__radio-question-item {}
.cc__radio-question-item-label {}

// Including images
.cc__radio-question-item--image {}
.cc__radio-question-item--image-label {}
// Multiple select (checkbox) question type
.cc__checkbox-question-wrapper {}
.cc__checkbox-question {}
.cc__radio-question-item {}
.cc__radio-question-item-label {}
// Select question type (Dropdown)
.cc__select-question-wrapper {}
.cc__select-question {}
.cc__icon-button {}
.cc__dropdown-option {}
// Button group question type
.cc__buttonGroup-question {}
.cc__buttonGroup-question-button {}
.is-selected {}

Switch element

// Switch question type
.cc__switch-question-wrapper {}
.cc__switch-question {}
// Checkbox question type
.cc__checkbox-question-wrapper {}
.cc__checkbox-question {}
.cc__question {}

Text & Input

// Text question type
.cc__text-question-wrapper {}
.cc__text-question {}
.cc__textField-question-textarea {}
// Email question type
.cc__email-question-wrapper {}
.cc__email-question {}
.cc__email-question-textarea {}
// Place question type
.cc__place-question-wrapper {}
.cc__place-question {}
.cc__place-question-input {}
// Places question type
.cc__places-question-wrapper {}
.cc__places-question {}
.cc__places-question-fromPlace-input {}
.cc__places-question-toPlace-input {}
// Date question type
.cc__date-question-wrapper {}
.cc__date-question {}
.cc__date-question-input {}
// Dates question type
.cc__dates-question-wrapper {}
.cc__dates-question {}
.cc__dates-question-fromDate-input{}
.cc__dates-question-toDate-input {}
// Date picker (part of date(s) question)
.cc__date-picker-box {}
.cc__date-picker-header {}
.cc_date-picker-table {}
.cc__datepicker-day {}
// Time question type
.cc__time-question-wrapper {}
.cc__time-question {}
.cc__time-field-input {}
.cc__time-field-button {}
.cc__time-field-button-am {}
.cc__time-field-button-pm {}
// Coupon question type
.cc__coupon-question-wrapper {}
.cc__coupon-question {}

Upload

// File question type
.cc__file-question-wrapper {}
.cc__file-question {}
// Signature question type
.cc__signature-question-wrapper {}
.cc__signature-question

Formula

// Formula with number (Float) as result
.cc__formula {}
.cc__formula-title {}
.cc__formula-result {}
.cc__formula-result-prefix {}
.cc__formula-result-value {}
.cc__formula-result-suffix {}

// Formula with a string as result
.cc__formula {}
.cc__formula-title {}
.cc__formula-result {}
.cc__formula-result-text {}
// Formula Table
.cc__table {}
.cc__table-formula {}
.cc__table-head {}	
.cc__table-head-row {}	
.cc__table-head-data {}	
.cc__table-head-data-X {}	// X represents the column number
.cc__table-body {}	
.cc__table-row {}	
.cc__table-row-X {}	// X represents the row number
.cc__table-data {}	
.cc__table-data-X {}    // X represents the column number
// Layered images
.cc__formula{}
.cc__formula-title {}
.cc__layeredImages-formula-wrapper {}
.cc__layeredImages-formula {}