WpForms is a freemium WordPress plugin. It is one of the fastest growing plugins in terms of active installs in the WordPress plugin repository. In this article, I will show you how to design WpForms without CSS coding. It will work both with the lite and pro versions of WpForms.

This article is targeted towards users who either don’t have time to find classes of WpForms elements and then add properties for them or those who don’t have experience in using CSS.

To Style the form we will be using free WpForms Styler plugin from WordPress repository. This plugin has 150+ style options for different sections of the form. It has 4000+ active installs and 11,641 total downloads.

Features of Styler for WpForms.

  • 150+ controls to style different parts of forms.
  • Live preview of design changes.
  • Design unlimited forms for free.
  • Form controls divided into multiple sections.
  • Easy to use controls like color picker, values supported in px, em, rem, and %.
  • Responsive design options for desktop, tablet and mobile device

How to Install Styler for WpForms.

  • Login into your WordPress dashboard and go to Plugins -> Add New.
  • Search for ‘Styler for WpForms’ and then install it.
  • Activate the plugin and you are all set to start designing the form.

How to Style WpForms with Free Plugin

  • Login into your WordPress Dashboard and open the page in which you have added the form which you want to design.
  • Open customizer on this page. If are not aware of how to do it then take a look at the customizer tutorial here.
  • In the customizer’s sidebar click on the ‘Styler for WpForms’ Panel. This panel will have only one section titled ‘Select Form’.
  • Once you select the form you want to design than the page will prompt a message. Click on ‘Ok’ and then the page will refresh.
  • Now you will see all the design options. You are now ready to customize the design of form to your liking.
  • Since all the changes are live previewed so, it shouldn’t take too much time and effort to implement the design.
  • Once you have finalized the changes then you can click on the ‘Publish’ button and the changes will be saved into the database.

 

How to style WpForms?

Style WpForms with Free Plugin

Styler for WpForms FAQ’s

Which parts of the form I can design with this plugin?
You can style form wrapper, header, title, description, labels, text fields, dropdowns, radio inputs, checkbox inputs, paragraph textarea, submit button, confirmation message and error messages with it.

Which are the different type of settings available?
Some of the basic settings which are available for most of the fields include font color, font size, font weight, text decoration, line height, margin, padding, border size, border style, and border-radius.

Can I hide labels for Form Fields?
Yes, you can hide labels for form fields. This setting is available under ‘Field Labels’ section.

Can I design a Multi-page form with this plugin?
Yes, you can design multipage form with it. However, it is not possible to switch between different pages while the customizer is open. So, you should temporarily remove the page breaks and design the form. Once you are done you can add the page breaks back and the design will be preserved in the multi-page form as well.

Can I create a multi-column layout?
We are working on a multi-column layout plugin that will let you create 2, 3, 4, 5, 6 column layouts. But as of now, this is not possible.

How can I get support in case I am stuck?
You can get support using the contact page or via the official forum for Styler for WpForms.

Plugin in WordPress repository.
Download Styler for WpForms