How can I populate a drop-down on the front-end using Sprout Forms? 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:

....
&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;
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 }}

  &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 %}