How to redirect using a custom wordpress api endpoint after form submission?

Question

I'm using a custom wordpress endpoint that I have defined in functions.php:

add_action('rest_api_init', function () {
    register_rest_route('custom_endpoint', 'submit-application', [
        'methods' => 'POST',
        'callback' => 'submit_application'
    ]);
});

I'm using the endpoint to process some form data sent via jetform builder. After the form data has been processed (various calls to an external api), I would like to redirect to a url that is returned by the api dynamically. Currently the business logic all succeeds, but I cannot for the life of me get the redirect to work. The form submits and displays a message "Form successfully submitted".

function submit_application ( $request ) {

  //Business logic here all succeeds

  $user= send_data($data);

  try {
      return new \WP_REST_Response(
          null, 
          303, 
          array(
              'Location' => $user['url'], 
          )
      );
      
  } catch (Exception $e) {
      return new WP_REST_Response( [
          'status' => 'error',
          'message' => $e->getMessage()
      ], 400 );
  }
}

I've also tried using

    wp_redirect( $user['url'] );
    exit();

The odd thing is I got it to work once, with what I think is this exact code, but suddenly after I continued development it stopped. It is also odd, because when I try the end point via postman instead of the form submission, it seems to receive the redirect correctly as well. Maybe that's indicative of a cache issue? I'm a little new to wordpress so any ideas would be very welcome!

Caleb · Accepted Answer · 2024-10-29 17:56:04Z

0

The request that sends the form data to the endpoint is being redirected. To redirect the visitor, remove the redirect from the endpoint, receive the response from the endpoint, and make your redirect in the first request.

Something like this (untested):

$request = wp_remote_request( ... );
$body    = wp_remote_retrieve_body( $request );

wp_redirect( $body['redirect_url'];
exit();

answered Oct 29, 2024 at 17:56

Caleb

1,4491 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Brenden Over a year ago

Thanks! The concept makes sense, but I'm still a little confused where I would put the code if not where I have it? I'm using jet form builder for the form, not a custom theme form or anything fancy like that.

Brenden Over a year ago

as some added info, I was trying to follow the second note here in the docs, developer.wordpress.org/reference/classes/wp_rest_response

mmm Over a year ago

you can put Caleb's code in a hook and then set the form to call this hook on submit : jetformbuilder.com/features/call-hook

Brenden Over a year ago

After some fiddling, in the end this wasn't the issue, and I was able to redirect the client using the endpoint as expected. I'll add an answer in case anyone in the future finds it helpful

Brenden Over a year ago

@mmm Thanks for this, I didn't know this existed and am definitely going to be using it in the future, very cool feature that opens up pretty much every door you could ever want!

Brenden · Accepted Answer · 2024-10-31 15:44:43Z

In the end there were two things preventing me from redirecting the client directly from the custom Wordpress endpoint. Here is the redirect code that I included in the end of my endpoint

      return new \WP_REST_Response(
          null, 
          303, 
          array(
              'Location' => $user['portal_url'], 
          )
      );

The first issue was that JetForm was taking control of things and erroring out when the redirect was included for some reason. To fix this I just bypassed JetForm submission by targeting the form element and changing the action to go directly to my custom wordpress endpoint instead.

<script> 
    let form = document.querySelector('.jet-form-builder');
    form.action = "https://your-endpoint-url.com"
</script>

The last tidbit is that by doing this bypass I was receiving a nonce error so you either have to add some logic to account for this, or if you don't mind (i.e. you don't consider it a security vulnerability in your use case), just disable "Form Safety" in JetForm.

Collectives™ on Stack Overflow

How to redirect using a custom wordpress api endpoint after form submission?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related