[WIP] AJAX request to load a form dynamically.

footer.php

<?php

// Adds a script to the footer.
add_action( 'wp_footer', function() {
  ?>
  <script type="text/javascript">

  var NinjaFormsAsyncForm = function(formID, targetContainer) {

    this.formID = formID;
    this.targetContainer = targetContainer;

    this.formHTML;
    this.formTemplates;
    this.formScripts;

    this.fetch = function(callback) {
        jQuery.post('/', { async_form: true, form_id: this.formID }, this.fetchHandler.bind(this))
              .then(callback);
    }
    this.fetchHandler = function(response) {
        response = JSON.parse( response );

        window.nfFrontEnd = window.nfFrontEnd || response.nfFrontEnd;
        window.nfi18n = window.nfi18n || response.nfi18n || {};

        this.formHTML = response.form;
        this.formTemplates = response.templates;
        this.formScripts = response.scripts;
    }

    this.load = function() {
        this.loadFormHTML(this.formHTML, this.targetContainer);
        this.loadTemplates(this.formTemplates);
        this.loadScripts(this.formScripts);
    }

    this.loadFormHTML = function(form, targetContainer) {
        jQuery(targetContainer).append( form );
    }
    this.loadTemplates = function(templates) {
        document.body.innerHTML += templates;
    }
    this.loadScripts = function(scripts) {
        jQuery.each( scripts, function( nfScript ){
            var script = document.createElement('script');
            eval( scripts[nfScript].extra.data );
            window.nfFrontEnd = window.nfFrontEnd || nfFrontEnd;
            script.setAttribute('src',scripts[nfScript].src);
            var appendChild = document.head.appendChild(script);
        });
    }

    this.remove = function() {
        jQuery(this.targetContainer).empty();
    }
  }

    var asyncForm = new NinjaFormsAsyncForm(1, '.ninja-forms-dynamic');
    jQuery(document).on('click', '.js-ninja-forms-load-form', function(){
        asyncForm.fetch(function(){
            asyncForm.load();
        });
    });
    jQuery(document).on('click', '.js-ninja-forms-remove-form', function(){
        asyncForm.remove();
    });

    var asyncForm2 = new NinjaFormsAsyncForm(2, '.ninja-forms-dynamic2');
    jQuery(document).on('click', '.js-ninja-forms-load-form2', function(){
        asyncForm2.fetch(function(){
            asyncForm2.load();
        });
    });
    jQuery(document).on('click', '.js-ninja-forms-remove-form2', function(){
        asyncForm2.remove();
    });
  </script>
  <?php
}, 100);

init.php

<?php

add_action( 'init', function(){
  if( ! isset( $_REQUEST[ 'async_form' ] ) ) return;

  global $wp_scripts;

  // Clear default loaded scripts.
  unset( $wp_scripts->registered );

  $form_id = absint($_REQUEST['form_id']);

  ob_start();
  $form = do_shortcode( "[ninja_forms id='{$form_id}']");
  ob_get_clean();

  ob_start();
  NF_Display_Render::output_templates();
  $templates = ob_get_clean();

  $response = [
    'form' => $form,
    'scripts' => $wp_scripts->registered,
    'templates' => $templates
  ];
  echo json_encode( $response );
  die();
});

add_action( 'wp_enqueue_scripts', function(){
  // Make sure that backbone is enqueued on the page.
  wp_enqueue_script( 'backbone' );
});

Hello, @kjohnson Kyle B. Johnson!
I have a questions for you.
Why we need backbone library? Why you declatated appendChild and never read the value? Explain me please.

It would be very nice if you included conditional logic in the examples so that we don't kill our user experience with slow page loads from unnecessary scripts and styles from loading.