Skip to content

Instantly share code, notes, and snippets.

@airways

airways/index.html

Created October 8, 2015 14:16
Show Gist options
  • Save airways/ffb5aff8eb06d6339cb2 to your computer and use it in GitHub Desktop.
Save airways/ffb5aff8eb06d6339cb2 to your computer and use it in GitHub Desktop.
Download ZIP
Basic ProForm 1.65+ Example template -- Example URL: example.com/forms/contact_us -- Place into forms.group template directory
Raw
index.html
{exp:proform:form form_name="{segment_2}" variable_prefix="pf_" error_delimiters="|"}
{pf_formpref:html_prefix}
{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_thank_you_message}
{pf_thank_you_message}
{if:else}
Thank you for your submission!
{/if}
{if:else}
{if pf_form_errors != ''}<span class="error">{pf_form_errors}</span>{/if}
{pf_hidden_fields}
<input type="hidden" name="{pf_field_name}" value="{pf_field_value}" />
{if pf_field_error}<div id="text-E" class="errMsg"><span>{pf_field_error}</span></div>{/if}
{/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 id="pf_row_{pf_fieldrow:count}" class="pf_row">
{pf_fields}
<li id="{if pf_field_html_id}{pf_field_html_id}{if:else}pf_field_{pf_field_number}{/if}" class="pf_column pf_field {pf_field_html_class}" {if pf_field_html_block}
{!-- if you want to have an HTML block hidden or shown based on other field values, change the conditional here
to whatever field_number your block is assigned, then add rules to pf_meta.conditionals* as is done below for normal fields --}
data-field-name="html_block_{pf_field_number}" {if pf_field_number == -1}data-has-conditional="yes"{/if}
{if:else}
data-field-name="{pf_field_name}" {if pf_field_conditionals_count}data-has-conditional="yes"{/if}{/if}>
{if pf_field_conditionals_count}
<script>
pf_meta.conditionals['{pf_field_name}'] = [];
pf_meta.conditionals_type['{pf_field_name}'] = '{pf_field_conditionals_type}';
{pf_field_conditionals}
pf_meta.conditionals['{pf_field_name}'].push(['{pf_cond_field}', '{pf_cond_op}', '{pf_cond_value_esc}']);
{/pf_field_conditionals}
</script>
{/if}
{pf_html_block}
{pf_field_html_block}
{/pf_html_block}
{pf_heading}
{if pf_field_is_step == ''}
<h3>{pf_field_heading}</h3>
{/if}
{/pf_heading}
<label for="{pf_field_name}">{pf_field_label} {if pf_field_is_required}<span class="required">*</span>{/if}</label>
{pf_checkbox}
<div class="pf_field {if pf_vertical}pf_vertical{/if}">
{/pf_checkbox}
{pf_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}" /><!-- valid_email -->
{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}" /><!-- string -->
{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}
{/pf_string}
{pf_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}
{/pf_text}
{pf_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}" /><!-- date -->
{/pf_date}
{pf_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}" /><!-- datetime -->
{/pf_datetime}
{pf_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}" />
{/pf_time}
{pf_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}" />
{/pf_integer}
{pf_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}" />
{/pf_float}
{pf_file}
<div class="pf_files">
<input name="{pf_field_name}" id="{pf_field_name}" type="file" class="{pf_field_is_required}" />
{if pf_field_value}<p>File previously uploaded: <b>{pf_field_filename}</b>. You may upload a new file to replace it.</p>{/if}
</div>
{/pf_file}
{pf_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>
{/pf_checkbox}
{pf_relationship}
{pf_dropdown_style}
<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}
{if pf_is_divider == 0}
<option value="{pf_key}" {pf_selected}>{pf_row}</option>
{/if}
{/pf_field_options}
{if pf_divider_count > 0}
</optgroup>
{/if}
</select>
{/pf_dropdown_style}
{/pf_relationship}
{pf_list}
{pf_dropdown_style}
<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}
{if pf_is_divider == 0}
<option value="{pf_key}" {pf_selected}>{pf_row}</option>
{/if}
{/pf_field_options}
{if pf_divider_count > 0}
</optgroup>
{/if}
</select>
{/pf_dropdown_style}
{pf_check_style}
{pf_field_options}
{if pf_is_divider}
{if pf_divider_number > 0}
</fieldset>
{/if}
<fieldset>
<legend>{pf_label}</legend>
{/if}
{if pf_is_divider == 0}
<div class="pf_option {if pf_vertical}pf_vertical{/if}">
<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}" />
<label for="{pf_field_name}_{pf_key}">{pf_label}</label>
</div>
{/if}
{/pf_field_options}
{if pf_divider_count > 0}
</fieldset>
{/if}
{/pf_check_style}
{pf_radio_style}
{pf_field_options}
{if pf_is_divider}
{if pf_divider_number > 0}
</fieldset>
{/if}
<fieldset>
<legend>{pf_label}</legend>
{/if}
{if pf_is_divider == 0}
<div class="pf_option {if pf_vertical}pf_vertical{/if}">
<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}" />
<label for="{pf_field_name}_{pf_key}">{pf_label}</label>
</div>
{/if}
{/pf_field_options}
{if pf_divider_count > 0}
</fieldset>
{/if}
{/pf_radio_style}
{/pf_list}
{if pf_field_driver}
{pf_field_driver}
{/if}
{if pf_field_error}<div id="text-E" class="errMsg"><span>{pf_field_error}</span></div>{/if}
{pf_checkbox}
</div>
{/pf_checkbox}
</li>
{/pf_fields}
</ul>
<div id="pf_row_clear_{pf_fieldrow:count}" class="pf_clear"></div>
{/pf_fieldrows}
<div class="pf_buttons">
{if pf_use_captcha}
{if pf_interactive_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:else}
{pf_captcha}
{if pf_error:captcha}<span class="error">{pf_error:captcha}</span>{/if}
{/if}
{/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="{if pf_formpref:submit_label}{pf_formpref:submit_label}{if:else}Submit{/if}" />
{if:else}
<input type="submit" value="{if pf_formpref:submit_label}{pf_formpref:submit_label}{if:else}Submit{/if}" disabled="disabled" />
{/if}
</div>
</div>
</div>
{/if}
{pf_formpref:html_postfix}
{/exp:proform:form}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment