PHP - Help Adding Javascript To This Php Form

function aitDirItemTaxonomies() {

	register_taxonomy( 'ait-dir-item-category', array( 'ait-dir-item' ), array(
		'hierarchical' => true,
		'labels' => array(
			'name'			=> 'Item Categories',
			'singular_name' => _x( 'Category', 'taxonomy singular name', 'ait'),
			'search_items'	=> __( 'Search Category', 'ait'),
			'all_items'		=> __( 'All Categories', 'ait'),
			'parent_item'	=> __( 'Parent Category', 'ait'),
			'parent_item_colon' => __( 'Parent Category:', 'ait'),
			'edit_item'		=> __( 'Edit Category', 'ait'),
			'update_item'	=> __( 'Update Category', 'ait'),
			'add_new_item'	=> __( 'Add New Category', 'ait'),
			'new_item_name' => __( 'New Category Name', 'ait'),
		),
		'show_ui' => true,
		'rewrite' => array( 'slug' => 'cat' ),
		'capabilities' => array(
				'assign_terms' => 'assign_dir_category'
			)
	));


	register_taxonomy( 'ait-dir-item-location', array( 'ait-dir-item' ), array(
		'hierarchical' => true,
		'labels' => array(
			'name'			=> 'Item Locations',
			'singular_name' => _x( 'Location', 'taxonomy singular name', 'ait'),
			'search_items'	=> __( 'Search Location', 'ait'),
			'all_items'		=> __( 'All Locations', 'ait'),
			'parent_item'	=> __( 'Parent Location', 'ait'),
			'parent_item_colon' => __( 'Parent Location:', 'ait'),
			'edit_item'		=> __( 'Edit Location', 'ait'),
			'update_item'	=> __( 'Update Location', 'ait'),
			'add_new_item'	=> __( 'Add New Location', 'ait'),
			'new_item_name' => __( 'New Location Name', 'ait'),
		),
		'show_ui' => true,
		'rewrite' => array( 'slug' => 'loc' ),
		'capabilities' => array(
				'assign_terms' => 'assign_dir_location'
			)
	));

}
add_action( 'init', 'aitDirItemPostType');

<form name="htmlform" method="post" action="oc.php"><label for="fname"><p>Full Name:</p></label>

  <input  type="text" name="fname" maxlength="50" size="60" style="color:#000;" required="required">
 </td>
</tr>
 
<tr>
 <td valign="top"> <label for="phone">
   <p>Phone Number: </p></label>

  <input  type="text" name="phone" maxlength="50" size="60" style="color:#000;" required="required">
 </td>
</tr>
<tr>

 <td valign="top">  <label for="email">
   <p> Email Address: </p></label>

  <input  type="text" name="email" maxlength="80" size="60" style="color:#000;" required="required">
 </td>
 
</tr>
<tr>
 
		
</tr>
<tr>
<td>
<h4>DELIVERY INFORMATION:</h4>
  <label for="address">
   <p>Address: </p></label>

  <input  type="text" name="address" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="city">
   <p>City: </p></label>

  <input  type="text" name="city" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="state">
   <p>State: </p></label>

  <input  type="text" name="state" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="zip">
   <p>Zip Code: </p></label>

  <input  type="text" name="zip" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
<h4>INFORMATION:</h4>
  <label for="first">
   <p>First Name: </p></label>

  <input  type="text" name="first" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="last">
   <p>Last Name: </p></label>

  <input  type="text" name="last" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="rec">
   <p>Recommendation ID Number: </p></label>

  <input  type="text" name="rec" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="exp">
   <p>Recommendation Experation Date: </p></label>

  <input  type="text" name="exp" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="doc">
   <p>Doctors Name: </p></label>

  <input  type="text" name="doc" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="docphone">
   <p>Doctors Phone Number: </p></label>

  <input  type="text" name="docphone" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
  <label for="ver">
   <p>Verification Website: </p></label>

  <input  type="text" name="ver" maxlength="80" size="60" style="color:#000;" required="required">
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
  <td valign="top"><label for="message"><p>How did you hear about us?</p></label><textarea name="message" id="message"   style="background-color:#fff; color:#000;" cols="45"/></textarea></td>
</tr>


<tr>
 <td colspan="2" style="text-align:left">
 


 <p>&nbsp;&nbsp;&nbsp;Upload Recommendation:</p>
&nbsp;&nbsp;&nbsp;<input type="file" name="pic" id="pic">
<br />
 <p>&nbsp;&nbsp;&nbsp;Upload California State ID:</p>
 	&nbsp;&nbsp;&nbsp;<input type="file" name="id" id="id">
<br />

<br />


<input type="image" value="submit"img src="img/sub.png" onmouseover="this.src='img/sub1.png'" onmouseout="this.src='img/sub.png'" />
  
  </form>	

