FormitFastPack Tutorial
Created by Oleg Pryadko on Mar 21, 2014.
In this tutorial, we will be creating a simple FormIt contact form. FFP will help reduce repetition of HTML between forms and fields.
1. Call FormIt as usual, but use field snippets to manage the form HTML.
[[!FormIt? &hooks=`math,spam,email,redirect` &emailTpl=`ContactFormReport` &emailTo=`[[++emailsender]]` &emailSubject=`New message from [[++site_name]] [[*pagetitle]] page.` &redirectTo=`[[++site_start]]` &mathMinRange=`1` &mathMaxRange=`20` &submitVar=`submitForm` &errTpl=`[[+error]] ` &validate=`nospam:blank,full_name:required,email:email:required,message:required` ]] [[!fieldSetDefaults? &prefix=`fi.` &outer_type=`default` &tpl=`fieldTypesTpl` &outer_tpl=`fieldWrapTpl`]] <div>[[!+fi.error.error_message]] [[!+fi.validation_error_message]] [[!+fi.error.recaptcha]]</div> <form id="ContactForm" action="[[~[[*id]]]]#ContactForm" method="post"><div> <input name="nospam" type="hidden" /> [[!field? &type=`text` &name=`full_name` &req=`1`]] [[!field? &type=`text` &name=`email` &req=`1`]] [[!field? &type=`text` &name=`phone`]] [[!field? &type=`textarea` &name=`message` &class=`cleardefault` &req=`1`]] [[!field? &type=`text` &req=`1` &name=`math` &label=`What is [[!+fi.op1]] [[!+fi.operator]] [[!+fi.op2]]?`]] <input type="hidden" name="op1" value="[[!+fi.op1]]" /> <input type="hidden" name="op2" value="[[!+fi.op2]]" /> <input type="hidden" name="operator" value="[[!+fi.operator]]" /> [[!field? &type=`submit` &name=`submitForm` &label=` ` &message=`Send this Message!`]] </div></form>
Explanation:
The [[!fieldSetDefaults]] snippet call sets the default values for the subsequent field calls. The values used here are unnecessary, as they are the default values.
Each [[!field]] snippet call manages the HTML for a single form field. This includes handling the latest value and error placeholders generated by FormIt.
2. OPTIONAL: Use the fiGenerateReport hook to simplify your email templates.
A. Add the fiGenerateReport right before the "email" hook.
[[!FormIt? &hooks=`math,spam,fiGenerateReport,email,redirect` ...]]<br>
B. Add the &figrExcludedFields parameter to exclude the special fields used by the math and spam fields from the email report.
[[!FormIt? &hooks=`math,spam,fiGenerateReport,email,redirect` &figrExcludedFields=`op1,op2,operator,math` ]]
C. In your emailTpl template chunk (called "ContactFormReport" in the above example, use the figr_values placeholder to output a dynamic list of fields:
<p>A <strong>[[++site_name]]</strong> contact form submission was sent from the <strong>[[*pagetitle]]</strong> page:</p> [[+figr_values]]
3. OPTIONAL: customize the &outer_tpl chunk
Create a chunk called fieldWrapTpl, where we will template the HTML for the "default" outer type.
<!-- default --> <div class="[[+outer_class:default=`field_wrap`]] [[+type]]_wrap" id="[[+name]]_wrap"> <label for="[[+name]]" title="[[+name:replace=`_== `:ucwords]]">[[+label:default=`[[+name:replace=`_== `:ucwords]]`]][[+req:notempty=` *`]]</label> [[+inner_html]] [[+note:notempty=`<span class="[[+note_class:default=`note`]]"><em>[[+note]]</em></span>`]] [[+error:notempty=`<span class="[[+error_class]]">[[+error]]</span>`]] </div> <!-- default -->
4. OPTIONAL: customize the &tpl chunk
Create a chunk called fieldTypesTpl, where we will template the HTML for all of the field types at once.
<!-- default --> <input type="[[+type]]" name="[[+name]]" id="[[+key]]" value="[[+current_value]]" class="[[+type]] [[+class]][[+error_class]]" size="[[+size:default=`40`]]" /> <!-- default --> <!-- file --> <input type="[[+type]]" name="[[+name]][[+array:notempty=`[]`]]" id="[[+key]]" class="[[+type]] [[+class]][[+error_class]]" /> <!-- file --> <!-- hidden --> <input type="[[+type]]" name="[[+name]]" value="[[+current_value]]" /> <!-- hidden --> <!-- textarea --> <textarea id="[[+key]]" class="[[+type]] [[+class]][[+error_class]]" name="[[+name]]">[[+current_value]]</textarea> <!-- textarea --> <!-- checkbox --> <span class="boolWrap[[+error_class]]"> <input name="[[+name]][[+array:notempty=`[]`]]" type="hidden" value="" /> [[+options_html]] </span> <!-- checkbox --> <!-- radio --> <span class="boolWrap[[+error_class]]"> <input type="hidden" name="[[+name]]" value="" /> [[+options_html]] </span> <!-- radio --> <!-- select --> <span class="[[+class]][[+error_class]]"> <input type="hidden" name="[[+name]][[+array:notempty=`[]`]]" value="" /> <select name="[[+name]][[+array:notempty=`[]`]]" id="[[+key]]" class="[[+class]]"[[+multiple:notempty=` multiple="multiple"`]][[+title:notempty=` title="[[+title]]"`]]> [[+header:notempty=`<option value="[[+default_value]]">[[+header]]</option>`]] [[+options_html]] </select> </span> <!-- select --> <!-- static --> <span class="static_field[[+error_class]]">[[!+[[+name]]]]</span> <!-- static --> <!-- submit --> <input id="[[+key]]" class="button [[+type]] [[+class]]" name="[[+name]]" type="[[+type]]" value="[[+message:default=`Submit`]]" /> <input id="[[+name]]-clear" class="button [[+type]] [[+class]]" type="reset" value="[[+clear_message:default=`Clear Form`]]" /> <!-- submit --> <!-- option --><option value="[[+value]]">[[+label]]</option><!-- option --> <!-- bool --> <span class="boolDiv [[+class]]"> <input type="[[+type]]" class="[[+type]]" value="[[+value]]" name="[[+name]][[+array:notempty=`[]`]]" id="[[+key]]" /> <label for="[[+key]]" class="[[+type]]" id="label[[+key]]">[[+label]]</label></span><!-- bool -->
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).