Quantcast
Channel: InstaWP
Viewing all articles
Browse latest Browse all 998

How to Create a Form on WordPress Using Ninja Forms 

$
0
0

If you’re looking for the easiest and most flexible way to create a form in WordPress, you’ve probably heard of Ninja Forms. Whether it’s a contact form, lead capture form, or a custom submission form for your client’s site, Ninja Forms makes it incredibly easy.

And when paired with InstaWP — a lightning-fast WordPress development toolkit— you can build, test, and share your forms in minutes without touching your live site. In today’s guide, we will teach you how to create a form on WordPress using these two powerful resources. 

Why You Need WordPress

Before we move further, let’s understand the importance of WordPress forms on any site. WordPress Forms are essential — they let users interact, subscribe, contact, or submit content. 

When you’re developing WordPress, you can use WordPress constant forms to: 

  • Get customers’ contact details 
  • Promote newsletter subscription
  • Send a quote 
  • Confirm bookings 
  • Collect feedback 
  • Provide ticket-based customer support

For example, InstaWP, the best Cloud platform for WordPress developers, uses a contact form to collect the email addresses of developers and WordPress agency owners interested in being a part of insight-driven webinars

InstaWP webinar contact forms

If you’re a WordPress developer or agency, creating robust, secure, and reusable WordPress forms is a core part of your workflow.

What Is Ninja Forms?

Ninja Forms is a powerful, drag-and-drop form builder plugin for WordPress. It’s great for developers and beginners alike, offering both no-code UI and extendable developer APIs.

Ninja Forms

Key Features:

  • Easy-to-use visual builder
  • Pre-built templates (contact forms, sign-ups, etc.)
  • Developer-friendly hooks and filters
  • Conditional logic (Pro)
  • Integrations with CRMs, payment gateways (Pro)
  • Shortcodes and blocks to embed anywhere

Ninja Forms is a great alternative to Gravity Forms or WPForms, especially if you’re looking for a freemium option that scales.

Pre-Requisites to Create a Form on WordPress 

Before diving into building your first contact form or advanced submission flow, make sure you’ve got the basics covered. Whether you’re using Ninja Forms or any other plugin, these foundational elements ensure a smooth setup.

1. A Working WordPress Installation

To create a form in WordPress, you’ll need an active WordPress site. This could be:

  • Your live website
  • A local development environment (like Local, DevKinsta, or XAMPP)
  • A temporary site using InstaWP, which we highly recommend for testing

If you’re just experimenting or testing a new form layout, using InstaWP allows you to launch a clean site in seconds — no local setup or hosting account required.

Also, its WP staging site feature is a great way to avoid any incompatibility issues on your live site with Ninja Form or any other plugin. You can create a copy of your live site, design a contact form there, and push the changes directly to your live site

All of this without any coding! 

2. Admin Access to the WordPress Dashboard

To install plugins like Ninja Forms or embed forms into posts/pages, you’ll need administrator-level access to your WordPress dashboard. If you’re a developer working on behalf of a client, make sure you have full backend permissions.

Don’t know what your user role is and want to view or edit it? Here is a detailed WordPress user roles and permissions guide for you. 

3. A Theme That Supports the Block Editor (Optional but Ideal)

While Ninja Forms works with virtually any theme, having a block-based or modern theme improves layout flexibility and visual consistency when embedding forms.

Recommended themes for Ninja Forms:

  • Twenty Twenty-Four
  • Astra
  • GeneratePress
  • Blocksy
  • Kadence

4. Email Sending Setup (For Form Submissions)

Most forms will send email notifications on submission. To ensure reliable delivery:

  • Use an SMTP plugin like WP Mail SMTP to authenticate and send emails
  • Ensure your hosting provider allows outbound emails
  • Set a valid From Email Address under Ninja Forms > Emails & Actions

This avoids your emails landing in spam or not being sent at all.

5. Basic Knowledge of Gutenberg or Shortcodes

To add a Ninja Form to a WordPress page, you should be comfortable with:

  • Inserting blocks in the Gutenberg (Block) Editor, OR
  • Pasting shortcodes into posts, widgets, or classic editors

This is beginner-friendly, but familiarity with WordPress content editing helps you move faster.

6. (Optional) Knowledge of HTML/CSS for Styling

While not required, basic CSS knowledge allows you to:

  • Tweak form layout beyond default theme styles
  • Add animations or hover effects
  • Ensure responsive design on all devices

As a developer, you can also inspect the form structure using browser dev tools and apply styles via your theme’s style.css or customizer.

7. Plugin Installation Rights (If on a Managed Hosting)

If you’re on a managed WordPress host or WordPress multisite setup, ensure plugin installation isn’t restricted. You’ll need it to install Ninja Forms or SMTP utilities.

Bonus: Agencies and developers handling multiple client sites, all using Ninja Forms, must use the best WordPress site management service that enables you to perform bulk plugin updates from a single dashboard. 

How to Create a Form on WordPress With Ninja Forms

Let’s learn how to add Ninja Form to WordPress and use it to create a form. 

Step 1: Create a Staging Site

While NinjaForms is safe and one of the best WordPress contact forms we have around us, the ideal WordPress development practice says that one must create a staging site and chthe eck plugin’s functionalities over there. This one step can avoid:

⚠ Plugin conflicts with existing themes or plugins
⚠ Broken layouts due to unexpected CSS or JavaScript issues
⚠ Live user data exposure during testing
⚠ Downtime or broken pages on your production site
⚠ Deliverability issues (e.g., form emails not reaching inboxes)