<?php
 
// first clean up the input values
foreach($_POST as $key => $value) {
  if(ini_get('magic_quotes_gpc'))
    $_POST[$key] = stripslashes($_POST[$key]);
 
  $_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
}
  

	

$ip=$_SERVER['REMOTE_ADDR'];
      $email_to = "info@example.com";
      $email_subject = "Register";
  

	

$email_message .= "Full Name: ".$_POST["fname"]."\n";
  

	

$email_message .= "Phone Number: ".$_POST["phone"]."\n";
  


$email_message .= "Email Address: ".$_POST["email"]."\n";

$email_message .= "Address: ".$_POST["address"]."\n";

$email_message .= "City: ".$_POST["city"]."\n";

$email_message .= "State: ".$_POST["state"]."\n";

$email_message .= "Zip Code: ".$_POST["zip"]."\n";

$email_message .= "First Name: ".$_POST["first"]."\n";

$email_message .= "Last Name: ".$_POST["last"]."\n";

$email_message .= "Recommendation ID Number: ".$_POST["rec"]."\n";

$email_message .= "Recommendation Exp Date: ".$_POST["exp"]."\n";

$email_message .= "Doctors Name: ".$_POST["doc"]."\n";

$email_message .= "Doctors Phone Number: ".$_POST["docphone"]."\n";

$email_message .= "Verification Website: ".$_POST["ver"]."\n";

$email_message .= "Message: ".$_POST["message"]."\n";



$userEmail = filter_var( $_POST['email'],FILTER_VALIDATE_EMAIL );

if( ! $userEmail ){

    exit;
}
  
	




//email headers
 

	

$headers = 'From: '.$_POST["email"]."\r\n".

'Reply-To: '.$_POST["email"]."\r\n" .

'X-Mailer: PHP/' . phpversion();
 

	

echo (mail($email_to, $email_subject, $email_message, $headers) ? "<html><head><meta http-equiv='Refresh' content='0; url=http://www..com/thankyou.html'><body bgcolor='#fff'>
":"<html><body bgcolor='#fff'><center><font color='white'><h2>We're sorry, something went wrong.</h2></font><p><font color='white'>Please return to <a href='http://www..com'></a>.</font></p></center></body></html>");









$ip=$_SERVER['REMOTE_ADDR'];
      $email_to = $_POST["email"];
      $email_subject = "420 In Action";
  
$email_message1 = "Welcome!



Sincerely,

";



//email headers
 

	

$headers = 'From: '.$_POST["email"]."\r\n".

'Reply-To: '.$_POST["email"]."\r\n" .

'X-Mailer: PHP/' . phpversion();
 

	

echo (mail($email_to, $email_subject, $email_message1, $headers) ? "":"");


	

exit();





// test input values for errors
$errors = array();
if(strlen($fname) < 2) {
  if(!$fname) { $errors[] = "You must enter a name."; } 
  else { $errors[] = "Name must be at least 2 characters."; }
}
if(!$email) { $errors[] = "You must enter an email."; } 
else if (!validEmail($email)) { $errors[] = "You must enter a valid email."; }
 
if($errors) {
	// output errors to browser and die with a failure message
	$errortext = "";
	foreach($errors as $error) {
		$errortext .= "<li>".$error."</li>";
	}
	die("<span class='failure'>The following errors occured:<ul>". $errortext ."</ul></span>");
}




// check to see if email is valid
function validEmail($email) {
	$isValid = true;
	$atIndex = strrpos($email, "@");
	if (is_bool($atIndex) && !$atIndex) { $isValid = false; } 
	else {
		$domain = substr($email, $atIndex+1);
		$local = substr($email, 0, $atIndex);
		$localLen = strlen($local);
		$domainLen = strlen($domain);
		if ($localLen < 1 || $localLen > 64) { $isValid = false; }						// local part length exceeded
		else if ($domainLen < 1 || $domainLen > 255) { $isValid = false; }				        // domain part length exceeded
		else if ($local[0] == '.' || $local[$localLen-1] == '.') { $isValid = false; }                  	// local part starts or ends with '.'
		else if (preg_match('/\\.\\./', $local)) { $isValid = false; }					        // local part has two consecutive dots
		else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain)) { $isValid = false; }  // character not valid in domain part 
		else if (preg_match('/\\.\\./', $domain)) { $isValid = false; }					// domain part has two consecutive dots
		else if (!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/', str_replace("\\\\","",$local))) {
			// character not valid in local part unless local part is quoted
			if (!preg_match('/^"(\\\\"|[^"])+"$/', str_replace("\\\\","",$local))) { $isValid = false; }
		}
		if ($isValid && !(checkdnsrr($domain,"MX") || checkdnsrr($domain,"A"))) { $isValid = false; }	// domain not found in DNS
	}
   return $isValid;
}


 ?>

