Checkbox fields not being submitted with Netlify Forms

Support
1

Hi, anyone know why my form submissions aren’t including my checkbox fields? I’ve tried it using a single name for all checkboxes and individual names for each. My code was modified after reading several threads in these forums, but it’s still having issues.

<fieldset class="form-grid--1">
  <legend class="text-dark">Services needed</legend>
  <!-- Graphic Design / Branding -->
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="services" value="Graphic Design Branding">
      Graphic Design / Branding
    </label>
  </div>
  <!-- UI/UX Design -->
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="services" value="UI UX Design">
      UI/UX Design
    </label>
  </div>
  <!-- Static Site  -->
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="services" value="Static Site">
      Static Site
    </label>
  </div>
  <!-- Dynamic Site  -->
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="services" value="Dynamic Site">
      Dynamic Site
    </label>
  </div>
</fieldset>
2

Hiya, sorry you are having trouble getting your forms to work.

I see you mentioned you read several threads in these forums. That is a great starting place! Have you also seen our Support Guides? This Support Guide is the first port of call to debug any forms issues.

If you have already read our guides and you are still having problems, please provide more information such as what you have already tried, a link to your live form, your form name as it exists in the UI, and any additional details you think will be beneficial for us to debug this further. :slight_smile:

3

How about updating the name field to allow multiple values? name="services[]"

4

Thanks for the suggestion. Unfortunately, it didn’t change the way the form was submitted. It was worth a try, though.

5

Hi Hilary, thanks for the feedback. I didn’t find anything applicable to this situation in the support guide. I was initially separating the labels from the inputs, using the “for” attribute, which prevented my radio buttons from working, too. After reading this thread, I refactored the checkboxes and radio buttons. The radio buttons work (but the legend text doesn’t display in the submission data), but the checkboxes don’t.

Here’s an example of the submission data (the “Under $10,000” isn’t the checked radio, this is where the radio legend is supposed to go, so that’s broken, too):

Bot Field

First Name*
Name

Last Name*
Last

Email*
my@emaild.com

Phone
123456789

Under $10,000
$10,000 - $30,000

Project Summary*
Form submissions for real!

The live form can be seen here. The form in question is named get-started-form and is on a popout modal that can be accessed through the “Get Started” button. When viewing the page source, it can be found just above the closing body tag.

This is the JavaScript code I’m using to validate and submit the form:

// Form validation
(function() {
  'use strict';
  const forms = document.querySelectorAll('.needs-validation');
  Array.from(forms)
    .forEach(function(form) {
      form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        } else if (form.checkValidity() == true) {
          event.preventDefault();
          form.submit();
        }
        form.classList.add('was-validated');
      }, false);
    });
})();
7

Something must have been breaking in either the way CodeKit was compiling the page or the way Netlify was building from my repo. I rebuilt the project with CodeKit, then pushed the origin again and the problem solved itself. It’s working now. Thanks for all your help!

1 Like
8

Hey Nick! I’m glad you figured it out. If you feel comfortable, could you please share your solution? This would help other folks in the Forums out. If not, have a great day!

9

The solution was recompiling my build folder. CodeKit somehow broke the form when it complied it the first time.

1 Like