Ninja Form

The Ninja Forms widget allows you to embed and style your Ninja Forms inside Elementor pages easily. Follow these steps to create, configure, and style your forms.

🔹 Step 1: Create a New Form in Ninja Forms

1. Go to your WordPress dashboard.
2. Navigate to Ninja Forms → Dashboard.
3. Click the blue “Add New” button.
4. Select a form template (e.g., Contact Us, Event Registration, Job Application) or start from Blank Form.
5. After choosing a template, your form will open in the editor.

🔹 Step 2: Add Fields to the Form

1. Click “Add New Field” inside the form editor.
2. Choose fields from the right sidebar:
   • Common Fields: Single Line Text, Email, Paragraph Text, etc.
   • User Info Fields: Name, Address, Phone, etc.
   • Layout Fields: HTML, Divider, Repeatable Fieldset.
   • Miscellaneous: Star Rating, Anti-Spam, Hidden, etc.
3. Drag and drop any field you need into your form.
4. Click Done, then Publish or Save your form.

🚀 How to Enable the Ninja Widget

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Ninja widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🔹 Step 3: Add the Form to Elementor

1. Open the page in Elementor Editor.
2. Search for “Ninja Forms” in the widget panel.
3. Drag the Ninja Forms widget into your desired section.

1. On the left panel under Content → Form, select the form you created (e.g., “Contact Me”).

🔹 Step 4: Customize the Form Design

Navigate to the Style tab in Elementor:

• Form Heading:
  • Change typography, font size, and color.
  • Add margin and padding.
• Fields:
  • Customize field background, border, and padding.
• Label:
  • Adjust label color, spacing, and font.
• Button:
  • Style the submit button, including text color, background, border, and hover effects.