I want a message box to appear once i click submit

Question

<form name="contactForm" class="customform" action="contact.php" method="post">
            <div class="s-12">
              <div class="margin">
                <div class="s-12 m-12 l-6">
                  <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
                  <p class="name-error form-error">Please enter your name.</p>
                </div>
                <div class="s-12 m-12 l-6">
                  <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
                  <p class="email-error form-error">Please enter your e-mail.</p>
                </div>
              </div>
            </div>
            <div class="s-12"> 
              <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
              <p class="subject-error form-error">Please enter the subject.</p>
            </div>
            <div class="s-12">
              <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
              <p class="message-error form-error">Please enter your message.</p>
            </div>
            <div class="s-12"><button onsubmit="A1" class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
            </form>
            
            <script> 
            function A1()
            {
                alert("Thank You!");
                return true;
            }   
            </script>

Everything in the form is working properly but the message box is not showing after clicking submit! I simply want a message box to pop up saying "Submission has been sent!" to appear once the user clicks submit. I tried onclick="active" but the problem with this one is that even if the whole form is left empty it pops.

Answer 1

The correct placement for the onsubmit event is within the <form> tag rather than on the button element. When using a button or input with the type submit inside a form, it's essential to attach the 'onsubmit' event to the <form> tag itself.

Here's the corrected version form:

<form name="contactForm" class="customform" action="contact.php" method="post" onsubmit="A1()">
    <div class="s-12">
      <div class="margin">
        <div class="s-12 m-12 l-6">
          <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
          <p class="name-error form-error">Please enter your name.</p>
        </div>
        <div class="s-12 m-12 l-6">
          <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
          <p class="email-error form-error">Please enter your e-mail.</p>
        </div>
      </div>
    </div>
    <div class="s-12"> 
      <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
      <p class="subject-error form-error">Please enter the subject.</p>
    </div>
    <div class="s-12">
      <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
      <p class="message-error form-error">Please enter your message.</p>
    </div>
    <div class="s-12"><button onsubmit="A1" class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
    </form>
    
    <script> 
    function A1()
    {
        alert("Thank You!");
        return true;
    }   
    </script>