How to use the styler

This is a Pro setting.
Don’t have the Pro version yet? Purchase it Here
There are 4 main areas when the live summary is turned on for a form.
  1. The form Container: this is the box around the form itself. Note: the summary is outside of this box

  2. Next to the form container, a sidebar container is added which consist of the other three areas:
  3. The Title box
  4. The lines of the summary
  5. The total box

1. Open the form settings

2. Find the “Enable Custom Styling” switches

Each setting block has one of these “enable custom styling” switches because you are able to define styling for each area.

Custom styling currently includes all of the following settings:

  • Fonts
    • Font -Family (You can choose between ALL google fonts because this plugin is integrated with Google Fonts API)
    • Font-Size in PX, EM, REM, %, pt, in
    • Font color
    • Text align
    • Text weight
  • Background settings
    • Background-color
    • Background-image
    • Background-image-url
    • Background-fill
    • Background-repeat
    • Background-position
  • Border Settings
    • Type (Solid/Dashed/Dotted)
    • Border Color
    • Border Width (Top/Left/Right/Bottom)
    • Border Radius (Top Left/Top Right/Bottom Left/Bottom Right)
    • Units choices are: PX, EM, REM, %, pt, in
  • Padding Settings
    • Left/Top/Right/Bottom
    • Units choices are: PX, EM, REM, %, pt, in

The above settings apply to Each main area and allow for a near total control over everything. More settings are coming in future versions.

If there is anything that you want to do that is not yet possible with the settings than reach out to me and I will provide a custom solution to you.
Scroll to Top