Just CANNOT get form to send email

Question

I'll probably get a duplicate on this but I've searched and searched and I can't find someone experiencing the same issue with the same syntax, so hopefully someone can see something I'm missing. PHP is not my strong suit, but I have gone through several tutorials and classes and done a bunch of work trying to improve, which is why this is bugging me so much. I have a pretty simple html form that I am trying to send to email using php. I found a different way to perform this from what I am used to using, and wanted to give it a shot. Everything seems to be working as the function fires (I've tested with console.log, alert, and the popup does, well, pop up, so the "success" is working in the PHP file if I'm not mistaken. The resulting problem of my issues is that I never receive an email from the form (I've put a dummy email in for the purposes of asking this question).

I know I don't have a form action = "something.php" or an function call straight from the form, but from what I understand from this method is that everything fires on submit. Again, as everything seems to function but the email, I'm not sure what the deal is.

I would love to see if more experienced eyes can find what I am missing. Hosting provider is Godaddy if it matters. Thank you so much for any assistance anyone can offer.

Here's my html (the page is a .php extension):

<form class="main-contact-form" id="main-contact-form">
            <div class="row">
                <div class="col-md-6">
                    <input id="first-name" name="firstName" type="text" placeholder="First Name (Required)" onfocus="this.placeholder = ''" onblur="this.placeholder = 'First Name (Required)'" />
                </div>
                <div class="col-md-6">
                    <input id="last-name" name="lastName" type="text" placeholder="Last Name (Required)" onfocus="this.placeholder= ''" onblur="this.placeholder= 'Last Name (Required)'" />
                </div>
                <div class="col-md-6">
                    <input id="email" name="email" type="email" placeholder="Email (Required)" onfocus="this.placeholder= ''" onblur= "this.placeholder= 'Email (Required)'" />
                </div>
                <div class="col-md-6">
                    <input id="phone" name="phone" type="phone" placeholder= "Phone Number" onfocus= "this.placeholder= ''" onblur="this.placeholder= 'Phone Number'" />
                </div>
                <div class="col-md-6">
                    <input id="company" name="company" type="text" placeholder="Company" onfocus="this.placeholder= ''" onblur= "this.placeholder= 'Company'" />
                </div>
                <div class="col-md-6">
                    <select id="contact-type" name="contactType">
                        <option value="" selected>I'd like to...</option>
                        <option class="contact-option" value="Contact sales">Contact sales</option>
                        <option value="Get a quote">Get a quote</option>
                        <option value="Contact customer service">Contact customer service</option>
                    </select>
                </div>
                <div class="col-12">
                    <textarea id="message" placeholder="What can we do for you?" onfocus="this.placeholder= ''" onblur="this.placeholder= 'What can we do for you?'" /></textarea>
                </div>
                <div class="col-md-6 push-md-3">
                    <button type="submit">Submit</button>
                </div>
            </div>
        </form>

Here's my js code:

var contactForm = $("#main-contact-form");
     contactForm.submit(function(event) {
        event.preventDefault();
        submitForm();           
     });
     function submitForm() {
        var firstName = $("#first-name");
        var lastName = $("#last-name");
        var email = $("#email");
        var phone = $("#phone");
        var company = $("#company");
        var contactType = $("#contact-type");
        var message = $("#message");

        $.ajax({
            type: "POST",
            url: "php/main-contact-form.php",
            data: "firstName=" + firstName + "&lastName" + lastName + "&email" + email + "&phone" + phone + "&company" + company + "&contactType" + contactType + "&message" + message,
            success: function(text) {
                if (text == "success"){
                    formSuccess();
                }
            }
        });          
     }
     var contactSuccess = $(".contact-submission-success")
     function formSuccess(){
        contactSuccess.addClass("show", 200);
     }
});      

Here's my php code:

    <?php
$firstName = $_POST["firstName"];
$lastName = $_POST["lastName"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$company = $_POST["company"];
$contactType = $_POST["contactType"];
$message = $_POST["message"];

$EmailTo = "[email protected]";
$subject = "New Contact Form Message Received";

$Body .= "First Name: ";
$Body .= $firstName;
$Body .= "\n";

$Body .= "Last Name: ";
$Body .= $lastName;
$Body .= "\n";

$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";

$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";

$Body .= "Company: ";
$Body .= $company;
$Body .= "\n";

$Body .= "Contact Type: ";
$Body .= $contactType;
$Body .= "\n";

$Body .= "Message: ";
$Body .= $message;
$Body .= "\n"; 

$success = mail($EmailTo, $Subject, $Body, "From:".$email);

if ($success) {
    echo "success";
} else {
    echo "invalid";
}

?>

Answer 1

Well, I think that your problem is here:

function submitForm() {
    var firstName = $("#first-name");
    var lastName = $("#last-name");
    var email = $("#email");
    var phone = $("#phone");
    var company = $("#company");
    var contactType = $("#contact-type");
    var message = $("#message");

    $.ajax({
        type: "POST",
        url: "php/main-contact-form.php",
        data: "firstName=" + firstName + "&lastName" + lastName + "&email" + email + "&phone" + phone + "&company" + company + "&contactType" + contactType + "&message" + message,
        success: function(text) {
            if (text == "success"){
                formSuccess();
            }
        }
    });          
 }

You need to get the value of the inputs, not the inputs itself. For example, if you do this:

var miValue = $("#first-name");

you are getting the dom element, not the value. To get the value, you must call the val function:

var miValue = $("#first-name").val();

And your function should look like this:

function submitForm() {
    var firstName = $("#first-name").val(); //Call the val() function
    var lastName = $("#last-name").val();
    var email = $("#email").val();
    var phone = $("#phone").val();
    var company = $("#company").val();
    var contactType = $("#contact-type").val();
    var message = $("#message").val();

    $.ajax({
        type: "POST",
        url: "php/main-contact-form.php",
        data: "firstName=" + firstName + "&lastName" + lastName + "&email" + email + "&phone" + phone + "&company" + company + "&contactType" + contactType + "&message" + message,
        success: function(text) {
            if (text == "success"){
                formSuccess();
            }
        }
    });          
 }

You can read more about val here: val() jQuery