Home
Support Forums

Form submission not working

jovial-davinci-e2b4a3.netlify.app

Hi, I just created a website with a form, html below.
form fills out ok, but when I click the submit button, nothing happens.
The instructions say I do not have to use JavaScript.

Any help would be appreciated.

     <h3 id="contact-us-text" class="fcf-h3">Contact us</h3>
          <p class="fcf-form-group">
               <label id="your-name-text" for="Name" class="fcf-label">Your name</label>
                      <div class="fcf-input-group">
                            <input type="text" id="Name" name="Name" class="fcf-form-control" required>
                      </div>
          </p>
          <p class="fcf-form-group">
               <label for="Email" class="fcf-label">Your email address</label>
                      <div class="fcf-input-group">
                            <input type="email" id="Email" name="Email" class="fcf-form-control" required>
                      </div>
          </p>
          <p class="fcf-form-group">
              <label for="Message" class="fcf-label">Your message</label>
                      <div class="fcf-input-group">
                            <textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
                      </div>
          </p>
          <div id="reason">
              <label for="Reason" class="fcf-label">Please select from the following so we may address your concerns.
              </label>
                   <div id="reason-checkboxes">
                         <form>
                            <input type="checkbox" name="query" value="Membership"> Membership<br>
                            <input type="checkbox" name="query" value="Structures"> Structures/Buy-Ins<br>
                            <input type="checkbox" name="query" value="other"> Other<br>
                         </form>
                   </div>
                   <div 
                         data-netlify-recaptcha="true">
                   </div>
         </div>
                    <p class="form-row form-submit">
                        <button type="submit" class="button">Send Message</button>
                    </p>

Hi @BrisbanePokerUnited

You have a <form> inside your form.

This form

is inside the

<form 
  name="ContactForm" 
  id="fcf-form-id" 
  class="fcf-form-class" 
  method="POST" 
  data-netlify="true" 
  data-netlify-recaptcha="true">
</form>

Remove the <form>...</form> from around the checkboxes.

You also have two submit buttons

<div class="fcf-form-group">
  <button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block" class="button">Send Message</button>
</div>
<p class="form-row form-submit">
  <button type="submit" class="button">Send Message</button>
</p>

It appears Netlify isn’t recognising your form during post-processing and the hidden attribute is not being added (which also removes the data-netlify="true" attribute.

Thankyou so much, the form within the form was the problem, and works perfectly now.

The second button was commented out so I removed that as well.

1 Like

@coelmay, thanks for this awesome knowledge sharing. Glad everything is now working for you, @BrisbanePokerUnited :netliconfetti: