Landing Page Forms Styler

Contributors: Breon Willams Tags: forms, styling, Elementor, landing-pages
Requires at least: 5.0
Tested up to: 6.8
Stable tag: trunk
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Description

Landing Page Forms Styler lets you create and manage multiple form‐style presets via a clean admin UI. Define a Title and Custom Class, then tweak field and button borders, colors, radii, typography, spacing, and more—all with an optional live preview. Assign your class in Elementor (or any theme) and your forms adopt your styles automatically.

Installation

1. Unzip the plugin archive.
2. Upload the entire landing-page-forms-styler folder to your /wp-content/plugins/ directory.
3. Activate the plugin through Plugins in WordPress.
4. Navigate to Landing Page Forms in the admin sidebar to create and manage your style presets.

Usage

1. Click Add New Style, give it a Title (e.g. “Blue Form”) and a Custom Class (e.g. blue-form).
2. Adjust your form field and button settings (border radius, colors, etc.).
3. Click Save Changes.
4. In Elementor, open your form widget → Advanced → CSS Classes and enter your custom class.
5. Update or publish your page—your form will now reflect the preset.

Screenshots

1. All Styles list in the admin.
2. Add/Edit Style screen with controls.
3. Front-end form displaying a saved preset.

Changelog

1.0.0

• Initial release: multiple presets, live preview, full styling controls.

Frequently Asked Questions

Q: Can I apply different presets on the same page?
A: Yes—just assign distinct custom classes to different form widgets.

Q: Does this work with non-Elementor forms?
A: Absolutely. Any form container using your custom class will inherit the styles.

Q: Where do I find my custom class field in Elementor?
A: Under Advanced → CSS Classes in the form widget’s settings.