Form wrapper is a space which is occupied by the whole form. This can be easily designed with the help of Styler for WpForms plugin. The plugin leverages the power of WordPress customizer API using which every change you make in the plugin is immediately previewed. The plugin has more than 100+ options to design various aspects of the form. In this article you will get to learn all the steps for changing the look and feel of form wrapper.

Requirements for Designing WpForms

• WpForms Designer plugin

Tutorial for Designing WPForms plugin

• Once you have installed and activated WpForms Designer plugin then navigate to customzer -> Styler for WpForms.
• Now select the form of which you want to change form wrapper properties. The plugin will automatically save your form selection and reload the page to show all the available design options.
• Look of Form Wrapper option and you can start making the changes here.

• In the from wrapper section you can make the following design changes:
  • Maximum width:  This property determines the maximum width in px or %  which can be applied to the given form.
  • Font family:  Using this property you can choose among the different font families.
  • Background Color: This property specifies the background color for your form. You can select any color you want to apply to your form. You can apply the background color by selecting the select color button.
  • Background image: This property enables you to apply any type of background image  to your form. You can select the background image by selecting the Select Image option button.
  • Border Size: This property can be used to give a specific  size to your border. You can give the size of the border in px,% or ems.
  • Border Type: This property allows you to select the type of the border . There are different types of borders which can be applied for eg: dotted,dashed,double,etc  .The default type is inherit.
  • Border Color: This property allows you to select the color for the border . You can select any color for the border by choosing the Select color option.
  • Border radius: This property is used to apply the   border radius to your form.  You can use px ,% or em values  to determine the border radius.
  • Margin: This property is used to apply the margin to your form  content.  The margin provides  the space  for the content. Its values can be given in px,% or ems. You can also use the Margin-top, margin-right,margin-bottom and margin-left properties.
  • Padding: This property is used to add the space between your  border and content. You can use the padding-top, padding-right, padding-bottom and padding-left properties.

Here is the video tutorial for changing the design of WpForms form wrapper

Method to Change Design of Form Wrapper using CSS

You can also apply the above changes directly using CSS code. The code should be place in theme’s style.css or under customizer -> Additional CSS.

Note: Make sure you replace FORMID in the above code with actual form id of your form.

Code Explanation

The above CSS code will change the background color of the form wrapper to #f2f2f2 and add a border of 1px to it. Feel free to add any other properties like font-family, padding etc to it.

If you need any help with the plugin or custom css code then leave a comment below and I will get back to you with a solution.