Need help configuring an Ajax form with uniform on homepage

The CMS Questions
1

Hi everyone,

I’m working on a simple registration form I’m facing an issue with form submission on the homepage. I want to process a POST request on the homepage ('/'), but my current setup only works when I use a specific route like 'new-home'. I’m trying to get it to work directly on the homepage, which doesn’t have a unique URL segment. Here’s the relevant part of my config.php:

'routes' => [
  [
    'pattern' => '/', // I changed this to target the homepage
    'method' => 'POST',
    'action'  => function () {
      // Form processing logic here
      $form = new \Uniform\Form([
        // Form fields and validation rules
      ]);
      
      $form->withoutFlashing()
        ->withoutRedirect()
        ->guard();
      
      if (!$form->success()) {
        return \Kirby\Http\Response::json($form->errors(), 400);
      }
      
      // Email action
      $form->emailAction([
        // Email parameters
      ]);
      
      if (!$form->success()) {
        return \Kirby\Http\Response::json($form->errors(), 500);
      }
      
      // Return code 200 on success.
      return \Kirby\Http\Response::json([], 200);
    }
  ]
];

When I submit the form on the homepage, I either get a 500 internal server error or the form doesn’t process at all. The form works perfectly when I use any route other than '/'.

What am I missing in my configuration ? How do I create a route for the home ? My website is in subfolder for now, I don’t know if it’s relevant.

Thanks in advance for your help!

2

Hm, should actually work, but what url are you actually sending from your ajax request?

What if you request the route via Postman (or any other tool capable of making HTTP requests)?

3

Thank you for your answer.
Heres the part where I send the requet in my script :

var submit = function (e) {
    e.preventDefault();
    console.log("Form submitted");
    var request = new XMLHttpRequest();
    request.open("POST", e.target.action);
    request.onload = onload;
    request.send(new FormData(e.target));
    for (var key in fields) {
      if (!fields.hasOwnProperty(key)) continue;
      fields[key].classList.remove("error");
    }
  };

and my form :

   <form id="register-form" method="POST" action="<?php echo $page->url() ?>/">
              
                <div class="form">
                    <div class="form-columns">
                        <div class="form-column">
                            <input name="firstname" type="text" aria-required placeholder="First Name*">
                        </div>
                        <div class="form-column">
                            <input name="lastname" type="text" aria-required placeholder="Last Name*">
                        </div>
                    </div>
///rest of the code

I tried both with “/” at the end of action or without.
When I submit the form, it has a status 200

  var onload = function (e) {
    if (e.target.status === 200) {
     //..
      console.log('success')
    } else {
      console.log("Error");
      handleError(JSON.parse(e.target.response));
    }
  };

(my code is based on the basic example for the ajax form)

I don’t know Postman but I can look into that.

Thank you !

4

So I made it work but I’m not sure how…

I change this line of the routes :
return Response::json([], 200);
to this :
return Response::json($form->data(), 200);

initially just to check the data with Postman but now the form work and the email is sent. Before this the response was the whole html of the page and no the datas.