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!

Features

  • 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.

Front-End Rendering

Front-end rendering under Layout tab (see illustration below) allows to modify how the form is composed and rendered on the front-end.

There are two two options:
  • 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).
  • Columns

    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 NameLast NamePhoneEmail. 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.
Note: You will be promted to enter form title. Just enter "Contact Form" (wihtout quotes) and click save.

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

  1. Pick #e8e8e8 for Background Color, or any other color of your choice.
  2. Pick #24890d for Border Color, or any other color of your choice.
  3. Set Border Size to 5.
  4. Set Border Radius to 5 and;
  5. Set Form Field Padding to 10.
  • Expand Form Submit Button metabox
  1. Pick #24890d for Background Color, or any other color of your choice.
  2. 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.

Still need help? Contact Us Contact Us