<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>

CC BY-SA 3.0
2015-10-21T13:24:19.133Z
Awesome! - Great work Ben.
Damon
CC BY-SA 3.0
2015-10-20T23:28:26.477Z
2015-10-20T23:28:26.477Z
Ben Parizek
<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>

CC BY-SA 3.0
2015-09-24T01:17:50.617Z
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. :)
Damon
CC BY-SA 3.0
2015-09-24T02:35:24.617Z
We agree it's obvious that this should be easier!
Ben Parizek
CC BY-SA 3.0
2015-09-23T22:55:19.590Z
2015-09-23T22:55:19.590Z
Ben Parizek
<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>

<plugin-sproutforms>
How can I populate a drop-down on the front-end using Sprout Forms?
# 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
    {% set states = form.getField('contact.state') %}
        {% for option in states %}
            {{ option.label }}
        {% endfor %}
....

**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 - 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 - 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 - 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
{# 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...
    {% for option in dropdownField.settings.options %}

      {% set defaultValue = option.default ? option.value : null %}
      {% set selectedDropdownValue = submittedDropdownValue != '' ? submittedDropdownValue : defaultValue %}

      {{ option.label }}

    {% endfor %}
  

  {% 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:

Write a custom plugin to make this easier for yourself
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 %}
    
        {% for option in dropdownField.settings.options %}
            {{ option.label }}
        {% endfor %}
    
{% 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!  

---

