Overview #

The Form Styling Addon for WPForms allows you to customize the appearance of your forms without writing a single line of CSS. Using an intuitive visual interface, you can personalize colors, typography, buttons, input fields, borders, spacing, layouts, and more to create professional, branded forms that seamlessly match your website.

Whether you’re building contact forms, registration forms, surveys, or lead generation forms, the Form Styling Addon gives you complete control over your form’s design while maintaining a responsive and user-friendly experience.

With this feature you can: #

• Customize form colors and typography
• Style input fields and labels
• Design attractive submit buttons
• Adjust spacing, borders, and border radius
• Create responsive, mobile-friendly forms
• Match your forms with your website branding
• Build beautiful forms without writing CSS

Requirements #

Before using the Form Styling Addon, make sure you have:

• WordPress installed
• WPForms plugin installed and activated
• Ultra Addons for WPForms installed
• Form Styling Addon enabled
• An active license

Step 1: Install Ultra Addons for WPForms #

1. Log in to your WordPress dashboard.
2. Navigate to Plugins → Add New.
3. Upload the Ultra Addons for WPForms plugin.
4. Click Install Now.
5. Click Activate.

Once activated, the Form Styling Addon will be available inside WPForms.

📸 Screenshot Placement
Ultra Addons plugin activated.

Step 2: Create or Edit a Form #

1. Go to WPForms → Add New.
2. Create a new form or edit an existing one.
3. Add the fields you want to style.

📸 Screenshot Placement
WPForms Builder.

Step 3: Open the Form Styling Settings #

Inside the form builder:

1. Navigate to Settings → Form Styling.
2. Enable Custom Form Styling.

The styling panel will display all available customization options.

📸 Screenshot Placement
Form Styling settings panel.

Form Styling Settings #

The Form Styling Addon provides a wide range of customization options to help you create visually appealing forms.

Form Layout #

Control the overall appearance of your form.

Available options include:

• Form Width
• Maximum Width
• Background Color
• Form Padding
• Border
• Border Radius
• Shadow

These settings help your form blend perfectly with your website design.

📸 Screenshot Placement
Form Layout settings.

Typography Settings #

Customize the text used throughout your form.

Available options include:

• Font Family
• Font Size
• Font Weight
• Font Color
• Line Height
• Label Typography
• Description Typography

Maintain a consistent brand identity by matching your website fonts.

📸 Screenshot Placement
Typography settings.

Input Field Styling #

Customize the appearance of text fields, dropdowns, textareas, and other input elements.

Options include:

• Background Color
• Border Color
• Border Width
• Border Radius
• Placeholder Color
• Input Text Color
• Focus Border Color
• Field Height
• Padding

These settings improve both usability and visual appeal.

📸 Screenshot Placement
Input field styling settings.

Label & Description Styling #

Control the appearance of:

• Field Labels
• Required Asterisk
• Field Descriptions
• Helper Text

Customize colors, font sizes, and spacing for improved readability.

📸 Screenshot Placement
Label styling settings.

Submit Button Styling #

Create attractive call-to-action buttons.

Customize:

• Button Background Color
• Text Color
• Font Size
• Font Weight
• Border Radius
• Padding
• Border
• Hover Background Color
• Hover Text Color
• Hover Border Color

These options allow you to design buttons that match your brand.

📸 Screenshot Placement
Button styling settings.

Spacing & Alignment #

Adjust spacing throughout the form.

Available settings include:

• Field Margin
• Label Spacing
• Row Gap
• Column Gap
• Section Spacing

Proper spacing improves readability and user experience.

📸 Screenshot Placement
Spacing settings.

Error Message Styling #

Customize validation and error messages.

Options include:

• Error Text Color
• Error Background
• Border Color
• Border Radius

This ensures validation messages remain consistent with your overall design.

📸 Screenshot Placement
Error styling settings.

Success Message Styling #

Customize the appearance of confirmation messages after successful submissions.

You can modify:

• Background Color
• Text Color
• Border
• Padding
• Border Radius

Provide visitors with a polished confirmation experience.

📸 Screenshot Placement
Success message styling.

Mobile Responsive Design #

The Form Styling Addon automatically creates responsive forms.

Your custom styles will adapt across:

• Desktop
• Tablet
• Mobile

This ensures a consistent experience on every device.

Live Preview #

As you customize your form, changes are reflected instantly inside the builder, allowing you to preview your design before publishing.

This makes it easier to fine-tune colors, spacing, typography, and other visual elements.

📸 Screenshot Placement
Live Preview.

Publishing Your Styled Form #

Once you’ve finished customizing your form:

1. Click Save.
2. Embed the form using:

• WPForms Block
• Shortcode
• Elementor Widget
• Gutenberg Editor

Your styling will automatically appear on the frontend.