<form id="mc-form"  method="POST">
                                                <div class="form-group col-xs-12 ">
                                                    <label for="name" hidden >שם פרטי</label>
                                                    <input type="text" name="name" id="name" class="cv form-control"  placeholder="שם פרטי"  >
                                                     <span class='error-message' id='name-error'></span>

                                                </div>
                                                <div class="form-group col-xs-12 ">
                                                    <label for="phone" hidden>טלפון</label>
                                                    <input type="text" name="phone" id="phone" class="cv form-control"  placeholder="טלפון" >
                                                     <span class='error-message' id='phone-error'></span>
                                                </div>
                                                <div class="form-group col-xs-12 ">
                                                    <label for="email" hidden>דואר אלקטרוני</label>
                                                    <input type="email" name="email" id="email" class="cv form-control"  placeholder="דואר אלקטרוני" >
                                                     <span class='error-message' id='email-error'></span>
                                                </div>
                                                <div class="form-group col-xs-12 ">
                                                    <label for="subject" hidden>נושא</label>
                                                    <input type="text" name="subject" id="subject" class="cv form-control" placeholder="נושא" >
                                                </div>
                                                <div class="form-group col-xs-12 ">
                                                    <label for="message" hidden>הודעה</label>
                                                    <textarea name="message" id="message" class="cv form-control message"  placeholder="השאירו את הודעתכם פה" rows="4" cols="50" ></textarea>
                                                </div>
                                               <!-- <input type="submit" id="submit-button" class="btn btn-custom-outline " value="שלח" > -->
                                                <button onclick='return validateForm()' class="btn btn-custom-outline " id="submit-button">שלח</button>
                                                  <span class='error-message' id='submit-error'></span>
                                                  <span class="success">Thank's for submitting the form</span>

                                                <br>
                                               <!-- <div class="success"><?= $success ?></div>-->
                                                <!--<span class="error"></span> -->
                                            </form>

function validateName() {

  var name = document.getElementById('name').value;

  if(name.length == 0) {

    producePrompt('Name is required', 'name-error' , 'red')
    return false;

  }

  if (!name.match( /^[a-zא-ת]+(s[a-zא-ת]+)*$/i)) {

    producePrompt('Letters only please.','name-error', 'red');
    return false;

  }


  return true;

}

function validatePhone() {

  var phone = document.getElementById('phone').value;

    if(phone.length == 0) {
      producePrompt('Phone number is required.', 'phone-error', 'red');
      return false;
    }

    if(!phone.match(/([0-9s-]{7,})(?:s*(?:#|x.?|ext.?|extension)s*(d+))?$/)) {
      producePrompt('Include only digits| min :8 ' ,'phone-error', 'red');
      return false;
    }


    return true;

}

function validateEmail () {

  var email = document.getElementById('email').value;

  if(email.length == 0) {

    producePrompt('Email is required','email-error', 'red');
    return false;

  }

  if(!email.match(/^[A-Za-z._-[0-9]*[@][A-Za-z]*[.][a-z]{2,4}$/)) {

    producePrompt('Email Invalid', 'email-error', 'red');
    return false;

  }


  return true;

}

/*function validateMessage() {
  var message = document.getElementById('contact-message').value;
  var required = 30;
  var left = required - message.length;

  if (left > 0) {
    producePrompt(left + ' more characters required','message-error','red');
    return false;
  }

  producePrompt('Valid', 'message-error', 'green');
  return true;

}*/

function validateForm() {
var vn = validateName();
var vp = validatePhone();
var ve = validateEmail();

if (!vn || !vp || !ve)  {
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
     else {

  }

}

function jsShow(id) {
  document.getElementById(id).style.display = 'block';
}

function jsHide(id) {
  document.getElementById(id).style.display = 'none';
}




function producePrompt(message, promptLocation, color) {

  document.getElementById(promptLocation).innerHTML = message;
  document.getElementById(promptLocation).style.color = color;


}

// define variables and set to empty values
$name_error = $email_error = $phone_error = " ";
$name = $email = $phone = $message = $subject = $success = " ";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $name_error = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Zא-ת ]*$/",$name)) {
      $name_error = "Only letters and white space allowed";
    }
  }


  if (empty($_POST["email"])) {
    $email_error = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $email_error = "Invalid email format";
    }
  }

  if (empty($_POST["phone"])) {
    $phone_error = "Phone is required";
  } else {
    $phone = test_input($_POST["phone"]);
    // check if e-mail address is well-formed
    if (!preg_match("/^(d[s-]?)?[([s-]{0,2}?d{3}[)]s-]{0,2}?d{3}[s-]?d{4}$/i",$phone)) {
      $phone_error = "Invalid phone number";
    }
  }

if (empty($_POST["subject"])) {
    $subject = "";
  } else {
    $subject = test_input($_POST["subject"]);
  }

  if (empty($_POST["message"])) {
    $message = "";
  } else {
    $message = test_input($_POST["message"]);
  }

  if ($name_error == '' and $email_error == '' and $phone_error == '' and $lastname_error == '' ){
      $message_body = '';
      unset($_POST['submit']);
      foreach ($_POST as $key => $value){
          $message_body .=  "$key: $valuen";
      }

      $to = 'ilonasemyweb@gmail.com';
      $subjectm = 'Contact Form Submit';
      if (mail($to, $subjectm, $message)){
          $success = "Message sent, thank you for contacting us!";
          $name = $lastName = $email = $phone = $message = $subject = '';
      }
  }

}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}