Gravity Forms Styler is the ultimate plugin for enhancing Gravity Forms styling and functionality. Using it, you can design and customize forms that draw visitors’ attention.
Unlike standard customization and styling options, it gives you complete control over every aspect of your forms. Find out what Gravity Forms Styler has to offer in this documentation.
Gravity Forms Styler Settings
Gravity Forms Styler offers the flexibility to toggle the visibility of form titles and descriptions. It also lets you enable AJAX to streamline form submissions and customize each form element’s color, font, spacing, and more.
Learn more about Gravity Forms Styler’s standout features and functionality in our documentation.
Content Tab
Content
Gravity Forms: Choose the Gravity Form you want to include.
Show Title: Toggle to display or hide the form title.
Show Description: Toggle to display or hide the form description.
Use Ajax: Toggle to enable or disable Ajax for the form submission button.
Tabindex: Tabindex is used to advance to the next form for better navigation by using keyboard’s tab key.
Background
Apply color, gradient, image, video, pattern, or mask to the whole module area to customize or personalize the module’s visual appearance.
Admin Label
Admin labels match the module names by default, and you can change the labels in the backend without affecting the front end.
Design Tab
Heading
Customize the form’s heading, title, and description extensively. Modify the heading’s background, color, margin and padding, box-shadow, border type, etc. Also change the font, font style, alignment, text color, text size, and many other options for the title and description.
Label
Make changes to the form label’s font, font weight, font style, text alignment, text color, text size, letter spacing, and line height to suit your design requirements.
Sub Label
Change the font, font weight, font style, text alignment, text color, text size, letter spacing, and line height of the form’s sub-labels.
Description
Change the form’s description’s font, font weight, font style, text alignment, text color, text size, letter spacing, and line height based on your design needs.
Warning Text
Customize the warning text of your form’s font, font weight, font style, text alignment, text color, text size, letter spacing, and line height.
Input
Style the input fields through color, font, size, and more. You can customize the background color, padding and margin, placeholder color, font, text size, border type, box shadow, and many more.
Select
Customize the select option fields by modifying the background color, padding, and margin. You can also adjust the font, font weight, font style, text color, text size, border style, box shadow, and various other options.
Textarea
Make the textarea look exactly how you want by customizing the background color, padding, margins, and placeholder color. You can also make multiple changes to the font, text, border, and box shadow.
Checkbox
Modify every aspect of the checkboxes on the form by changing the gap, background color, tick color, border color, size, border thickness, and multiple text and font customizing options.
Radio
Customize the appearance of the radio input area by adjusting the gaps between radio inputs and making changes to the color (background, dot, and border), size, font, border thickness, and line height.
Time
Modify the look and feel of the form’s time from input to selecting options. You can change the background color, padding, margin, input placeholder, and colon color, and make various font, size, border, and box-shadow adjustments.
Consent
Customize the appearance of the consent area in the form by making changes to the label, checkbox, and description. You can adjust the label’s font, text, letter spacing, and line height. Modify the checkbox by changing its background color, tick color, border color, size, font, and text. Plus, you can customize the description’s color, font, text, size, and more.
Required Text
Enhance the appearance of the required text by adjusting the font’s weight and style. You also have the option to customize the text size, color, letter spacing, and line height.
Error Box
Modify the background color, padding, and margin of both the global and field errors in your form. You can also make multiple changes to the font, text, border, letter spacing, and more.
Section
Customize everything from the section to the title and description of the section break unit. You can change the background style and color, spacing, box shadow, and border. Also, you can make various adjustments to the spacing, font, and text of the title and description.
Progress
Both bar and step come with dozens of customization options. In the bar, you can make changes to text color, font type, font size, spacing, and background color. In the step, you can change the alignment and the color of the number, border, active step, complete step, and bottom border. You can also customize the step’s font and text styling.
Button
Customize every aspect of the form’s button, including placement, color, size, and border. Choose from three alignment options, enable a full-width button, apply background color, images, or gradients, and modify padding and margins. Additionally, you have various font, text, border, and box shadow options to choose from.
Confirmation
Personalize the confirmation options by customizing the background color, spacing, font, text alignment, text size, and more. You can also enable a gradient for the background or add an image, along with other image-related customization options.
Focus Settings
Customize the colors in the focus settings from input to textarea to align with your design preferences. You can change the input background color, border color, and text color. Also, you can modify the selected background color, border color, and text color for both input and textarea elements.
Sizing
Adjust the width and height of the module to match your design requirements. You can set a maximum width, maximum height, and minimum height, and align the module left, center, or right
Spacing
Change the default margin or padding with the spacing settings. Type numerical values to adjust the top, bottom, left, and right margins for the entire content element.
Filters
Apply color filters to the entire module, including hue, saturation, brightness, contrast, invert, sepia, opacity, and blur, in 16 different blend modes.
Transform
Transforms let you manipulate modules using five types of transforms: scale, translate, rotate, skew, and origin.
Animation
Choose from seven different animation styles, such as Fade, Slide, Bounce, Zoom, Flip, Fold, and Roll.
Advanced Tab
Advanced Tab contains all of the standard Divi module options. You can use those features in our modules too.
