Add Extra Custom Data To Ninja Forms Submissions
Tags: wordpress, php, webdev
Published: 2020-03-26 22:15:07

---
title: Add Extra Custom Data To Ninja Forms Submissions
published: true
date: 2019-10-21 13:00:00 UTC
tags: wordpress, php, webdev
canonical_url: https://nimblewebdeveloper.com/blog/add-extra-data-to-ninja-forms-submissions
---

## Automatically add extra data to Ninja Forms Submissions with 1 easy step

Capturing all the data you need in form submissions can be critical to running successful campaigns and gathering all the data you need. I use Ninja Forms for a lot of client websites because it's quick and easy to spin up, and pretty reliable.

One complaint I often have about Ninja Forms, though, is that it doesn't really play nice with developers. (I think they've done this on purpose in order to sell more add-ons. Hey fair play to them).

Something I often need is the ability to collect extra data on a Ninja Forms submission.

You have some ability to collect extra data by using hidden fields and capturing page url or user id etc (see [this post](https://ninjaforms.com/blog/user-data-wordpress-forms/) from Ninja Forms). That's all well and good (and works fine). But sometimes I need to add extra data to all or a great number of forms.

Or in this case, the client doesn't want to do it every time they create a form.

## How it works

The solution is actually quite simple, and most of the functionality _is_ actually provided by Ninja Forms!

It's just poorly documented.

**What we're going to do:**

- Add a Wordpress hook to listen for a Ninja Form being displayed
- Inject a Javascript that listens for the form submit action
- Add some 'extra' data to the Ninja Form
- Sit back, open a beer - we're done.

Yep it's that easy! Ninja Forms has the ability to add 'extra' data to a form submission which it stores as **post\_meta** on the submission. Currently Ninja Forms uses this to store calculations (and I'm assuming various add-ons store other data here too).

## Enough! Just show me the code

Ok

I'm going to wrap this into a nice little class so we don't pollute the global namespace. If you were an uncultured swine, you could do this whole thing in about 5 lines. But we don't roll like that!

```php  
<?php  
  
//Setup our class  
if(!class\_exists('Nimble\_NF\_ExtraData')) {  
  class Nimble\_NF\_ExtraData {  
    var $form\_ids = []; //Store the form IDs we want to modify  
    var $script\_added = false;  
  
    public function \_\_construct() {  
      //This is the earliest available hook that fires when  
      //a ninja form is being displayed  
      //We could add our script on all pages, but this  
      //way we dont add it if it's not needed!  
      add\_action('ninja\_forms\_before\_form\_display', array($this, 'addHooks'));  
    }  
  
    public function addHooks($form\_id) {  
      //You could test the form id here if you want  
  
      $this->form\_ids[] = $form\_id;  
  
      //Make sure we only add the script once  
      if(!$this->script\_added) {  
        add\_action('wp\_footer', array($this, 'add\_extra\_to\_form'), 99);  
        $this->script\_added = true;  
      }  
    }  
  
    public function add\_extra\_to\_form() {  
      ?>  
      <script>  
        (function() {  
          var form\_ids = [<?php echo join(", ", $this->form\_ids); ?>];  
          nfRadio.channel("forms").on("before:submit", function(e) {  
            //Make sure the form being submitted is one we want to modify  
            if(form\_ids.indexOf(+e.id) === -1)return;  
              
            //Get any existing extra data  
            var extra = e.get('extra');  
  
            //Merge in new extra data  
            //EG the post ID  
            extra.post\_id = <? the\_ID(); ?>;  
  
            //Set the extra data  
            e.set('extra', extra);  
          });  
        })();  
      </script>  
      <?php  
    }    
  
  
  }  
}  
new Nimble\_NF\_ExtraData();  
  
```

That's all there is to it, your extra data will be added to the post submission as post\_meta. In this example you would get a post meta with key: **post\_id**.

You can apply this in a Code Snippet, stick it in your functions file, or build out a plugin!