PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Is there a Hook / Filter to manipulate form output?

  1. Hey,

    While styling my contact form page, I need to add a container element around the select (dropdown), or modify the <div class="ginput_container"> code where the element contained within is a dropdown.

    Is there a hook or filter that would help me to do this, specifically only for dropdown elements?

    i.e. The current output looks like:

    <li class="gfield gfield_contains_required" id="field_1_4">
        <label for="input_1_4" class="gfield_label">Drop Down<span class="gfield_required">*</span></label>
        <div class="ginput_container">
            <select tabindex="13" class="medium gfield_select" id="input_1_4" name="input_4">
                <option value="First Choice">First Choice</option>
                <option value="Second Choice">Second Choice</option>
                <option value="Third Choice">Third Choice</option>
            </select>
        </div>
    </li>

    I need it to look like this:

    <li class="gfield gfield_contains_required" id="field_1_4">
        <label for="input_1_4" class="gfield_label">Drop Down<span class="gfield_required">*</span></label>
        <div class="ginput_container select-wrapper">
            <select tabindex="13" class="medium gfield_select" id="input_1_4" name="input_4">
                <option value="First Choice">First Choice</option>
                <option value="Second Choice">Second Choice</option>
                <option value="Third Choice">Third Choice</option>
            </select>
        </div>
    </li>

    or this:

    <li class="gfield gfield_contains_required" id="field_1_4">
        <label for="input_1_4" class="gfield_label">Drop Down<span class="gfield_required">*</span></label>
        <div class="ginput_container">
         <div class="select-wrapper">
            <select tabindex="13" class="medium gfield_select" id="input_1_4" name="input_4">
                <option value="First Choice">First Choice</option>
                <option value="Second Choice">Second Choice</option>
                <option value="Third Choice">Third Choice</option>
            </select>
        </div>
        </div>
    </li>

    I know this can probably be done with jQuery if not by modifying the output with a hook / filter, but I don't know how to do this.

    Any help is greatly appreciated!

    James

    Posted 12 years ago on Thursday August 18, 2011 | Permalink
  2. Hi James,

    Take a look at this hook:

    http://www.gravityhelp.com/documentation/page/Gform_field_content

    It gives you the ability to complete rewrite the ouputted HTML for a field.

    Posted 12 years ago on Thursday August 18, 2011 | Permalink