Form Wrapper is the container that contains form header, fields, and submit button. You can style Ninja Form wrapper by adding properties like background color, image, font family. In this article, I will show you multiple ways to design form wrapper.
Ways to design Ninja Forms
- With free Ninja Forms styler plugin
- With custom CSS
Style Form Wrapper of Ninja Forms with Free Plugin
Styler for Ninja Forms is a free WordPress plugin with intuitive controls to easily design without any CSS coding. It has 100+ design controls and settings to style various parts of the form.
- Install and activate Ninja Forms Styler from the WordPress plugin repository.
- Now open the page in frontend where you have added the form. Click on customize option and then open the ‘Styler for Ninja Forms’ option.
- Select the form you want to design and then all the design options for this form will appear.
- Open ‘Form Wrapper’ section and from here you can design the form container.
Details of Form Wrapper section design control
- Width: This setting controls the width of the form container. You can give values in units like px, %, em or rem. It is also possible to give separate widths for desktops, tablets, and mobile devices.
- Font Family: There are 100+ font families to select from. Whichever font family you select it will get applied throughout the form be it field labels, text, description, error or confirmation messages.
- Form Background: From here you can select a color using the color picker or if you have hex code then you can input that too.
- Form Background Image: If you want to use an image instead of color then use this setting. It has native WordPress file uploader and you can use an image from the gallery too.
- Border: This has three different sub controls to give size, type, and radius for the borders.
- Form Border Color: Use this setting to give color to the form border.
- Padding: There are separate columns to give left, top, right and bottom padding.
- Margin: Similar to padding we have separate columns to give left, top, right and bottom margin.
All the style changes you will make to form wrapper using Ninja Forms Styler plugin will be previewed instantly.
Style Form Wrapper of Ninja Forms with Custom CSS
This method is only advisable if you have basic knowledge of CSS. Also, all the style changes you will be made using this method will not work when you will change the theme. In that case, you will have to copy and paste the CSS you did earlier to a new theme.
Note: Make sure your replace FORMID in the above code with actual id of your form.
There are multiple ways to add custom CSS like adding it in the style.css file of your theme or installing CSS plugins. You can also add it under ‘Additional Settings’ from WordPress customizer.
Once you have decided the method you prefer then use the following Code to target Ninja Forms form wrapper.
Let us know in the comments section below about which method you preferred to use or if you have suggestions or feedback.