As a staging site is a clone of your live website, you can safely install & test Ninja Forms, build forms without user interruptions, try different configurations, and preview the forms’ behavior. 

If you don’t have a staging infrastructure set up yet, InstaWP is your best bet. It lets you launch a temporary, secure WordPress site in seconds — no hosting account, domain, or setup needed.

So, connect your live site with InstaWP now. Once that’s done, you can install Ninja Forms, build and test your form safely, and even share a public preview link with your team or client.

Step 2: Install Ninja Forms Plugin

Now that you’re inside your WordPress dashboard (whether on InstaWP or your live site), it’s time to install Ninja Forms.

  1. Go to Plugins → Add New
  2. Search for “Ninja Forms”
  3. Click Install Now
  4. Once installed, click Activate
Install Ninja Forms to create a form in WordPress

After activation, a new Ninja Forms menu will appear in your dashboard sidebar.

Step 3: Create a Form in WordPress Using Ninja Forms

Let’s build your first form — a simple contact form.

  1. Go to Ninja Forms → Dashboard
  2. Click “Add New”
  3. Choose the Contact Form template (or start from scratch)
  4. The drag-and-drop form builder will open. You’ll see fields like name, email, and messages. Click on the field to rename or make it required. 
lick on the field to rename or make it required to create a WordPress form.
  1. Click “Done” → “Publish” in the top-right corner

That’s it! You’ve now created a form in WordPress using Ninja Forms.

Step 4: Add Ninja Form to WordPress Page

Now that your WordPress contact form is ready, let’s add it to a page. You can use either a Gutenberg block or a shortcode.

  1. Go to Pages → Add New
  2. Give your page a title (e.g., “Contact Us”)
  3. Click the + icon to add a block
  4. Search for “Ninja Forms”
  5. Select the form you created from the dropdown
  6. Publish the page
Create a form in WordPress using Ninja Form Blocks

Done! The form is now embedded on your page.

WP-Cron

 Method 2: Using Shortcode (For Classic Editor or Widgets)

  1. Go to Ninja Forms → Dashboard
  2. Copy the shortcode for your form (e.g., [ninja_form id=1])
Create a Form in WordPress with Ninja Forms using shortcodes
  1. Paste it into any:
    • Post or page
    • Widget
    • Custom HTML block
WP-Cron

This is perfect if you’re using page builders like Elementor or Beaver Builder, too.

Step 5: Secure and Customize Your Form

As a developer, you’ll want to make sure the form:

  • Doesn’t allow spam submissions
  • Matches your brand’s styling
  • Can be extended if needed

For spam protection, enable reCAPTCHA under Emails & Actions → Add Action → reCAPTCHA. You’ll need a site key and secret from Google reCAPTCHA

Forms will inherit styles from your theme. To customize:

  • Use your theme’s CSS file or customizer
  • Add classes to fields via the Advanced Settings in each field
  • Use ! important cautiously to override existing styles

Ninja Forms also provides hooks and filters like:

add_filter('ninja_forms_submit_data', 'custom_form_processing');

function custom_form_processing($form_data) {

    // Your custom code here

    return $form_data;

}

You can extend form behavior — like sending data to a CRM or logging it — without modifying core files.

Bonus: Exporting and Reusing Ninja Forms

Working on multiple client sites? You can export forms and import them elsewhere.

To Export:

  1. Go to Ninja Forms → Import/Export
  2. Select the form → Click Export
  3. A JSON file will be downloaded

🔹 Import:

  1. On another WordPress install, go to Import/Export
  2. Click Import Form → Upload the JSON file

This is useful when using InstaWP to stage and design forms, then moving them to live sites.

Going Further: Advanced Form Features in Ninja Forms

Want more power? Explore Ninja Forms’ pro extensions:

  • Conditional Logic (show/hide fields based on answers)
  • Multi-Part Forms (split into steps)
  • File Uploads (collect CVs, images, etc.)
  • CRM Integrations (HubSpot, Mailchimp, Salesforce)
  • Payment Gateways (PayPal, Stripe)

These features are handy for agencies creating complex business forms.

Final Thoughts: Why Developers Love Ninja Forms + InstaWP

If you’re a WordPress developer, this combo is a dream:

  • Ninja Forms gives you flexible form creation, with enough power to satisfy both no-code clients and developers.
  • InstaWP makes staging, testing, and sharing forms ridiculously fast — especially when juggling multiple client projects.

You now know how to:

  • Create a form in WordPress
  • Add Ninja Form to a WordPress page
  • Create a contact form in WordPress
  • And do it all inside a blazing-fast sandbox

Now go build some forms — the right way 🚀

Frequently Asked Questions (FAQs)

1. How do I create a contact form in WordPress without coding?

Use Ninja Forms’ drag-and-drop builder. You can build a form in minutes and add it to any page via block or shortcode.

2. Can I test a Ninja Form before going live?
Yes — use InstaWP to spin up a test site, build and test the form, then migrate or export it to your live site.

3. How do I add a Ninja Form to a WordPress Page?
Use the Ninja Forms block in the page editor or paste the form’s shortcode where you want it to appear.

4. Can I create custom form actions using code?
Absolutely. Ninja Forms exposes hooks and filters you can use to modify submission data, send to APIs, and more.

5. Is Ninja Forms free?
Yes, the core plugin is free. Paid add-ons are available for advanced features like conditional logic, payments, and integrations.


Viewing all articles
Browse latest Browse all 998

Trending Articles