How can I populate a drop-down on the front-end using Sprout Forms?

Question

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>

Answer 1

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

Answer 2

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.