Frontend Styles (Frontend Skins)

Created by Mike B, Modified on Thu, 25 Jan at 11:37 AM by Designer Nahin

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! 

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article