Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Leff7's avatar
Level 4

Saving data to ninja forms through an api

I have a frontend built separately from the WP backend and I am fetching everything through an api that gets all the data from the WP backend. In this particular case I am getting fields data of the Ninja form plugin through an api and building the form with it on the frontend. This is how the endpoint looks like in the WP:

add_action('init', function() {

  function getNinjaFormData(WP_REST_Request $request) {
    $id = $request->get_param('id');
    $settings = ['label', 'type', 'required'];
    $formTitle = Ninja_Forms()->form( 1 )->get()->get_setting('title');
    $formFields = Ninja_Forms()->form(1)->get_fields();
    $data = ['title' => $formTitle];

    foreach ($formFields as $formField) {
      $key = $formField->get_setting('key');

      foreach ($settings as $setting) {
        $object[$setting]  = $formField->get_setting($setting);
      }
      $data['fields'][] = $object;
    }

    return $data;
  }
});

add_action('rest_api_init', function () {
  register_rest_route( 'ninja-forms/', '/id/(?P<id>\d+)', [
    'methods' => 'GET',
    'callback' => 'getNinjaFormData',
  ]);
});

So, I am sending data to the frontend that looks like this:

{
  "title": "Contact Me",
  "fields": [
    {
        "label": "Name",
        "type": "textbox",
        "required": "1"
    },
    {
        "label": "Email",
        "type": "email",
        "required": "1"
    },
    {
        "label": "Message",
        "type": "textarea",
        "required": "1"
    },
    {
        "label": "Submit",
        "type": "submit",
        "required": null
    }
  ]
}

And with that data I am building a form. How can I then make an endpoint where I would save submission data that I am sending from the frontend, like for example when I am sending data from the frontend for that form that looks like this:

Array
(
    [name] => asdasd
    [email] => sadsad@asd
    [message] => sadas
)

Since, I saw in the documentation that posting to the backend from the frontend looks like this:

        var formData = JSON.stringify( { id: formID, fields: fields, settings: settings, extra: extra } );
        var data = {
            'action': 'nf_ajax_submit',
            'security': nfFrontEnd.ajaxNonce,
            'formData': formData
        }

        var that = this;

        jQuery.ajax({
            url: nfFrontEnd.adminAjax,
            type: 'POST',
            data: data,
            cache: false,
            success: function( data, textStatus, jqXHR ) {
                try {
                    var response = jQuery.parseJSON( data );
                    nfRadio.channel( 'forms' ).trigger( 'submit:response', response, textStatus, jqXHR, formModel.get( 'id' ) );
                    nfRadio.channel( 'form-' + formModel.get( 'id' ) ).trigger( 'submit:response', response, textStatus, jqXHR );
                    jQuery( document ).trigger( 'nfFormSubmitResponse', { response: response, id: formModel.get( 'id' ) } );
                } catch( e ) {
                    console.log( e );
                    console.log( 'Parse Error' );
                    console.log( e );
                }

            },

I have tried implementing that in my Laravel controller:

    $url = 'http://my-app.app/wp-admin/admin-ajax.php';
    $data = [];
    $data['action'] = 'nf_ajax_submit';
    $data['formData'] = $request->all();
    $formData = json_encode($data);

    $client   = new Client();
    $response = $client->request('POST', $url, [
        'form_params' => [
            'data'   => $formData,
        ]
    ]);

    $body     = json_decode($response->getBody(), true);

    if ($body['success'] === true && $body['data'] !== false) {
        return $body['data'];
    }

    return null;

But it doesn't work, I get null for $body['success'].

0 likes
1 reply
Gohar's avatar

Hi

Did you get any solution back then?

Please or to participate in this conversation.