Global Calculator Style

Settings / Design / Main Color

The Main calculator color is a quick way to update the color of all the buttons, checkboxes and radio buttons. You can override this color in each question's Style settings.

Settings / Design / Layout

You can set the calculator to two columns here. Pick the ratio of the columns (Two thirds / One third, Half / Half or One third / Two thirds)
On small screen devices the columns will go one above the other, so you can also pick which column goes on top.
You can also make the second column sticky, so that when you scroll it always stays near the top of the screen

Settings / Design / Template

Here you can style the calculator widget as whole or the general style for the questions.

Editor Background color
If your website has a dark background you may want to make the calculator editor also dark, for better editing.

Calculator Background color
Pick a background color for the calculator. The default is transparent.

Maximum Calculator Width
Usually the calculator fills the width of the container it's placed in on your website. Here you can restrict the calculator to a maximum width.

Whole Calculator Padding
This is the padding between the edge of the calculator and the questions. It's zero by default, but it comes in handy when you have a calculator background in place.

Question Settings
Set the colors, sizes, padding etc for all the questions in the calculator.
Tip: To make the background transparent for all the questions, type "transparent" in the Question Background color box.

Calculator Corners & Borders
Set a border for the calculator, as well as a rounded corner.

Calculator Position
Place the calculator on the left or on the right within it's container. This works when the calculator is set a maximum width (see above) and the container is wider than that maximum width. (In CSS terms, it sets the calculator's DOM element margin-right or margin-left to zero)

Align Calculator Content
You can align the content within the calculator to the left/right or center.

Need Help?
Already checked the help docs? We're quick to answer and friendly
Thanks!
We'll reply very soon at
Send message