<p>I'm confused by what you mean by "output". Do you mean: how do you write custom HTML for checkboxes or radio buttons and have them submit to amforms?</p>

<p>If that's the case, you need to understand the <code>name</code> attribute always needs a <code>fields[]</code> array. <strong><a href="https://straightupcraft.com/articles/craft-cms-field-guide-twig?view=input" rel="nofollow noreferrer">StraightUpCraft</a></strong> has a great rundown of how all field types' name attributes should be formatted in order to submit to Craft, no matter if you're using amforms, Sprout, or whatever.</p>

<h3>Radio Buttons</h3>

<p>Radio buttons are a "single option field", meaning that when the form submits, only one value goes through. Your code should look like this (<em>I stripped out some of the unnecessary markup</em>):</p>

<pre><code>&lt;label&gt;Choose an option
    &lt;input type="radio" name="fields[fieldHandle]" value="Option 1"&gt; Option 1
    &lt;input type="radio" name="fields[fieldHandle]" value="Option 2"&gt; Option 2
    &lt;input type="radio" name="fields[fieldHandle]" value="Option 3"&gt; Option 3
&lt;/label&gt;
</code></pre>

<h3>Checkboxes</h3>

<p>Checkboxes are "multi option fields", meaning that when the form submits, any number of values can go through, so you need to submit them a bit differently:</p>

<pre><code>&lt;label&gt;Choose your class type
    &lt;input type="hidden" name="fields[fieldHandle]" value=""&gt;
    &lt;input type="checkbox" name="fields[fieldHandle][]" value="Option 1"&gt; Option 1
    &lt;input type="checkbox" name="fields[fieldHandle][]" value="Option 2"&gt; Option 2
    &lt;input type="checkbox" name="fields[fieldHandle][]" value="Option 3"&gt; Option 3
&lt;/label&gt;
</code></pre>

<p>Pay close attention to each <code>input</code> having an extra <code>[]</code> at the end and the <code>hidden</code> input that collects all their values into a final array.</p>

<hr>

<h3>One very important note</h3>

<p>You <em>absolutely</em> need to make sure the values of each input you have in the HTML equal the values you created in the CMS when you created the field. This includes capitalization and spaces.  So if your checkbox field in the CMS, for example, had a handle of <code>breakfast</code>, and each option's Label/Value was set like </p>

<ol>
<li>French Toast | <code>French Toast</code></li>
<li>Ham n' Eggs  | <code>ham-n-eggs</code></li>
<li>Corn Flakes  | <code>c0rnFlaaaake$$</code></li>
</ol>

<p>then your input values need to match <em>exactly</em>:</p>

<pre><code>&lt;label&gt;Breakfast Options:
    &lt;input type="hidden" name="fields[breakfast]" value=""&gt;
    &lt;input type="checkbox" name="fields[breakfast][]" value="French Toast"&gt; Option 1 (this text can be anything)
    &lt;input type="checkbox" name="fields[breakfast][]" value="ham-n-eggs"&gt; Option 2
    &lt;input type="checkbox" name="fields[breakfast][]" value="c0rnFlaaaake$$"&gt; Option 3
&lt;/label&gt;
</code></pre>

<p>Craft's expecting these to line up, and if they don't, then either these fields' values will be ignored on submit or, if the field is set to required in the CMS, you'll get a back-end validation error.</p>

CC BY-SA 3.0
2017-09-12T22:03:05.540Z
2017-09-12T22:03:05.540Z
Ryan
<p>Does anyone know how to output a checkbox or Radio Button Group with A+M Forms using the custom HTML option?  I'm assuming it's some kind of loop through the available options?</p>

<p>My static HTML looks like below and i'd like to retain the structure if possible.</p>

<p>Many thanks</p>