I am a php newbie and with help from someone on this forum managed to get my php form working. I am now trying to add recaptcha 3 but can't get it to work. I have added my code to this post and would appreciate some pointers. 

<?php
/* This is the Header PHP file */
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="My Name">

    
    <title>My Title</title>

    <!--Bootstrap Core CSS-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!--Font Awresome Icons-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">

    <!--Google Fonts-->
    <link href="assets/css/fontawesome/css/all.min.css" rel="stylesheet">

    <!--Adobe Typekit Fonts-->
    <link href="https://use.typekit.net/jtf1geg.css" rel="stylesheet">

    <!--Custom CSS-->
    <link href="assets/css/custom.css" rel="stylesheet">

    <!--Favicon-->
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/MyFavicon32WhiteAlt.png">

    <!--Google reCaptcha-->  
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
      function onSubmit(token) {
        document.getElementById("contact-form").submit();
      }
    </script>


  </head>

  <body>
    <!--HEADER-->
    <header class="site-header">
      <!--Navbar-->
      <nav class="navbar">
        <!-- Navbar brand -->
        <div class="navbar-brand">
          <img src="assets/img/myLogo.png" id="wd-logo" alt="My Logo">
        </div>
        
        <!-- Linking Menu Text to Collapse Button -->
        <div class="menu-button">
          <button class="navbar-toggler button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent20"
          aria-controls="navbarSupportedContent20" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-text">Menu</span>
          </button>
          
          <!-- Collapse Button -->
          <button class="navbar-toggler button animated-icon" type="button" data-toggle="collapse" data-target="#navbarSupportedContent20"
            aria-controls="navbarSupportedContent20" aria-expanded="false" aria-label="Toggle navigation">
              <span></span>
              <span></span>
              <span></span>
          </button>
          <!-- Collapse Button End -->
        </div>
        <!-- Linking Menu Text to Collapse Button End -->

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent20">
          <!-- Links -->
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="index.php">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.php">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.php">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.php">Our Work</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="contact.php">Contact<span class="sr-only">(current)</span></a>
            </li>
          </ul>
          <!-- Links End -->
        </div>
        <!-- Collapsible Content End -->
      </nav>
      <!--Navbar End-->

    </header>
    <!--Header End-->

    <hr>

    <!--Content-->
    <section class="main">
 


<?php
  // This is the contact form
  // Message Vars
  $msg = '';
  $msgClass = '';

  // Check to see if the form has been submitted
  if(filter_has_var(INPUT_POST, 'submit')) {
    // Input Data Variables
    $firstname = htmlspecialchars($_POST['firstname']);
    $lastname = htmlspecialchars($_POST['lastname']);
    $phonenumber = htmlspecialchars($_POST['phonenumber']);
    $email = htmlspecialchars($_POST['email']);
    $dropdown = htmlspecialchars($_POST['selectdropdown']);
    $message = htmlspecialchars($_POST['message']);
    $checkbox = htmlspecialchars($_POST['checkbox'] ?? 0);


    // Check required fields
    if(!empty($firstname) && !empty($lastname) && !empty($phonenumber) && !empty($email) && !empty($dropdown) && !empty($message) && !empty($checkbox)) {
      // If passed, check email address

      if(filter_var($email, FILTER_VALIDATE_EMAIL) === false) { 
        // If failed, Email address is not valid
        $msg = 'Please use a valid email address';
        $msgClass = 'alert-danger';
      } else {

        // Recipient email address and information to be sent to them
        $toEmail = 'hello@example.co.uk';
        $subject = 'Contact Request from  Website';
        $body = '<h2>Contact Request</h2>
                <h4>Name</h4><p>'.$firstname.  ' '.$lastname.'</p>
                <h4>Phone Number</h4><p>'.$phonenumber.'</p>
                <h4>Email Address</h4><p>'.$email.'</p>
                <h4>Subject</h4><p>'.$dropdown.'</p>
                <h4>Message</h4><p>'.$message.'</p>';

        // Email Headers
        $headers = "MIME-VERSION: 1.0" ."\r\n";
        $headers .="Content-Type:text/html;charset=UTF-8" ."\r\n";

        // Additional Headers
        $headers .= "From: " .$firstname. "".$lastname." <".$email.">" ."\r\n"; 

        $recaptcha_url = "https://www.google.com/recaptcha/api/siteverify";
        $recaptcha_secret ="secrettoken";
        $recaptcha_response = $_POST['g-recaptcha-response'];

        $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
        $recaptcha = json_decode($recaptcha, true);

        if($recaptcha['success'] == 1 AND $recaptcha['score'] >= 0.5 AND $recaptcha['action'] == "submit") {
          
          if(mail($toEmail, $subject, $body, $headers)) {
            // Message Sent
            $msg = 'Verfication successful, your message has been sent';
            $msgClass = 'alert-success';
          } else {
            // Message failed
            $msg = 'Your message has NOT been sent';
            $msgClass = 'alert-danger';
          }
        }
      }  
    } else {
      // Failed
      $msg = 'Please fill in all fields';
      $msgClass = 'alert-danger';
    }
  }

