Ninja Forms - Layout Master
This extension allows to change layout and styles of your Ninja Forms within your WordPress admin. Start creating beautiful and responsive layouts without any programming knowledge today!
- Create 100% responsive forms using build in visual layout and styles editor.
- Use drag-n-drop to create up to 4 column form layouts.
- Easily style form elements including input boxes, labels, and wrappers.
- Style Ninja Forms success and error messages.
- Remove Fields marked with a * are required message.
- Export and import your forms across the blogs with styles intact.
- Set custom CSS class to use default theme styling or use;
- Custom CSS editor to create your own custom form styles.
- Get free automatic updates.
- Rows (Default)
This renders form field elements row by row (default). This method allows expanding form fields (Ex. Making a message field 3 colums wide).
This will render form fields column by column. This method does not allow expading form fields, meaning each form field will be exactly one column wide.
Layout Master How-To
Here is quick guide how you can style your form as seen bellow.
1. Create Ninja Form
First step is to create a form. To do so, go to Forms > Add New.
2. Add Form Fields
- On the left you should see different types of field groups, scroll down to User Information and click on First Name, Last Name, Phone, Email. These fields will be added to your form.
- Scroll up to section Template fields and add Textarea and Submit fields.
- On the right you should see list of fields added to form, find Textarea and change Label to Message as shown bellow:
- Click on Save Field Settings on the top (bottom) of the page.
3. Form Layout
Open Layout tab.
- From Columns dropdown pick 2. This will create 2 column layout.
- Arrange the layout by draging and droping fields as seen bellow. Note: to make Message field larger move your mouse pointer to bottom right corner, a small arrow will appear, drag it to resize the field.
- Optional. You can click Form Preview to see how the form looks right now and if any additional adjustments are required.
4. Form Styles
Open Styles tab.
- Under General Settings metabox, make sure Enable Form Styles checkbox is checked (as seen in the illustration below).
- Expand Form metabox
- Pick #e8e8e8 for Background Color, or any other color of your choice.
- Pick #24890d for Border Color, or any other color of your choice.
- Set Border Size to 5.
- Set Border Radius to 5 and;
- Set Form Field Padding to 10.
- Expand Form Submit Button metabox
- Pick #24890d for Background Color, or any other color of your choice.
- Pick #ffffff for Text Color, or any other color of your choice.
- Click Save button.
5. Form Preview
Click on Preview tab/button to see your form! If you not sure how to add form to your post or page, please, refer to Ninja Forms Documentation for further details.