Loading...

Knowledge Base
Save 25% on a custom website!

Creating a Contact Form: WordPress Ninja Form Tutorial

The goal of Ninja Forms is to assist you in becoming a professional and creating effective contact forms for your WordPress website. Refer to this WordPress Ninja Form tutorial to improve the functionality of your website and make it easier for your customers to provide information, comments, and other requests.

In this article, we will discuss:

How to Use Ninja Forms in WordPress

Follow the steps below to create a form on your WordPress website.

Note: The steps and images shown below are based on WordPress version 6.5.2.
  1. Log in to your WordPress Dashboard.
  2. On the left-side page, hover the cursor on Plugins. Then, select Add New Plugin.
    Add new Plugin option

     
  3. At the upper-right corner of the Plugins page, search for "Ninja Forms" in the Search plugins field.
    Search Plugins field

     
  4. Choose the first result that shows up by clicking the Activate button. This is a free WordPress form plugin that you can use for your website.
    Activate button

     
  5. Once activated, refresh your page by pressing the F5 key on your keyboard or pressing the Refresh button on your browser.
  6. After refreshing the page, the Ninja Forms option will appear on the left side. Click on it to open the page.
    Ninja Forms option

     

  7. The Contact Forms page will show.
    Contact Forms page

    In the Forms tab, you will find the following:
    • ADD NEW button – Various templates are available for you to use for your contact form.
      Templates
  8. Underneath TITLE, you will find the pre-created Contact Me form. Click on this to edit the form.
    Contact Me form

     
  9. Once clicked, the following tabs will show. Select the option below to view each tab.
    Form Fields, Emails & Actions, and Advanced tabs

To create and manage a WordPress form, follow the steps below.

  1. You will be presented with the page below. On this page, you can find the following:
    Forms Fields tab

     
  2. Click on the Add new button to view other fields that you can add for the Contact Me form. Simply drag & drop the chosen field to the form to add it.
    Fields

     
  3. To edit an existing field, simply hover the cursor on the field you want to edit, and the Settings icon will show. Point the cursor to the Settings icon, and the following icons will show:
    Duplicate, Delete, and Settings icons

     
    1. Duplicate Duplicate icon – Create a duplicate for the same field.
    2. Delete Delete icon– Delete the chosen field.
    3. Settings Settings icon– Click this button to view more settings and make changes to the chosen field.
       
  4. In the Settings page, you can change the field label by updating the LABEL field.
    Label field

     
  5. To view more options, click on DISPLAY to expand,
    Display drop-down and fields

     

The following default actions will show:
Default actions
  • Record Submission – Records the submission after the customer/visitor submits the form.
  • Email Confirmation – An email confirmation will be sent to the customer/visitor once they submit the form.
  • Email Notification – Once a customer/visitor submits a form, the system administrator will receive an email notification about it.
  • Success Message – Allow your customers/visitors to get a confirmation message after they submit the form.
You can add more actions by clicking the Add new action button on top. Drag & drop the chosen action you want to add in the form.
Add new actions

 

Review

This guide is all about Ninja Forms tutorial for beginners into using Ninja Forms, a free WordPress plugin, to create effective contact forms for your website.  Boost your website's functionality and simplify communication with visitors!

  • Improved Website Functionality: Seamlessly collect information and feedback through well-designed forms.
  • Simplified Communication: Make it easier for visitors to reach you and boost customer engagement.
  • Easy Setup: Create professional-looking forms with a user-friendly drag-and-drop interface (no coding required!).
Did you find this article helpful?

 
* Your feedback is too short

Loading...