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:

    <option value="">Select</option>
    {% set states = form.getField('contact.state') %}
        {% for option in states %}
            <option value="{{ option.value }}">{{ option.label }}</option>
        {% endfor %}

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

  {% if submittedEntry is defined %}

    {# Assumes you have an errorList macro #}
    {{ errorList(submittedEntry.getErrors(dropdownField.handle)) }}

  {% endif %}

{% endif %}
  • Awesome! - Great work Ben. – Damon Oct 21 '15 at 13:24

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

I've made a note to update this post when we get something easier to use in place.

  • 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 Sep 24 '15 at 1:17
  • We agree it's obvious that this should be easier! – Ben Parizek Sep 24 '15 at 2:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.