Contact form not sending?

Question

So I'm trying to use the Contact form at this Codepen

https://codepen.io/ssbalakumar/pen/uzDIA

I have the form on my page, not sure if the image input field is correct for the form but seems to appear right, so after I fill out the form and hit submit, it reloads the page for some reason, and I don't see any options of where it actually gets sent to.

The page is hosted and currently does not have a php, I don't know how to mark that up, but I assume it;s needed for the sending action?

so two questions, 1 is the image input going to work with this set up? 2nd, how do I set the email that will receive the submitted message

HTML

  <div id="contactDiv">  
  <form id="contact" action="" method="post">
  <h3>Quick Contact</h3>
  <h4>Contact us today, and get reply with in 24 hours!</h4>
  <fieldset>
  <input placeholder="Your name" type="text" tabindex="1" required 
  autofocus>
  </fieldset>
  <fieldset>
  <input placeholder="Your Email Address"  type="email" tabindex="2" 
  required>
  </fieldset>
  <fieldset>
  <input placeholder="Your Phone Number" type="tel" tabindex="3" required>
  </fieldset>
  <input type="file" tabindex="4" required>
  </fieldset>
  <fieldset>
  <textarea placeholder="Type your Message Here...." tabindex="5" required> 
  </textarea>
  </fieldset>
  <fieldset>
  <button name="submit" type="submit" id="contact-submit" data- 
  submit="...Sending">Submit</button>
  </fieldset>
  </form>

Answer 1

First to get PHP you need a .php file. You could create one named sendEmail.php for your form. Then to call the .php file from you form change your action parameter to action="sendEmail.php". To actually get the value to sendEmail.php use the POST method. Here's a simplified version of what your code should look like:

index.html

<form id="contact" action="sendEmail.php" method="post">
    <input name="yourName" placeholder="Your name" type="text" tabindex="1" required autofocus />
</form>

sendEmail.php

<?php
    $yourName = $_POST["yourName"];

    echo $yourName; //Outputs the inputted value for Your Name
?>

A few notes:

To send an email use the PHP mail() function as mentioned here.

Be very careful of MYSQL Injections. While there used on MYSQL databases, they could still do damage to a script like this.

EDIT

For the image, I'd recommend uploading the image to your server and then using the <img> tag in your email to send the image.

Here's the code that I got from here and changed a bit:

<?php
$target_dir = "imageUploads/";
$target_file = $target_dir . basename($_FILES["imgUpload"]["name"]);
$uploadOk = 1;
$imgName = basename($_FILES["imgUpload"]["name"]);
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["imgUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["imgUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["imgUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["imgUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

Then with the PHP mail() function just include the image tag with a path like http://yoursite.com/imageUploads/nameOfTheImage.TYPE. The path should remain the same and you can get the last part from the var $imgName so you'd do

$imageUrl = 'http://yoursite.com/imageUploads/' . $imgName;

You'll need to create a folder for the images to be upload. In the code above I used imageUploads.