Custom PHP page form data is not appearing as a wp-theme page template

Question

I have made an age calculator using PHP. It works fine in localhost/age/age-calculator.php

I have moved this file as a wp theme-page-template theme/mytheme/page-template/age-calculator.php

<?php get_header();
/*
Template Name: Age Calculator
*/

Create a page and linked with this page-template.

The input forms working nicely but when submit data. WordPress doesn't show me any result and bring me on the home page.

But in localhost, I am getting input result on the same page

How to show the result on the wp page template?

Thanks

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method='post'>
<div class="container bg-light p-2 wow bounceInUp">

    <div class="row">

        <div class="col-sm-6 mb-4">
    <p> Your Name * </p>
    <input type="text" name='person_1' placeholder="Name" <?php echo "$required $all_required";?> />
    <p class="text-danger"> <?php echo " $nameErr ";?> </p>
    <br/>

    <p> Date of Birth * </p>
    <input type="date" name='birth_date' <?php echo "$required $all_required";?> /> 
    <p class="text-danger"> <?php echo " $dateErr ";?> </p>
    <br/>

    <input  class="btn-success" type="submit" value='Calculate Yours Age' name='submit_1' /> <br/>

        </div>

        <div class="col-sm-6">
    <p> Your Friend's Name * </p>
    <input type="text" name='person_2' placeholder= "Friend's Name " <?php echo "$all_required";?> />
    <p class="text-danger"> <?php echo " $nameErr2 ";?> </p>
    <br />

    <p> Your Friend's Date of birth * </p>
    <input type="date" name='birth_date_2' <?php echo "$all_required";?> />
    <p class="text-danger">  <?php echo " $dateErr2 ";?> </p>
    <br /><br />

        </div>
    </div>
    <div class="row">
        <input class='m-auto btn btn-success p-2' type="submit" value='Compare Age' name='submit_all' /> 
    </div>
</div>
</form>

Answer 1

The approach I usually take is to check to see if your submit input exists and construct the page based on that condition.

For example, if your submit/send button was constructed similar to this:

<input class="cta" type="submit" name="submit_all" value="Send message">

Then your condition check would look like:

if ( isset( $_POST['submit_all'] ) ) {
    // Do the stuff with $_POST array
} else {
    // No submission yet, show the form
}

The key in the $_POST array will match the name attribute of your input.

Elaine's comment is a good one as the action attribute determines where to POST the submission data. In WordPress, using the permalink is a good option.

<form id="####" class="####" method="post" action="<?php echo esc_url( the_permalink() ); ?>">

EDIT: based on the code you added to the question, I recommend updating the action attribute on the form element. Also, I have updated the condition example to use your submit_all value.