?>

      <div class="container clearfix content-container">
        <h1 class="section-title">Contact Us</h1>
        <p>If you have any questions about the services we provide or would like to chat about a new website project, please get in touch using any of the options below. We would love to hear from you!</p>

        <!--Contact Page Row-->
        <div class="row">
          <div class="col-lg-6 contact-details">
            <div class="row">
              <div class="col-lg-12">
                <img src="assets/img/contact-us.jpg" class="img-responsive d-block contact-image" alt="Contact Us Image">
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12 contact-name">
                <span class="d-inline-block contact-inline-block"><i class="fas fa-user fa-2x">
                </i></span>
                <span class="d-inline-block"><p class="contact-details">me</p></span>   
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12 contact-phone">
                <span class="d-inline-block contact-inline-block"><a href="tel:01234 567890"><i class="fas fa-mobile-alt fa-2x"></i></a></span>
                <span class="d-inline-block"><a href="tel:01234 567890"><p class="contact-details">01234 567890</a></p></span>  
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12 contact-email">
                <span class="d-inline-block contact-inline-block"><a href="mailhandler.php"><i class="fas fa-envelope-square fa-2x"></i></a></span>
                <span class="d-inline-block"><a href="mailhandler.php"><p class="contact-details">hello@wexample.co.uk</a></p></span>  
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12 contact-fb">
                <span class="d-inline-block contact-inline-block"><a href="https://www.facebook.com/example/" target="_blank"><i class="fab fa-facebook-square fa-2x"></a></i></span>
                <span class="d-inline-block"><a href="https://www.facebook.com/example/" target="_blank"><p class="contact-details">@example</a></p></span> 
              </div>
            </div>
          </div>

          <!--Contact Form-->
          <div class="col-lg-6 contact-form d-block">
            <?php if($msg != ''): ?>
              <div class="alert <?php echo $msgClass; ?>"><?php echo $msg; ?></div>
            <?php endif;?>
            <form method="post" action="contact.php" role="form" id="contact-form">
              <div class=" row form-group">
                <div class="col-lg-6">
                  <label for="firstnameid">First name<span class="asterisk"> &#42;</span></label>
                  <input type="text" name="firstname" class="form-control mb-3" id="firstnameid">
                </div>
                <div class="col-lg-6">
                  <label for="lastnameid">Last name<span class="asterisk"> &#42;</span></label>
                  <input type="text" name="lastname" class="form-control mb-3" id="lastnameid">
                </div>
              </div>
              <div class="row form-group">
                <div class="col-lg-6">
                  <label for="phonenumber">Phone number<span class="asterisk"> &#42;</span></label>
                  <input type="tel" name="phonenumber" class="form-control mb-3" id="phonenumberid">
                </div>
                <div class="col-lg-6">
                  <label for="emailid">Email address<span class="asterisk"> &#42;</span></label>
                  <input type="email" name="email" class="form-control mb-3" id="emailid">
                </div>
              </div>
              <div class="row form-group">
                <div class="col-lg-12">
                  <label for="subjectid">How can we help<span class="asterisk"> &#42;</span></label>
                  <select class="form-control mb-3" name="selectdropdown" id="subjectid">
                    <option value="">Please choose an option</option>
                    <option value="I would like to discuss a project">I would like to discuss a project</option>
                    <option value="Existing Web 2 Digital client enquiry">Existing client enquiry</option>
                    <option value="General enquiry">General enquiry</option>
                  </select>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-lg-12">
                  <label for="messageid">Tell us a little bit more<span class="asterisk"> &#42;</span></label>
                  <textarea name="message" class="form-control mb-3" id="messageid" rows="6"></textarea>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-lg-12">
                  <p><span class="asterisk"> &#42;</span> indicates required field</p>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-lg-12 form-check">
                  <input type="checkbox" name="checkbox" class="form-check-input" id="formcheckid">
                  <label for="formcheckid" class=form-check-label mb-3>By checking this tickbox you have confirmed that we can collect the information in this form for the purposes outlined in our <a href="privacypolicy.php">privacy policy.</a></label>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-lg-12">
                  <button type="submit" name="submit" class="btn btn-primary mt-4 g-recaptcha" data-sitekey="sitetoken" data-callback='onSubmit' data-action='submit'>Send Message
                  </button>
                </div>
              </div>
            </form>
          </div>
          <!--Contact Form End-->
        </div>
        <!--Contact Page Row End-->
      </div>
      <!--Container end-->

<?php echo file_get_contents('footer.php'); ?>