Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-12T22:03:05.540Z
Answers.LastActivityDate: 2017-09-12T22:03:05.540Z
Answers.UserDisplayName: Ryan
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-03T02:31:32.667Z
Comments.Text: 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
Comments.UserDisplayName: Brad
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-03T16:31:59.837Z
Comments.Text: 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.
Comments.UserDisplayName: Matt Wilcox
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-05-12T15:20:25.350Z
Comments.Text: Matt, you should have posted this as answer
Comments.UserDisplayName: Yuri Salimovskiy
Tags: <plugin-amforms>
Title: Output Radio or Checkboxes with A+M Forms
ThreadText: # 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
  
  ```
  <div class="row checkboxes">
   <label for="sector">
    <span class="label">Choose your class type</span>
    <div class="floatCheck">
     <div><input type="checkbox" value="personal" tabindex="4"><span>One to One Class</span></div>
     <div><input type="checkbox" value="business" tabindex="5"><span>Business Class</span></div>
     <div><input type="checkbox" value="smallgroup" tabindex="6"><span>Small Group</span></div>
    </div>
   </label>
  </div>
  
  ```
  
  **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**: username_2, 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](https://straightupcraft.com/articles/craft-cms-field-guide-twig?view=input)** 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*):
  
  ```
  <label>Choose an option
      <input type="radio" name="fields[fieldHandle]" value="Option 1"> Option 1
      <input type="radio" name="fields[fieldHandle]" value="Option 2"> Option 2
      <input type="radio" name="fields[fieldHandle]" value="Option 3"> Option 3
  </label>
  
  ```
  
  ### 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:
  
  ```
  <label>Choose your class type
      <input type="hidden" name="fields[fieldHandle]" value="">
      <input type="checkbox" name="fields[fieldHandle][]" value="Option 1"> Option 1
      <input type="checkbox" name="fields[fieldHandle][]" value="Option 2"> Option 2
      <input type="checkbox" name="fields[fieldHandle][]" value="Option 3"> Option 3
  </label>
  
  ```
  
  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
  
  1. French Toast | `French Toast`
  2. Ham n' Eggs | `ham-n-eggs`
  3. Corn Flakes | `c0rnFlaaaake$$`
  
  then your input values need to match *exactly*:
  
  ```
  <label>Breakfast Options:
      <input type="hidden" name="fields[breakfast]" value="">
      <input type="checkbox" name="fields[breakfast][]" value="French Toast"> Option 1 (this text can be anything)
      <input type="checkbox" name="fields[breakfast][]" value="ham-n-eggs"> Option 2
      <input type="checkbox" name="fields[breakfast][]" value="c0rnFlaaaake$$"> Option 3
  </label>
  
  ```
  
  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.
  
  
  ---
  
  