google-site-verification=Ls9KcWrF2YZT7kMIaBSLGLUrYl--Png3qoN53OOo4WM Contact Form 7 Styler - Spectra

No results found. Try again with different words?

Search must be at least 3 characters.

Contact Form 7 Styler

This block allows styling forms added with Contact Form 7 plugin. All forms created with Contact Form 7 plugin will appear in list. You can choose a form to display and style it with Contact Form 7 Styler options.

styler-demo

Key Features –

  • List all available CF7 forms, so that you can choose the required one
  • Predefined style for form input fields – Box and Underline
  • Border for each input field with style options like width, radius, color etc.
  • Typography and Color options for Content (Label, Input text)
  • Separate customization options for Radio & Checkbox (Size, Typography, Color, Border)
  • Total customization for Submit Button
  • Styling for Field Validation (Success/ Error) messages
  • Spacing for all form elements

Field Style and Border

This tab offer options to style input fields like name, email, subject, message etc. You can choose a predefined Box or Underline style, apply border and customize it.

cf7-styler-demo

Customize Content

Label of the form fields and its input text can be customized under Content tab.

Customization options for Radio & Checkbox

If your form contains Radio & Checkbox fields you can style them according to your color theme. Label of these fields have typography and color settings.

cf7-styler-field-style

Customization for Submit Button

Following settings are available for Submit Button –

  • Button Alignment
  • Button Font
  • Border Style
  • Border Width
  • Border Radius
  • Text Color – Normal, Hover
  • Background Color – Normal, Hover
  • Border Color – Normal, Hover
  • Button Padding (px)

Styling for Field Validation (Success/ Error) messages

Whenever user enters input in the field, it gets validated. If it is invalid error message get displayed else on successful form submission success message get displayed. Various styling options are available under Success/ Error Message tab.

Was this article helpful?


Did not find a solution? We are here to help you succeed.

Build Ultra High performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get your hands on Spectra pro

Enter your name and email address and be the first to learn about updates and new features.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.