联系表单将重点放在提交上

Question

我有一个 bootstrap 一页最后有一个联系表。我希望在提交时将重点放在该部分而不是页面的开头。因此，如果消息已发送，用户将看到 OK 消息，否则他们将看到错误。

这是我的代码。 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>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="send" /></p>            
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

非常感谢您。

Answer 1

在html中使用AJAX调用php。

联系表单将重点放在提交上

contact form set focus on submission

html

forms

twitter-bootstrap

focus

contact