Basic ProForm 1.64 Example template -- Example URL: example.com/forms/contact_us -- Place into forms.group template directory

index.html

{exp:proform:form form_name="{segment_2}" variable_prefix="pf_"}
    {if pf_no_results}
        {if pf_pref:invalid_form_message}
            {pf_pref:invalid_form_message}
        {if:else}
            Invalid form name specified!
        {/if}
    {/if}
    {if pf_complete}
        {if pf_pref:thank_you_message}
            {pf_pref:thank_you_message}
        {if:else}
            Thank you for your submission!
        {/if}
    {if:else}
    {pf_hidden_fields}
        <input type="hidden" name="{pf_field_name}" value="{pf_field_value}" />
    {/pf_hidden_fields}
    <input type="hidden" name="_pf_current_step" value="{pf_current_step}" />
    <input type="hidden" name="_pf_goto_step" value="" />
    {if pf_multistep}
        <ul class="pf_steps">
            {pf_steps}
                <li><a href="#{pf_step_no}" class="pf_step {pf_step_active}">{pf_step}</a></li>
            {/pf_steps}
        </ul>
    {/if}
    <div class="pf_wrap">
        {pf_fieldrows}
        <ul class="pf_row">
            {pf_fields}
                {if pf_field_type != "invisible"}
                    <li id="{pf_field_html_id}" class="pf_column {pf_field_html_class}">
                    {if pf_field_html_block}
                        {pf_field_html_block}
                    {if:elseif pf_field_heading}
                        <h3>{pf_field_heading}</h3>
                    {if:else}
                        {if pf_field_type != "checkbox"}
                            <label for="{pf_field_name}">{pf_field_label} {if pf_field_is_required}<span class="required">*</span>{/if}</label>
                            <div class="pf_field {if pf_vertical}pf_vertical{/if}">
                        {/if}
                        {if pf_field_type == "string"}
                            {if pf_field_validation:valid_email}
                                <input type="text" name="{pf_field_name}" id="{pf_field_name}" class="validate-email {pf_field_is_required}" value="{pf_field_value}" placeholder="{pf_field_placeholder}" />
                            {if:else}
                                {if pf_field_length <= 255}
                                    <input type="text" name="{pf_field_name}" id="{pf_field_name}" class="{pf_field_is_required}" value="{pf_field_value}" placeholder="{pf_field_placeholder}" />
                                {if:else}
                                    {if pf_wysiwyg}
                                        <textarea name="{pf_field_name}" id="{pf_field_name}" class="{pf_field_is_required}">{pf_field_value}</textarea>
                                        <script type="text/javascript">bkLib.onDomLoaded(function() { new nicEditor(pf_nic_config).panelInstance('{pf_field_name}'); });</script>
                                    {if:else}
                                        <textarea name="{pf_field_name}" id="{pf_field_name}" class="{pf_field_is_required}">{pf_field_value}</textarea>
                                    {/if}
                                {/if}
                            {/if}
                        {if:elseif pf_field_type == "text"}
                            {if pf_wysiwyg}
                                <textarea name="{pf_field_name}" id="{pf_field_name}" class="{pf_field_is_required}">{pf_field_value}</textarea>
                                <script type="text/javascript">bkLib.onDomLoaded(function() { new nicEditor(pf_nic_config).panelInstance('{pf_field_name}'); });</script>
                            {if:else}
                                <textarea name="{pf_field_name}" id="{pf_field_name}" class="custom_class_here {pf_field_is_required}">{pf_field_value}</textarea>
                            {/if}
                        {if:elseif pf_field_type == "date"}
                            <input type="text" name="{pf_field_name}" id="{pf_field_name}" class="date {pf_field_is_required}" value="{pf_field_value}" placeholder="{pf_field_placeholder}" />
                        {if:elseif pf_field_type == "datetime"}
                            <input type="text" name="{pf_field_name}" id="{pf_field_name}" class="datetime {pf_field_is_required}" value="{pf_field_value}" placeholder="{pf_field_placeholder}" />
                        {if:elseif pf_field_type == "time"}
                            <input type="text" name="{pf_field_name}" id="{pf_field_name}" class="time {pf_field_is_required}" value="{pf_field_value}" placeholder="{pf_field_placeholder}" />
                        {if:elseif pf_field_type == "integer"}
                            <input type="text" name="{pf_field_name}" id="{pf_field_name}" class="validate-integer {pf_field_is_required}" value="{pf_field_value}" placeholder="{pf_field_placeholder}" />
                        {if:elseif pf_field_type == "float"}
                            <input type="text" name="{pf_field_name}" id="{pf_field_name}" class="validate-float {pf_field_is_required}" value="{pf_field_value}" placeholder="{pf_field_placeholder}" />
                        {if:elseif pf_field_type == "file"}
                            <div class="pf_files">
                                <input name="{pf_field_name}" id="{pf_field_name}" type="file" class="{pf_field_is_required}" />
                            </div>
                        {if:elseif pf_field_type == "checkbox"}
                            <div class="pf_field">
                                <div class="pf_option">
                                    <input type="checkbox" name="{pf_field_name}" id="{pf_field_name}" value="y" {if pf_field_checked}checked="checked"{/if} class="{pf_field_is_required}" /><label for="{pf_field_name}">{pf_field_label}</label>
                                </div>
                            </div>
                        {if:elseif pf_field_type == "list" || pf_field_type == "relationship"}
                            {if pf_field_setting_style == "check" || pf_field_setting_style == "radio"}
                                {pf_field_options}
                                    {if pf_is_divider}
                                        {if pf_divider_number > 0}
                                            </fieldset>
                                        {/if}
                                        <fieldset>
                                            <legend>{pf_label}</legend>
                                    {if:else}
                                        <div class="pf_option {if pf_vertical}pf_vertical{/if}">
                                            {if pf_field_setting_style == "check"}
                                                <input type="checkbox" name="{pf_field_name}[]" id="{pf_field_name}_{pf_key}" value="{pf_key}" {if pf_selected}checked="checked"{/if} class="{pf_field_is_required}" />
                                            {/if}
                                            {if pf_field_setting_style == "radio"}
                                                <input type="radio" name="{pf_field_name}" id="{pf_field_name}_{pf_key}" value="{pf_key}" {if pf_selected}checked="checked"{/if} class="{pf_field_is_required}" />
                                            {/if}
                                            <label for="{pf_field_name}_{pf_key}">{pf_label}</label>
                                        </div>
                                    {/if}
                                {/pf_field_options}
                                {if pf_divider_count > 0}
                                    </fieldset>
                                {/if}
                            {if:else}
                                <select name="{pf_field_name}" id="{pf_field_name}" {if pf_multiple}multiple="multiple"{/if} class="{pf_field_is_required}">
                                    {pf_field_options}
                                        {if pf_is_divider}
                                            {if pf_divider_number > 0}
                                                </optgroup>
                                            {/if}
                                            <optgroup label="{pf_label}">
                                        {if:else}
                                            <option value="{pf_key}" {pf_selected}>{pf_row}</option>
                                        {/if}
                                    {/pf_field_options}
                                    {if pf_divider_count > 0}
                                        </optgroup>
                                    {/if}
                                </select>
                            {/if}
                        {if:else}
                            {if pf_field_driver}
                                {pf_field_driver}
                            {if:else}
                                <input type="{pf_field_control}" id="{pf_field_name}" name="{pf_field_name}" value="{pf_field_value}" class="{pf_field_is_required}" />
                            {/if}
                        {/if}
                        {if pf_field_error}<div id="text-E" class="errMsg"><span>{pf_field_error}</span></div>{/if}
                        {if pf_field_type != "checkbox"}
                            </div>
                        {/if}
                    </li>
                    {/if}
                {/if}
            {/pf_fields}
            </ul>
            <div class="pf_clear"></div>
        {/pf_fieldrows}
        <div class="pf_buttons">
            {if pf_use_captcha}
                <div class="pf_captcha">
                    Enter this word: {pf_captcha}<br/>
                    <input type="text" name="captcha" />{if pf_error:captcha}<span class="error">{pf_error:captcha}</span>{/if}
                </div>
            {/if}
            {if pf_multistep}
                <input type="submit" name="_pf_goto_previous" value="< Previous" {if pf_on_first_step}disabled="disabled"{/if} />
                <input type="submit" name="_pf_goto_next" value="Next >" {if pf_on_last_step}disabled="disabled"{/if} />
            {/if}
            {if pf_on_last_step}
                <input type="submit" name="_pf_finish" value="Submit" />
            {if:else}
                <input type="submit" value="Submit" disabled="disabled" />
            {/if}
        </div>
        {/if}
    </div>
{/exp:proform:form}