Add Extra Custom 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 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

//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!