Form not working despite form detection

Support
1

Hi,
my contact form was successfully detected by Netlify’s form detection. I can view it under Forms.
However, I tested my contact form and received no message - neither via mail nor inside Netlify forms. It says “no submissions yet”.

Here is my code. What’s wrong?

 <section id="contact"> <div class="contact-container"> <form action="/contact-form" enctype="multipart/form-data" id="contact-form" class="contact-form" method="POST" data-netlify="true"> <input type="hidden" name="bot-field"> <input type="hidden" name="form-name" value="contact-form"> <!-- Name --> <div class="form-group"> <label for="name">Name*</label> <input type="text" id="name" name="name" required> <span class="error-message">Bitte geben Sie Ihren Namen ein</span> </div> <!-- Email --> <div class="form-group"> <label for="email">E-Mail</label> <input type="email" id="email" name="email"> </div> <!-- Phone --> <div class="form-group"> <label for="phone">Telefon</label> <input type="tel" id="phone" name="phone"> </div> <!-- Problem Description --> <div class="form-group"> <label for="problem">Problembeschreibung*</label> <textarea id="problem" name="problem" rows="5" required></textarea> <span class="error-message">Bitte beschreiben Sie das Problem</span> </div> <!-- File Upload --> <div class="form-group"> <label>Bild hochladen</label> <div class="file-upload"> <input type="file" id="file-input" accept="image/*"> <label for="file-input" class="upload-btn"> <i class="fas fa-cloud-upload-alt"></i> Datei auswählen </label> <div class="drag-drop-area" id="drag-drop-area"> <p>Oder Bild hierher ziehen</p> </div> <div class="file-preview" id="file-preview"></div> </div> </div> <!-- Submit Button --> <button type="submit" class="submit-btn metallic-btn"> <i class="fas fa-paper-plane"></i> Absenden </button> </form> </div> </section>
2

@baristatechnik What’s the site name / url?

3

It’s Kaffeemaschinen Reparatur Berlin – Jura, Saeco, Miele Service

4

@baristatechnik If you submit the form with the network tab in your developer tools open, you will find that your form never makes a network request.

The code for the form doesn’t actually submit a form:

image
image790×789 106 KB

It:

  • Prevents the default (which prevents the default submission)
  • Collects the values
  • Clears existing in page error messages
  • Shows an error if there is no ‘name’
  • Shows an error if there is no ‘email & phone’
  • Shows an error if there is no ‘problem’
  • Shows a success alert
  • Clears the form

You just need to fix your JavaScript.

Netlify’s AJAX form submission documentation is here:
https://docs.netlify.com/manage/forms/setup/#submit-html-forms-with-ajax

5

Thanks it’s solved :slight_smile: