My contact form is coming to destination email as "Undefined"

Question

everything was working perfectly, however, when I fill out the form information and click to send, the email arrives like this:

Name: Undefined Email: Undefined Message: Undefined

Can anyone help me please follow below my html and php code:

PHP

<?php 
$errorMSG = "";

if (empty($_POST["name"])) {
    $errorMSG = "Name is required ";
} else {
    $name = $_POST["name"];
}

if (empty($_POST["email"])) {
    $errorMSG = "Email is required ";
} else {
    $email = $_POST["email"];
}

if (empty($_POST["message"])) {
    $errorMSG = "Message is required ";
} else {
    $message = $_POST["message"];
}

if (empty($_POST["terms"])) {
    $errorMSG = "Terms is required ";
} else {
    $terms = $_POST["terms"];
}

$to = "[email protected]";
$subject = "Contato - Supremotec Tecnologia";
$body = "Nome: " . $name . "\n" . "Email: " . $email . "\n" . "Mensagem: " . $message;

// prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $name; $Body .= "\n"; $Body .= "Email: "; $Body .= $email; $Body .= "\n"; $Body .= "Menssagem: "; $Body .= $message; $Body .= "\n";

// send email

$header = "From:[email protected]" . "\r\n" . "Reply-To:" . $email . "\e\n" . "X=Mailer:PHP/" . phpversion(); {

    if (mail($to, $subject, $body, $header)) {

        echo ("Email enviado com sucesso!");
    } else {
        echo ("O email não pode ser enviado");
    }
}
?>

HTML

                <form id="contactForm" data-toggle="validator" data-focus="false">
                    <div class="form-group">
                        <input type="text" class="form-control-input" id="name" required>
                        <label class="label-control" for="name">Nome</label>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control-input" id="email" required>
                        <label class="label-control" for="email">Email</label>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control-textarea" id="message" required></textarea>
                        <label class="label-control" for="message">Sua mensagem</label>
                        <div class="help-block with-errors"></div>
                    </div>
                
                    <div class="form-group">
                        <button type="submit" class="form-control-submit-button">ENVIAR MENSAGEM</button>
                    </div>
                    <div class="form-message">
                        <div id="cmsgSubmit" class="h3 text-center hidden"></div>
                    </div>
                </form>
                <!-- end of contact form -->   
            </div> <!-- end of col -->
        </div> <!-- end of row -->
    </div> <!-- end of container -->
</div> <!-- end of form-2 -->
<!-- end of contact -->

Note. Thanks for your help!

Answer 1

UPDATED I found some errors in your form.

1. The attribute is missing name in the inputs of your hmtl form.
2. is missing the attribute action in your form with the route to the php file
3. The attribute is missing method="post" on your form.

<form id="contactForm" data-toggle="validator" data-focus="false" action="mail.php" method="POST">
        <div class="form-group">
            <input type="text" class="form-control-input" id="name" name="name" required>
            <label class="label-control" for="name">Nome</label>
            <div class="help-block with-errors"></div>
        </div>
        <div class="form-group">
            <input type="email" class="form-control-input" id="email" name="email" required>
            <label class="label-control" for="email">Email</label>
            <div class="help-block with-errors"></div>
        </div>
        <div class="form-group">
            <textarea class="form-control-textarea" id="message" name="message" required></textarea>
            <label class="label-control" for="message">Sua mensagem</label>
            <div class="help-block with-errors"></div>
        </div>

        <div class="form-group">
            <button type="submit" class="form-control-submit-button">ENVIAR MENSAGEM</button>
        </div>
        <div class="form-message">
            <div id="cmsgSubmit" name="cmsgSubmit" class="h3 text-center hidden"></div>
        </div>
    </form>