I love the Jamstack world and Netlify helps me to handle forms submit easily.
You just have to follow this documentation. Please always prefert to use data-netlify=true because some SSGs (Static Site Generators) tends to strip attributes without value during the build. The doc says that the name attribute of the form determine the form name you can see in the Netlify Dashbaord and in the email notification when a submit occurs.
The email notification contains the same data as the Netlify Dashboard, so I'll take the email as example in the following part of this article.
If we have a code like this <form name="contacts" method="post" data-netlify="true"> we'll receive an email from formresponses@netlify.com with a subject like this: [Netlify] Form submission from contacts form: ….. The dots are usually the first form field value
In my opinion the Forms documentation is lacking explaining how to handle fields, especially the ones with options like checkboxes or radiobuttons.
Indeed the simplest way is to set the attribute name for each field. Let's see an example:
<input type="text" name="contact" placeholder="John Doe" required />
In this case you'll receive an email body like: contact: <value> where <value> is the text inserted by the user.
If you use the label tag to label the input, we have a slightly different email body:
<label for="contact">Contact*</label>
<input type="text" name="contact" id="contact" placeholder="John Doe" required />
we'll produce an email body like: Contact*: value. Note that the content of the label wins over the name attribute.
- How can I handle the field name?
- Can I know which are the checked input fields?
If we follow the HTML naming rules for checkboxes and radiobuttons we must (obviously) use a different id for each input, but the name is not constrained except when we would group something together. Let's take the checkbox example: I initially tried to give a different name to each input, and I checked one of them.
<label>
<input type="checkbox" name="area1" id="checkbox_1" value="kitchen"> Kitchen
</label>
<label>
<input type="checkbox" name="area2" id="checkbox_2" value="living_room" checked> Living Room
</label>
If I submit the form in this state I obtain an email body like: Kitchen: <empty>, Living Room: Living Room. Note how the name and value are different for each check box. That's ok, even if we can do better. Guess if we could have 10 or more check boxes all different options of the same question: read a form submission can become very hard.
If we try to name the same way both check boxes (e.g. "interest_areas") and we check both check boxes only the first checked would be sent to Netlify (and via email). This is an error! How can we fix it?
In the officiale Netlify Forms doc this aspect it wasn't immediately clear to me, but luckily the Netlify Forum helped me with this name convention:
assign the same name to each logically grouped grouped check boxes, but appena at the end of the name the string "[]" to indicate an array.
Let's take the preceding revised example:
<label>
<input type="checkbox" name="interest areas[]" id="checkbox_1" value="kitchen"> Kitchen
</label>
<label>
<input type="checkbox" name="interest areas[]" id="checkbox_2" value="living_room" checked> Living Room
</label>
If we check both check boxes we'll have an email body like: Interest Areas: ["Kitchen", "Living Room"]. This is very better!! We have a grouped keyword that Netlify treat as a keyword ("Interest areas") and it creates an array with the selected options only.
Thanks for reading!!
