Contact form not working

Please can you help - our new website went live today and the contact form isn't working. The link to the website is http://www.okiplay.com/Contact-OkiPlay.html

Many thanks

Hi, and thank you for your reply.
I've checked the PHP version and it's at least PHP 7 so I don't think that's the issue. I also had already added SMTP - copied and pasted from Canvas documentation. One thing I did notice is that the SMTP port you give is 26, and when I looked up which port I should be using it says 25. Anyway - I've tried both and neither work...
Before I get to the error message testing (which would be a stretch for me - I'm not a coder) - I'm going to send you a few attachments with my code. I'd be grateful if you could check it for me as I have used code from Canvas template Contact-recaptcha-v3 plus put in formatting from other Canvas templates. I may well have made errors.
I'd be grateful for a quick response because at the moment our customers are unable to contact us via our website.
Many thanks,
Clare

Here's the code copied:

Code snippet from form.php

/-------------------------------------------------
PHPMailer Initialization
---------------------------------------------------/

$mail = new PHPMailer();

/* Add your SMTP Codes after this Line /
$mail->IsSMTP();
$mail->Host = "mail.okiplay.com";
$mail->SMTPDebug = 0;
$mail->SMTPAuth = true;
$mail->Port = 25;
$mail->Username = "hello@okiplay.com";
$mail->Password = "*****"; (I've taken password out to send this info to you)

// End of SMTP

Code from my contact form html

<div class="col-12 col-md-6 order-2 order-md-1">
<div class="form-widget">
<div class="form-result"></div>
<form class="mb-0" id="template-contactform" id="template-contactform" action="include/form.php" method="post">

<div class="form-process">
	<div class="css3-spinner">
		<div class="css3-spinner-scaler"></div>
	</div>
</div>
											
<div class="form-group">
	<label for="template-contactform-name">Name</label>
	<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="sm-form-control required" />
</div>

<div class="form-group">
	<label for="template-contactform-email">Email</label>
	<input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" />
</div>
<div class="w-100"></div>

<div class="form-group">
	<label for="template-contactform-message">How can we help?</label>
	<textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
</div>

<div class="col-12 form-group d-none">
	<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
</div>

<div class="col-12 form-group">

       <script src="https://www.google.com/recaptcha/api.js?render=*** secret key removed"></script>
	<script>
	grecaptcha.ready(function() {
        grecaptcha.execute('*** secret key removed', {action: 'contact_page'});
	});
	</script>

</div>
									
<div class="col-12 form-group">
	<button class="button m-0" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Send Message</button>
</div>

<input type="hidden" name="prefix" value="template-contactform-">

</form>
</div>

</div>

Ok, I've worked out what the issue is - we needed a different port and we needed to add in smtp secure setting.
So we're getting an email sent. However, if I type in an incorrectly formatted email address, no error appears to alert me to this, in fact nothing happens at all. How can I change this so an error message alerts the person trying to contact us and lets them know what they need to correct?
Many thanks.

Thank you - your response to my support requests is always timely and detailed. I really appreciate it.