<pre><code>&lt;div class="row checkboxes"&gt;
 &lt;label for="sector"&gt;
  &lt;span class="label"&gt;Choose your class type&lt;/span&gt;
  &lt;div class="floatCheck"&gt;
   &lt;div&gt;&lt;input type="checkbox" value="personal" tabindex="4"&gt;&lt;span&gt;One to One Class&lt;/span&gt;&lt;/div&gt;
   &lt;div&gt;&lt;input type="checkbox" value="business" tabindex="5"&gt;&lt;span&gt;Business Class&lt;/span&gt;&lt;/div&gt;
   &lt;div&gt;&lt;input type="checkbox" value="smallgroup" tabindex="6"&gt;&lt;span&gt;Small Group&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
 &lt;/label&gt;
&lt;/div&gt;
</code></pre>

CC BY-SA 3.0
2017-05-03T02:31:32.667Z
Looked thru the docs and code, doesn't look like you can do much unless you hack the plugin or you can modify the checkbox.html located in the amforms plugins templates folder: amforms/templates/_display/templates/_includes/forms/checkbox.html
Brad
CC BY-SA 3.0
2017-05-03T16:31:59.837Z
You can set the templates to use as part of the plugin settings. You have full control - just copy the plugin templates into your /templates folder and edit. That said - I find doing this a real PITA as it feels a fairly complex system.
Matt Wilcox
CC BY-SA 3.0
2017-05-12T15:20:25.350Z
Matt, you should have posted this as answer
Yuri Salimovskiy
<plugin-amforms>
Output Radio or Checkboxes with A+M Forms
# Output Radio or Checkboxes with A+M Forms

(Asked by: username_0 on 2017-05-02)

Does anyone know how to output a checkbox or Radio Button Group with A+M Forms using the custom HTML option?  I'm assuming it's some kind of loop through the available options?
My static HTML looks like below and i'd like to retain the structure if possible.
Many thanks

 
  Choose your class type
  
   One to One Class
   Business Class
   Small Group

**Tags:** plugin-amforms

> **Comments:**
> **username_1**: Looked thru the docs and code, doesn't look like you can do much unless you hack the plugin or you can modify the checkbox.html located in the amforms plugins templates folder: amforms/templates/_display/templates/_includes/forms/checkbox.html  
> **username_2**: You can set the templates to use as part of the plugin settings. You have full control - just copy the plugin templates into your /templates folder and edit. That said - I find doing this a real PITA as it feels a fairly complex system.  
> **username_3**: Matt, you should have posted this as answer  

---

## 1 answers

### Answer by username_4 on 2017-09-12. Score: 1

I'm confused by what you mean by "output". Do you mean: how do you write custom HTML for checkboxes or radio buttons and have them submit to amforms?
If that's the case, you need to understand the name attribute always needs a fields[] array. StraightUpCraft has a great rundown of how all field types' name attributes should be formatted in order to submit to Craft, no matter if you're using amforms, Sprout, or whatever.
Radio Buttons
Radio buttons are a "single option field", meaning that when the form submits, only one value goes through. Your code should look like this (I stripped out some of the unnecessary markup):
Choose an option
     Option 1
     Option 2
     Option 3


Checkboxes
Checkboxes are "multi option fields", meaning that when the form submits, any number of values can go through, so you need to submit them a bit differently:
Choose your class type
    
     Option 1
     Option 2
     Option 3


Pay close attention to each input having an extra [] at the end and the hidden input that collects all their values into a final array.

One very important note
You absolutely need to make sure the values of each input you have in the HTML equal the values you created in the CMS when you created the field. This includes capitalization and spaces.  So if your checkbox field in the CMS, for example, had a handle of breakfast, and each option's Label/Value was set like 

French Toast | French Toast
Ham n' Eggs  | ham-n-eggs
Corn Flakes  | c0rnFlaaaake$$

then your input values need to match exactly:
Breakfast Options:
    
     Option 1 (this text can be anything)
     Option 2
     Option 3


Craft's expecting these to line up, and if they don't, then either these fields' values will be ignored on submit or, if the field is set to required in the CMS, you'll get a back-end validation error.


---

