Form not submitting?

Support
1

Hi, I’ve just started with netlify and have been learning html/css/js for about 2 months now so I’m still fairly new to it all!

My contact form doesn’t seem to be submitting.

I have used JS to display error messages when required fields are not filled and to double-check when the message area is blank. Also, it shows a little thank you when submitted. But the form doesn’t actually submit. Can someone help me out?

Link: Contact | Chelsea Houston

HTML:

> 		<label for="name" id="name-label">Name *</label>
>     <input type="text" class="form-control" id="sender" name="sender" placeholder="Name" required />
>     <label for="email" id="email-label">Email *</label>
>     <input type="email" name="senderEmail" class="form-control" id="senderEmail" placeholder="Email" required />
>     <textarea id="message" class="input-textarea" name="message"></textarea>
>     <button type="button" class="submit-button" name="submit" id="submit" onclick="return validateForm()">Submit</button>
>   </form>`

JavaScript:
>     `<script>
>   function validateForm() {
>   var a = document.forms["contact-form"]["sender"].value;
>   var b = document.forms["contact-form"]["senderEmail"].value;
>   var c = document.forms["contact-form"]["message"].value;
>   if (a == null || a == "", b == null || b == "") {
>     alert("Please fill all required fields");
>     return false;
>   }
>   else if (c == null || c == "") {
>     if (confirm("Your message is blank, do you still wish to submit?")) {
>       alert("Form submitted");
>       document.getElementById("contactheader").innerHTML = "Thank you for your message.";
>       var element = document.getElementById("contact-form");
>       element.parentNode.removeChild(element);
>     }
>     else {
>       alert("Submission cancelled");
>     }
>   }
>   else {
>     document.getElementById("contactheader").innerHTML = "Thank you for your message.";
>     var element = document.getElementById("contact-form");
>     element.parentNode.removeChild(element);
>   }
> }
> </script>`

I had document.getElementById('contact-form').form.submit(); in my JS but that stopped it working altogether so I took it out

Just a bit confused!

Thank you :slight_smile:

2

After 4 hours I’ve figured it out!
:exploding_head: :exploding_head: :exploding_head:

Here’s my HTML and JavaScript in case anyone finds this and needs help!
The JS asks the user if they want to submit if the message are is still blank, and makes sure they enter their name and email.

<div id="contact-section">
  <h1 id="contactheader">Contact</h1>
<form name="contact-form" id="contact-form" method="POST" data-netlify="true" netlify-honeypot="bot-field">
    <label>*Name</label> 
    <input type="text" class="form-control" name="name" placeholder="Name"/>
    <label>*Email</label> 
    <input type="email" class="form-control" name="email" placeholder="Email"/>
    <label>Message</label> 
    <textarea name="message" class="form-control" class="input-textarea"></textarea></label>
    <button type="submit" class="submit-button" onclick="return validateForm()">Submit</button>
</form>
</div>

<!-- JS -->
<script>
  function validateForm() {
  var a = document.forms["contact-form"]["name"].value;
  var b = document.forms["contact-form"]["email"].value;
  var c = document.forms["contact-form"]["message"].value;
  if (a == null || a == "", b == null || b == "") {
    alert("Please fill all required fields");
    return false;
  }
  else if (c == null || c == "") {
    if (confirm("Your message is blank, do you still wish to submit?")) {
      alert("Form submitted");

    }
    else {
      alert("Submission cancelled");
      return false;
    }
  }
}
</script>
<!-- end JS -->

Link to page: Contact | Chelsea Houston

Have a good day all and keep safe!

1 Like