Answers.Body: <p>As of Sprout Forms 2.0, this has become a lot easier.  Hopefully I can win that last answer away from myself!</p>
  
  <h3>A few options</h3>
  
  <p>First, Sprout Forms 2.0 adds multiple new override options so you may be able to address this problem in a different way now to that will get away from needing to handle this in Custom HTML.  Things to consider:</p>
  
  <ul>
  <li><a href="http://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/template-overrides" rel="nofollow">Template Overrides</a> - If you were using custom HTML because the default templates we're not the right HTML format for your needs, you can now easily override those default templates on a per-form basis.</li>
  <li><a href="http://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/rendering-options" rel="nofollow">Rendering Options</a> - If specific attributes of the field such as the ID or Class did not meet your needs, you could potentially dynamically override them while still using a tag like <code>displayForm()</code> or <code>displayField()</code></li>
  <li><a href="http://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/custom-front-end-fields" rel="nofollow">Front-end Field API</a> - You could create a custom plugin that adds front-end field support for a custom State Dropdown field. </li>
  </ul>
  
  <h3>Custom HTML</h3>
  
  <p>If you still feel custom HTML is the best fit for you, there is now a <code>SproutForms_FormModel::getField()</code> method and <code>craft.sproutForms.getEntry</code> tag to help manage retained values and error states.  Here is a generic example.  A more complete examples of all Standard front-end field types can be found in the docs <a href="http://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/examples/custom-html#example-code-to-manually-manage-all-default-fields-in-your-templates" rel="nofollow">Custom HTML Forms and Example Fields</a></p>
  
  <pre><code>{# Get our Form data #}
  {% set form = craft.sproutForms.form('formHandle') %}
  
  {# Get our Form Entry data to manage error states and re-populating field values #}
  {% set submittedEntry = craft.sproutForms.getEntry(form) %}
  
  {# Get our Field Model #}
  {% set dropdownField = form.getField('dropdown') %}
  
  {# We use the Twig attribute tag to dynamically access our 
       field value on the submitted Form Entry #}
  {% set submittedDropdownValue = attribute(submittedEntry, dropdownField.handle) %}
  
  {% if dropdownField is defined %}
  
    {{ dropdownField.name }}
  
    &lt;select name="fields[{{ dropdownField.handle }}]"&gt;
      &lt;option value=""&gt;Select...&lt;/option&gt;
      {% for option in dropdownField.settings.options %}
  
        {% set defaultValue = option.default ? option.value : null %}
        {% set selectedDropdownValue = submittedDropdownValue != '' ? submittedDropdownValue : defaultValue %}
  
        &lt;option value="{{ option.value }}" {% if selectedDropdownValue == option.value %}selected="selected"{% endif %}&gt;{{ option.label }}&lt;/option&gt;
  
      {% endfor %}
    &lt;/select&gt;
  
    {% if submittedEntry is defined %}
  
      {# Assumes you have an errorList macro #}
      {{ errorList(submittedEntry.getErrors(dropdownField.handle)) }}
  
    {% endif %}
  
  {% endif %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-21T13:24:19.133Z
Answers.Text: Awesome! - Great work Ben.
Answers.UserDisplayName: Damon
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-20T23:28:26.477Z
Answers.LastActivityDate: 2015-10-20T23:28:26.477Z
Answers.UserDisplayName: Ben Parizek
Answers.Body: <p>We're working on a better way to handle this in future versions of Sprout Forms. (Currently Sprout Forms v1.1.0).</p>
  
  <p>Right now, your options are:</p>
  
  <ol>
  <li>Write a custom plugin to make this easier for yourself</li>
  <li>Access the info your looking for in a fairly verbose way using the <code>craft.sproutForms.form</code> tag</li>
  </ol>
  
  <p>Here's a rough example of how you can get access to the FieldModel of a dropdown field.  It involves retrieving the whole SproutForms_FormModel, looping through the tabs and testing for the field you wish to access:</p>
  
  <pre><code>{% set dropdownField = null %}
  {% set form = craft.sproutForms.form('contact') %}
  
  {% for tab in form.getFieldLayout().getTabs() %}
  
      {% set fields = tab.getFields() %}
  
      {% for field in fields %} 
  
          {% set required = field.required %}
          {% set tabId = field.tabId %}
  
          {% set field = field.getField() %}
  
          {% if field.handle == 'dropdownFieldHandle' %}
              {% setdropdownField = field %}
          {% endif %}
  
      {% endfor %}
  
  {% endfor %}
  
  {% if dropdownField is defined %}
      &lt;select name="fields[{{ dropdownField.handle }}]"&gt;
          {% for option in dropdownField.settings.options %}
              &lt;option value="{{ option.value }}"&gt;{{ option.label }}&lt;/option&gt;
          {% endfor %}
      &lt;/select&gt;
  {% endif %}
  </code></pre>
  
  <p>I've made a note to update this post when we get something easier to use in place.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-09-24T01:17:50.617Z
Answers.Text: Thanks Ben, I was going to go with the example you provided but thought for sure I was making it a lot harder. I've been known to miss the obvious. :)
Answers.UserDisplayName: Damon
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-09-24T02:35:24.617Z
Answers.Text: We agree it's obvious that this should be easier!
Answers.UserDisplayName: Ben Parizek
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-09-23T22:55:19.590Z
Answers.LastActivityDate: 2015-09-23T22:55:19.590Z
Answers.UserDisplayName: Ben Parizek
Body: <p>I have a contact form where I can choose the current state (U.S states).
  I have the field created in Sprout forms as "state" and is populated with all 50 states.</p>
  
  <p>I would like to use "custom" html and loop through the values of that field. I just can't figure out how to get to it.</p>
  
  <p>I know I can output the whole field/element using:</p>
  
  <pre><code>{{ craft.sproutForms.displayField('contact.state') }}
  </code></pre>
  
  <p>But that outputs a whole html element. I only want the options so I can loop over them like this:</p>
  
  <pre><code>....
  &lt;select&gt;
      &lt;option value=""&gt;Select&lt;/option&gt;
      {% set states = form.getField('contact.state') %}
          {% for option in states %}
              &lt;option value="{{ option.value }}"&gt;{{ option.label }}&lt;/option&gt;
          {% endfor %}
  ....
  &lt;/select&gt;
  </code></pre>
  
Tags: <plugin-sproutforms>
Title: How can I populate a drop-down on the front-end using Sprout Forms?
ThreadText: # How can I populate a drop-down on the front-end using Sprout Forms?
  
  (Asked by: username_0 on 2015-09-23)
  
  I have a contact form where I can choose the current state (U.S states).
  I have the field created in Sprout forms as "state" and is populated with all 50 states.
  
  I would like to use "custom" html and loop through the values of that field. I just can't figure out how to get to it.
  
  I know I can output the whole field/element using:
  
  ```
  {{ craft.sproutForms.displayField('contact.state') }}
  
  ```
  
  But that outputs a whole html element. I only want the options so I can loop over them like this:
  
  ```
  ....
  <select>
      <option value="">Select</option>
      {% set states = form.getField('contact.state') %}
          {% for option in states %}
              <option value="{{ option.value }}">{{ option.label }}</option>
          {% endfor %}
  ....
  </select>
  
  ```
  
  **Tags:** plugin-sproutforms
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2015-10-20. Score: 2 | Accepted answer
  
  As of Sprout Forms 2.0, this has become a lot easier. Hopefully I can win that last answer away from myself!
  
  ### A few options
  
  First, Sprout Forms 2.0 adds multiple new override options so you may be able to address this problem in a different way now to that will get away from needing to handle this in Custom HTML. Things to consider:
  
  * [Template Overrides](http://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/template-overrides) - If you were using custom HTML because the default templates we're not the right HTML format for your needs, you can now easily override those default templates on a per-form basis.
  * [Rendering Options](http://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/rendering-options) - If specific attributes of the field such as the ID or Class did not meet your needs, you could potentially dynamically override them while still using a tag like `displayForm()` or `displayField()`
  * [Front-end Field API](http://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/custom-front-end-fields) - You could create a custom plugin that adds front-end field support for a custom State Dropdown field.
  
  ### Custom HTML
  
  If you still feel custom HTML is the best fit for you, there is now a `SproutForms_FormModel::getField()` method and `craft.sproutForms.getEntry` tag to help manage retained values and error states. Here is a generic example. A more complete examples of all Standard front-end field types can be found in the docs [Custom HTML Forms and Example Fields](http://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/examples/custom-html#example-code-to-manually-manage-all-default-fields-in-your-templates)
  
  ```
  {# Get our Form data #}
  {% set form = craft.sproutForms.form('formHandle') %}
  
  {# Get our Form Entry data to manage error states and re-populating field values #}
  {% set submittedEntry = craft.sproutForms.getEntry(form) %}
  
  {# Get our Field Model #}
  {% set dropdownField = form.getField('dropdown') %}
  
  {# We use the Twig attribute tag to dynamically access our 
       field value on the submitted Form Entry #}
  {% set submittedDropdownValue = attribute(submittedEntry, dropdownField.handle) %}
  
  {% if dropdownField is defined %}
  
    {{ dropdownField.name }}
  
    <select name="fields[{{ dropdownField.handle }}]">
      <option value="">Select...</option>
      {% for option in dropdownField.settings.options %}
  
        {% set defaultValue = option.default ? option.value : null %}
        {% set selectedDropdownValue = submittedDropdownValue != '' ? submittedDropdownValue : defaultValue %}
  
        <option value="{{ option.value }}" {% if selectedDropdownValue == option.value %}selected="selected"{% endif %}>{{ option.label }}</option>
  
      {% endfor %}
    </select>
  
    {% if submittedEntry is defined %}
  
      {# Assumes you have an errorList macro #}
      {{ errorList(submittedEntry.getErrors(dropdownField.handle)) }}
  
    {% endif %}
  
  {% endif %}
  
  ```
  
  > **Comments:**
  > **username_0**: Awesome! - Great work Ben.  
  
  ---
  
  ### Answer by username_1 on 2015-09-23. Score: 1
  
  We're working on a better way to handle this in future versions of Sprout Forms. (Currently Sprout Forms v1.1.0).
  
  Right now, your options are:
  
  1. Write a custom plugin to make this easier for yourself
  2. Access the info your looking for in a fairly verbose way using the `craft.sproutForms.form` tag
  
  Here's a rough example of how you can get access to the FieldModel of a dropdown field. It involves retrieving the whole SproutForms\_FormModel, looping through the tabs and testing for the field you wish to access:
  
  ```
  {% set dropdownField = null %}
  {% set form = craft.sproutForms.form('contact') %}
  
  {% for tab in form.getFieldLayout().getTabs() %}
  
      {% set fields = tab.getFields() %}
  
      {% for field in fields %} 
  
          {% set required = field.required %}
          {% set tabId = field.tabId %}
  
          {% set field = field.getField() %}
  
          {% if field.handle == 'dropdownFieldHandle' %}
              {% setdropdownField = field %}
          {% endif %}
  
      {% endfor %}
  
  {% endfor %}
  
  {% if dropdownField is defined %}
      <select name="fields[{{ dropdownField.handle }}]">
          {% for option in dropdownField.settings.options %}
              <option value="{{ option.value }}">{{ option.label }}</option>
          {% endfor %}
      </select>
  {% endif %}
  
  ```
  
  I've made a note to update this post when we get something easier to use in place.
  
  > **Comments:**
  > **username_0**: Thanks Ben, I was going to go with the example you provided but thought for sure I was making it a lot harder. I've been known to miss the obvious. :)  
  > **username_1**: We agree it's obvious that this should be easier!  
  
  ---
  
  