contact form set focus on submission - html

Question

i have a bootstrap one page with a contact form in the end. I would like on submission to focus on that section and not at the beginning of the page.
So, if the message was send, the users will see the OK message, else they will read the error.
here is my code.
Html
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="heading">Contact</h2>
<div class="row">
<div class="col-md-12">
<?php
$to = 'mail#mail.mm';
$subject = 'Enquiry from the website';
$contact_submitted = 'Your message was submitted and will be responded to as soon as possible. Thank you for contacting us.';
function email_is_valid($email) {
return preg_match('/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i',$email);
}
if (!email_is_valid($to)) {
echo '<p style="color: red;">You must set-up a valid (to) email address before this contact page will work.</p>';
}
if (isset($_POST['contact_submitted'])) {
$return = "\r";
$youremail = trim(htmlspecialchars($_POST['your_email']));
$yourname = stripslashes(strip_tags($_POST['your_name']));
$yourmessage = stripslashes(strip_tags($_POST['your_message']));
$contact_name = "Name: ".$yourname;
$message_text = "Message: ".$yourmessage;
$user_answer = trim(htmlspecialchars($_POST['user_answer']));
$answer = trim(htmlspecialchars($_POST['answer']));
$message = $contact_name . $return . $message_text;
$headers = "From: ".$youremail;
if (email_is_valid($youremail) && !eregi("\r",$youremail) && !eregi("\n",$youremail) && $yourname != "" && $yourmessage != "" && substr(md5($user_answer),5,10) === $answer) {
mail($to,$subject,$message,$headers);
$yourname = '';
$youremail = '';
$yourmessage = '';
echo '<p style="color: blue;">'.$contact_submitted.'</p>';
}
else echo '<p style="color: red;">Please enter your name, a valid email address, your message and the answer to the simple maths question before sending your message.</p>';
}
$number_1 = rand(1, 9);
$number_2 = rand(1, 9);
$answer = substr(md5($number_1+$number_2),5,10);
?>
<form id="contact" action="contact.php" method="post">
<div class="form_settings">
<div class="form-group">
<label for="Name :">Your firstname *</label>
<input type="text" name="your_name" placeholder="Enter your firstname" required="required" class="form-control">
</div>
<div class="form-group">
<label for="Email Address :">Your email *</label>
<input type="email" name="your_email" placeholder="Enter your email" required="required" class="form-control">
</div>
<div class="form-group">
<label for="Message :">Your message for us *</label>
<textarea rows="4" name="your_message" placeholder="Enter your message" required="required" class="form-control"></textarea>
</div>
<p style="line-height: 1.7em;">To help prevent spam, please enter the answer to this question :</p>
<p><span><?php echo $number_1; ?> + <?php echo $number_2; ?> = ?</span><input type="text" name="user_answer" /><input type="hidden" name="answer" value="<?php echo $answer; ?>" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="contact_submitted" value="send" /></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Thank you very much in advance.

Answer 1

Use AJAX in the html to call php.