Frontend Styles (Frontend Skins)

Introduction

Choose between two frontend styles to decide which style best suits your website and brand.

Benefits, Features & Use Cases

You can change your calculator form style to match your website's general styling. This will help you adapt your calculator to any kind of device.

Watch It In-Action 

Frontend Style 1

This style gives you responsive options (found in the advanced options menu).


Frontend Style 2

This style places the titles on top of the element while making the element full width.



Frontend Style 3 (No styling/Manual)

To make it easier for developers to build their own calculator style, we will develop a frontend skin that contains only CSS classes and no styling. As a result, the calculator form can be styled according to your preferences by using CSS classes.

Note: currently in development.


Frontend Style 4 

Calculator form style 4 has a modern touch that wraps the element title in a borderline. 



Note: currently in development.

How to Activate & Use This Feature 

For layout purposes, you can also set a max width for your calculator form.

Additional Information

Related Articles

How do I style my 'Email Quote', 'Detailed List' or 'Coupon' Buttons? https://designful.freshdesk.com/support/solutions/articles/48001143165-how-do-i-style-my-email-quote-detailed-list-or-coupon-buttons-

Limitations

For now, there are just 2 styles, but more are coming very soon!