1. AdvSearch
      1. AdvSearch.AdvSearch
        1. AdvSearch.AdvSearch.tpl
        2. AdvSearch.Advsearch.paging1Tpl
        3. AdvSearch.AdvSearch.paging0Tpl
        4. AdvSearch.AdvSearch.containerTpl
        5. Advsearch.AdvSearch.extractTpl
      2. AdvSearch.AdvSearchHelp
        1. AdvSearch.AdvSearchHelp.helplinkTpl
      3. AdvSearch.AdvSearchForm
        1. Advsearch.AdvSearchForm.tpl
    2. userTools
    3. ActivationEmail
    4. BotBlockX
    5. CacheClear
    6. CacheMaster
    7. Canonical
    8. Captcha
    9. CaseInsensitiveURLS
    10. ClassExtender
    11. ConstantContact
    12. ConvertDatabaseCharset
    13. DefaultResourceGroup
    14. DefaultUserGroup
    15. DirWalker
    16. EmailResource
    17. EZfaq
    18. FileUpload
    19. FixedPre
    20. getDynaDescription
    21. GoRevo
    22. LexiconHelper
    23. LogLogins
    24. LogPageNotFound
    25. MandrillX
    26. MessageManager
    27. NewsPublisher
    28. Notify
    29. ObjectExplorer
    30. Orphans
    31. Personalize
    32. QuickEmail
    33. ReflectBlock
    34. RefreshCache
    35. SiteAtoZ
    36. SiteCheck
    37. SizeMatters
    38. SPForm
    39. StageCoach
    40. Subscribe
    41. SyntaxHighlighter
    42. ThermX
    43. UpgradeMODX
    44. cookieJar
    45. getYoutube
    46. aliasid
    47. AddHeaderfiles
    48. AjaxUpload
    49. amazonSES mailing list
    50. Analytics
    51. Archivist
      1. Archivist.Archivist
        1. Archivist.Archivist.tpl
      2. Archivist.ArchivistGrouper
      3. Archivist.getArchives
        1. Archivist.getArchives.tpl
    52. Articles
      1. Articles.Theming Articles
      2. Articles.Roadmap
      3. Articles.Retrieving Articles Outside of Articles
      4. Articles.Creating a Blog
    53. Babel
      1. Babel.BabelLinks
      2. Babel.BabelTranslation
    54. BannerX
    55. BannerY
    56. Batcher
      1. Batcher.Roadmap
    57. bdListings
      1. bdListings.bdCategories
      2. bdListings.bdHookNewListing
      3. bdListings.bdListings
      4. bdListings.bdPriceGroups
      5. bdListings.bdRedirect
      6. bdListings.bdTargets
    58. boilerX
      1. bx-head-open
      2. bx-head-append
      3. bx-head-close
      4. bx-container-open
      5. bx-container-close
      6. bx-bottom-open
      7. bx-bottom-close
    59. BreadCrumb
      1. BreadCrumb.containerTpl
      2. BreadCrumb.currentCrumbTpl
      3. BreadCrumb.linkCrumbTpl
      4. BreadCrumb.maxCrumbTpl
      5. BreadCrumb.categoryCrumbTpl
      6. BreadCrumb.homeCrumbTpl
    60. Breadcrumbs
    61. BxrExtra
    62. cachebuster
    63. CamperManagement
      1. CamperManagement.Customizing the Component
      2. CamperManagement.Developing the front-end
        1. CamperManagement.cmCamperDetails Snippet
        2. CamperManagement.cmCampers Snippet
        3. CamperManagement.Placeholders you can use
      3. CamperManagement.Managing your vehicle
      4. CamperManagement.Module home
    64. Church Events Calendar
      1. ChurchEvents.MODX Manager functions
      2. ChurchEventsCalendar Snippet
        1. ChurchEvents.Managing events
      3. ChurchEventsList Snippet
      4. ChurchEventsRss Snippet
    65. Cliche
    66. ClientConfig
    67. CMPGenerator
      1. CMPGenerator.5 minute example
      2. CMPGenerator.Foreign Databases
    68. Collections
    69. ContextRouter
    70. CookieList
    71. CronManager
    72. cssSweet
      1. cssSweet.lighten
      2. cssSweet.modval
      3. cssSweet.prefix
    73. CustomUrls
    74. Databackup
    75. Discuss
      1. Discuss.ChunkMap
      2. Discuss.Contributing
      3. Discuss.Controllers
        1. Discuss.Controllers.board
          1. Discuss.Controllers.board.xml
        2. Discuss.Controllers.home
        3. Discuss.Controllers.login
        4. Discuss.Controllers.logout
        5. Discuss.Controllers.profile
        6. Discuss.Controllers.register
        7. Discuss.Controllers.search
        8. Discuss.Controllers.thread
      4. Discuss.Creating a Discuss Theme
      5. Discuss.Database Model
      6. Discuss.Features
      7. Discuss.Getting Started
      8. Discuss.Installation
        1. Discuss.Installation from Git
      9. Discuss.Roadmap
      10. Configuring Sphinx for Search
    76. DitsNews
    77. Eletters
      1. Eletters.API
      2. Eletters.FormIt
      3. Eletters.Import CSV
      4. Eletters.Templates
    78. EventManager
      1. EventManager.emListEvents
      2. EventManager.emNewReservationHook
    79. eventsCalendar2
      1. eventsCalendar2.eventsCalendar2
      2. eventsCalendar2.Generating events
      3. eventsCalendar2.tplCalendar2
      4. eventsCalendar2.tplCell2
      5. eventsCalendar2.tplEvent2
      6. eventsCalendar2.tplHead2
    80. EventsX
      1. EventsX.Examples
    81. ExerPlan
    82. fastField
    83. FileDownload R
      1. FileDownload R.FileDownload
      2. FileDownload R.FileDownloadLink
      3. FileDownload R.Plugins
    84. FileLister
      1. FileLister.FileLister
        1. FileLister.FileLister.directoryTpl
        2. FileLister.FileLister.fileLinkTpl
        3. FileLister.FileLister.fileTpl
        4. FileLister.FileLister.pathTpl
      2. FileLister.Roadmap
    85. FirstChildRedirect
    86. Flexibility
    87. ForcedPasswdChange
    88. FormIt
      1. FormIt.FormItCountryOptions
      2. FormIt.FormItRetriever
      3. FormIt.FormItStateOptions
      4. FormIt.Hooks
        1. FormIt.Hooks.email
        2. FormIt.Hooks.FormItAutoResponder
        3. FormIt.Hooks.math
        4. FormIt.Hooks.recaptcha
        5. FormIt.Hooks.redirect
        6. FormIt.Hooks.spam
        7. FormIt.Hooks.FormItSaveForm
      5. FormIt.Roadmap
      6. FormIt.Tutorials and Examples
        1. FormIt.Examples.Custom Hook
        2. FormIt.Examples.Simple Contact Page
        3. FormIt.Handling Selects, Checkboxes and Radios
        4. FormIt.Using a Blank NoSpam Field
        5. Form and anchors
      7. FormIt.Validators
    89. FormIt2db
    90. FormitFastPack
      1. FormitFastPack Tutorial
      2. fieldSetDefaults
      3. field
      4. fiGenerateReport
      5. fiProcessArrays
    91. FormSave
    92. FoundationX
      1. FoundationX.How to Use FoundationX
    93. FX2themebase
      1. FX2.How to Use FX2
        1. FX2.For Theme Authors
      2. FX2.Included Extras
    94. Gallery
      1. Gallery.Example1
      2. Gallery.Gallery
        1. Gallery.Gallery.containerTpl
        2. Gallery.Gallery.thumbTpl
        3. Assigning a Gallery album to a specifc resource
      3. Gallery.GalleryAlbums
        1. Gallery.GalleryAlbums.rowTpl
        2. Gallery.GalleryAlbums.containerTpl
      4. Gallery.GalleryItem
        1. Gallery.GalleryItem.albumTpl
        2. Gallery.GalleryItem.GalleryItemPagination
        3. Gallery.GalleryItem.tagTpl
        4. Gallery.GalleryItem.tpl
      5. Gallery.Plugins
        1. Gallery.Plugins.Galleriffic
        2. Gallery.Plugins.Slimbox
      6. Gallery.Roadmap
      7. Gallery.Setting Up the GalleryItem TV
      8. Gallery.Setting Up Your Gallery
    95. GatewayManager
    96. gCal
    97. getDate
    98. getFeed
      1. getFeed.Adding a Twitter Feed
    99. getPage
    100. getRelated
    101. getResourceField
    102. getResources
      1. getResources.Examples
        1. getResources.Building a RSS feed
        2. getResources.Category Index Page with Thumbnails
        3. getResources.Google XML Sitemap
    103. getUrlParam
    104. getRTImages
    105. getVimeo
    106. GoogleSiteMap
      1. GoogleSiteMap.GoogleSiteMap
        1. GoogleSiteMap.GoogleSiteMap.containerTpl
        2. GoogleSiteMap.GoogleSiteMap.itemTpl
      2. GoogleSiteMap.Roadmap
      3. GoogleSiteMapVersion1
    107. GridClassKey
    108. HandyMan
      1. HandyMan.Frequently Asked Questions
      2. HandyMan.Installation
      3. HandyMan.Roadmap
    109. Hits
    110. HitsPage
    111. HybridAuth
      1. HybridAuth.Integrating Facebook
      2. HybridAuth.Integrating Google
      3. HybridAuth.Integrating Twitter
      4. HybridAuth.Integrating VK.com
    112. If
    113. Image+
    114. imageHERE
    115. ImageStyles
    116. ImportX
    117. LexRating
    118. Lingua
    119. Login
      1. Login.ChangePassword
      2. Login.ConfirmRegister
      3. Login.ForgotPassword
      4. Login.Login
      5. Login.Profile
      6. Login.Register
        1. Register.Example Form 1
      7. Login.ResetPassword
      8. Login.Roadmap
      9. Login.Tutorials
        1. Login.Basic Setup
        2. Login.Extended User Profiles
        3. Login.Request Membership
        4. Login.User Profiles
        5. Login.Using Custom Fields
        6. Login.Using Pre and Post Hooks
      10. Login.UpdateProfile
    120. Loginza
      1. Loginza.Loginza
      2. tpl.Loginza.login
      3. tpl.Loginza.logout
      4. tpl.Loginza.profile
    121. mChimpX
    122. MetaX
    123. mhPayPal
      1. mhPayPal.Snippet Usage
        1. mhPayPal.Snippet Usage.Hooks
        2. mhPayPal.Snippet Usage.Templating
    124. MIGX
      1. MIGX.Backend-Usage
      2. MIGX.Data-Entry
      3. MIGX.Frontend-Usage
      4. MIGX.Tutorials
        1. MIGX.Fancybox-images with seperate placeholders in Richtext-Content
        2. MIGX.Simple opening hours table
        3. Using resource-specific mediasource and multifile-uploader with MIGX
        4. MIGX.Varying layout-boxes
          1. MIGX.Varying layout-boxes.Configurator-Version
        5. Creating Selectable and Sortable lists for MIGX
        6. MIGX.sortable resourcelist
        7. Using resource-specific mediasource and multifile-uploader with MIGX (Old Version)
        8. MIGX.Using Grid Inline Editing
    125. MIGXdb
      1. MIGXdb.Configuration
      2. MIGXdb.Tutorials
        1. MIGXdb.Create a basic gallery-management from scratch with MIGXdb
          1. Add resource-specific mediasource and multifile-uploader to the gallery
          2. Add Image-Tagging to the Gallery
        2. MIGXdb.Create doodles manager with help of MIGXdb
        3. MIGXdb.Manage Child-Resources in a grid-TV with help of MIGXdb
        4. MIGXdb.Manage Events-Resources in a CMP with help of MIGXdb
      3. MigxCalendars
    126. MinifyX
    127. miniShop2
      1. miniShop.Screenshots
    128. modActiveDirectory
    129. ModDef
    130. modExtra
    131. modMobile
    132. modSwiftMailer
    133. mxCalendar
      1. mxCalendar.Examples
      2. mxCalendar.Placeholders
    134. mxExtendedMenu
    135. mxFormBuilder
      1. mxFormBuilder.Create Form
      2. mxFormBuilder.Hooks
      3. mxFormBuilder.Field Types
      4. mxFormBuilder.Create Form List in TV
      5. mxFormBuilder.Fields
    136. mxHasTvs
    137. MoneyBird
      1. MoneyBird.Contacts
      2. MoneyBird.Invoices
      3. MoneyBird.NrFormat
    138. ObfuscateEmail-Revo
    139. PackMan
      1. PackMan.Roadmap
    140. PageBreaker
      1. PageBreaker.PageBreaker
      2. tpl.PageBreaker.ajax
      3. tpl.PageBreaker.navigation
    141. Peoples
      1. Peoples.PeopleGroup
        1. Peoples.PeopleGroup.userTpl
      2. Peoples.PeopleGroups
        1. Peoples.PeopleGroups.tpl
      3. Peoples.Peoples
        1. Peoples.Peoples.tpl
      4. Peoples.Roadmap
    142. PHP Tidy (plugin)
    143. phpThumbOf
    144. Polls
      1. Polls.Polls
      2. Polls.PollsLatest
      3. Polls.PollsPrevious
      4. Polls.PollsResult
    145. POI Manager
    146. QuickCrumbs
      1. QuickCrumbs.Example
    147. Quip
      1. Quip.Quip
        1. Quip.Quip.tplComment
        2. Quip.Quip.tplCommentOptions
        3. Quip.Quip.tplComments
        4. Quip.Quip.tplReport
      2. Quip.QuipCount
      3. Quip.QuipLatestComments
      4. Quip.QuipReply
        1. Quip.QuipReply.tplAddComment
        2. Quip.QuipReply.tplLoginToComment
        3. Quip.QuipReply.tplPreview
      5. Quip.QuipRss
      6. Quip.Roadmap
      7. Quip.Upgrading
        1. Quip.Upgrading to 1.0.1
    148. Rampart
      1. Rampart.hook.RampartFormIt
      2. Rampart.hook.RampartQuip
      3. Rampart.preHook.RampartRegister
    149. Redirector
    150. renderResources
    151. ResourceWatcher
    152. RezImgCrop
    153. Rowboat
      1. Rowboat.Rowboat
    154. sekFancyBox
      1. sekFancyBox & Gallery
    155. sekFormTools
      1. sekFormTools.input.autocomplete
      2. sekFormTools.input.combobox
      3. sekFormTools.input.datepicker
      4. sekFormTools.input.helper
      5. sekFormTools.input.textfield
      6. sekFormTools Advanced Examples
    156. sekSiteTools
      1. sekSiteTools.easytabs
      2. sekSiteTools.google.analytics
      3. sekSiteTools.printdiv
    157. sekUserGalleries
      1. sekUserGalleries.album.items.helper
      2. sekUserGalleries.album.items.manage
      3. sekUserGalleries.album.manage
      4. sekUserGalleries.album.view
      5. sekUserGalleries.browse.galleries
      6. sekUserGalleries.directory
      7. sekUserGalleries.image.information
      8. sekUserGalleries.search
      9. sekUserGalleries.users.gallery.manage
      10. sekUserGalleries.users.gallery.view
    158. selfLink
    159. Shopkeeper
    160. siblingNav
    161. SimpleCart
    162. SimpleSearch
      1. SimpleSearch.Roadmap
      2. SimpleSearch.SimpleSearch
        1. SimpleSearch.Faceted Search Through PostHooks
        2. SimpleSearch.SimpleSearch.containerTpl
        3. SimpleSearch.SimpleSearch.currentPageTpl
        4. SimpleSearch.SimpleSearch.pageTpl
        5. SimpleSearch.SimpleSearch.tpl
      3. SimpleSearch.SimpleSearchForm
        1. SimpleSearch.SimpleSearchForm.tpl
      4. SimpleSearch.Solr
    163. SiteEditor
    164. sitemapFriend
    165. Slideshow Manager
      1. jgSlideshow Snippet
      2. Slideshow Manager CMP
    166. sLink
    167. SmartOptimizer
    168. SmartTag
    169. StatCache
    170. SocialLogin
    171. SocialSuite
      1. SocialSuite.getFacebookPhotos
      2. SocialSuite.getFacebookProfile
      3. SocialSuite.getFacebookShares
      4. SocialSuite.getGooglePlusShares
      5. SocialSuite.getTwitterProfile
      6. SocialSuite.prettyNumbers
    172. spieFeed
    173. StaticSaver
    174. StoreLocator
    175. SubscribeMe
      1. SubscribeMe.Configuring API Credentials, IPN and going Live
      2. SubscribeMe.Setting up the Payment Flow
        1. SubscribeMe - Listing the Products
        2. SubscribeMe - Setting up the Payment Methods
        3. SubscribeMe - Subscription Confirmation Page
      3. SubscribeMe.User Account Management
    176. SyntaxChecker
    177. Tagger
    178. TaggingAtoZ
    179. tagLister
      1. tagLister.getResourcesTag
      2. tagLister.tagLister
        1. tagLister.tagLister.all
        2. tagLister.tagLister.tpl
      3. tagLister.tolinks
        1. tagLister.tolinks.tpl
    180. TinyMCE
      1. TinyMCE.Spellchecker
      2. TinyMCE.Table controls
      3. TinyMCE.Template
    181. Upload to Users CMP
    182. VersionX
      1. VersionX.Roadmap
    183. virtuNewsletter
      1. Mailgun integration
    184. Wayfinder
      1. Wayfinder Introductory Examples
    185. xFPC

FormitFastPack field snippet

Created by Oleg Pryadko on Mar 21, 2014. Last edited by Joshua Curtis on Mar 14, 2018.
This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

Usage

Call below the FormIt (or any other request-processing snippet) to generate a single HTML form field.

For example: [[!field? &name=`full_name` &type=`text` &label=`Enter your name:`]]

Managing Defaults:

  • You can call the fieldSetDefaults snippet with any of the field snippet parameters to set the default values for subsequently-processed field snippets.
  • There is a complete property set in the dummy fieldPropSetExample snippet. You can copy this to the field snippet if desired. However, any property sets on the field snippet prevent the fieldSetDefaults snippet from working for those properties.

Simple Example Form:

[[!FormIt? &prefix=`myprefix.` &submitVar=`submitForm`]]
<form action="[[~[[*id]]]]" method="post">
[[!fieldSetDefaults? &prefix=`myprefix.` &outer_tpl=`myWrapTpl` &resetDefaults=`1`]]
[[!field &name=`full_name` &type=`text` &class=`required`]]
[[!field &name=`favorite_color` &type=`checkbox` &options=`Blue||Red||Yellow`]]
[[!field &name=`location` &type=`select` &label=`Where are you from?` &options=`United States==US||New Zealand==NZ||Never Never Land==NNL`]]
[[!field &name=`message` &type=`textarea`]]
[[!field &name=`submitForm` &type=`submit` &label=` ` &message=`Submit Form`]]
</form>

Snippet Parameters

The most common parameter names are in bold.

Parameter Description Default
array Used with field types that can provide multiple responses (checkbox, select & file input types by default) to signify that the field should be treated as an array. This will append [] to the field name to signify to the form that multiple result values may be selected.

If you're passing an array of options (which will look like this `One||Two||Three`) then add &array=`1` so you can receive multiple values returned from the form.
cache

By default, caching is "auto". Auto caching works as follows:

  • Simple fields without options, elements, or overrides are not cached, nor do they usually benefit from it. To enable caching to see if it helps performance specify &cache=`1`.
  • Fields that have options use selective caching. To disable caching, specify &cache=`0`.

Note that caching does not cache checked/ selected status or the following dynamically-generated placeholders: error, error_class, and current_value

auto
custom_ph (OPTIONAL) Speed improvement. Listing your custom placeholders here or in a fieldSetDefaults call speeds up chunk processing by setting a blank default value. You do not need to list placeholders here that already have a value set somewhere else.

class,multiple,array,header,
default,class,outer_class,
label,note,note_class,size,
title,req,message,clear_message

debug Turn on debugging. 0
delimiter_template The template for the chunk type separator.

<!-- [[+type]] -->

default_delimiter If no outer_type or type is specified, this will be used as the type for the purposes of processing the template chunk.

default

default_value The default value to use if no value is found.
error_class The name of the class to use for the [[+error_class]] placeholder. This placeholder is generated along with [[+error]] if a FormIt error is found for this field.

error

error_prefix Usually automatically determined, you can override the prefix that is prepended to the field name for the purpose of getting the field errors from the MODX placeholders.
inner_element_class The element class (modSnippet or modChunk).

modChunk

inner_element Similar to inner_html, but accepts the name of an element (a chunk or snippet for example). All of the placeholders and parameters are passed to the chunk. You can also specify an optional chunks_path parameter that allows file-based chunks in the form name.chunk.tpl
inner_element_properties A JSON array of additional parameters to pass. Example: {"tpl" : "myChunk"} []
inner_html Specify your own HTML instead of using the field template. Useful if you want to use the outer_tpl and smart caching but specify your own HTML for the field.
key_prefix To use the same field names for different forms on the same page, specify a key prefix.
mark_selected If left blank or set to zero, disables option marking. By default if "options" or an options override is specified, the field snippet will add a marker such as \' checked="checked"\' or (if the field type is "select") \' selected="selected"\' in the right place, assuming you are using HTML syntax for value (value="X"). You can specify the marker to use with the selected_text option. This is a lot faster than using FormItIsSelected or FormItIsChecked.

1

name The name of the field.
options_delimiter_inner The delimiter used to separate the label from the value in the options parameter. ==
options_delimiter_outer The delimiter used to separate each option in the options parameter. ||
options If your field is a nested or group type, such as checkbox, radio, or select, specify the options in tv-style format like so: Label One==value1||Label Two==value2||Label Three==value3 or Value1||Value2||Value3. The field snippet uses a sub-type (specified by option_type) to template the options. Setting this parameter causes smart caching to be enabled by default and "selected" or "checked" to be added to the currently selected option, as appropriate. See "mark_slected" and "cache" parameters.
options_element_class The element class (modSnippet or modChunk).

modChunk

options_element Similar to options_html, but accepts the name of an element (a chunk or snippet for example). All of the placeholders and parameters are passed to the chunk. You can also specify an optional chunks_path parameter that allows file-based chunks in the form name.chunk.tpl
options_element_properties A JSON array of additional parameters to pass. Example: {"tpl" : "myChunk"} []
options_html You can specify your own HTML instead of using the &options parameter to generate options. For example, you might decide to pass in option value="something" data="something" if the type is set to "select". It otherwise acts exactly as if you had specified the options parameter for marking and caching purposes.
option_type Specify the field type used for each option. For &type=`select`, this defaults to "option". For &type=`checkbox` or &type=`radio`, this defaults to "bool".
outer_tpl The outer template chunk, which can be used for any HTML that stays consistent between fields. This is a good place to put your label tags and any wrapping li or div elements that wrap each field in your form. This template can be segmented by field type (or outer type) just like the inner template (&tpl).

fieldWrapTpl

outer_type The outer type. The outer template chunk can divided just like the fieldTypesTpl, but with names unrelated to field types. If left empty, outer_type will default to type.
prefix The prefix used by the FormIt call this field is for - may also work with EditProfile, Register, etc... snippet calls. The prefix is also used for other purposes, such as getting and setting the value in the session. fi.
selected_text The text to use for marking options as selected, checked, or whatnot. Usually automatically determined based on the type, but this can be useful if you have a custom type or want something else.
set_type_ph Sets these placeholders to either true or false depending on whether they match this field type. So, if the field type is text and text is listed here, the placeholder "text" will be set to 1, and the other types listed will be set to an empty string.

text,textarea,checkbox,radio,select

to_placeholders If set, will set all of the placeholders as global MODx placeholders as well. 0
tpl The template chunk to use for templating all of the various fields. Each field is separated from the others by wrapping it - both above and below - with the following HTML comment: <!-- fieldtype --> , where fieldtype is the field type.

fieldTypesTpl

type The field type. Used to decide which subset of the tpl chunk to use. text
use_cookies If no value is found, get the value from the $_COOKIES global array. The array key is use_cookies_prefix+prefix+name. 0
use_cookies_prefix The prefix to use for cookie storage.

field.

use_formit Get the value from MODX placeholders such as those set by formit. The placeholder key is PREFIX+NAME (so you can make this compatible with Login and similar snippets by changing the prefix). 1
use_get If no value is found, get the value from the $_GET global array. The array key is the name of the field. 0
use_request If no value is found, get the value from the $_REQUEST global array. The array key is the name of the field. 0
use_session If no value is found, get the value from the $_SESSION global array. The array key is use_session_prefix+prefix+name. 0
use_session_prefix The prefix to use for session storage. field.

Templating

Field snippets use the following two chunks by default to template inner and outer HTML, respectively: FieldTypesTpl and FieldWrapTpl. The &tpl and &outer_tpl parameters can be used to change the names of these chunks.

The default templates are installed in the core/components/formitfastpack/elements/chunks/. Future versions will include an option to install these chunks automatically, but for now you can copy and paste the content into chunks called "FieldTypesTpl" and "FieldWrapTpl".

Special separators are used to separate the HTML for each type, allowing all of the field types to be managed with only two chunks.

The &type and &outer_type parameters can be used to change the inner and outer types. Field types that contain options also use a third type: &option_type. For example, a select field might use &type=`select` &option_type=`option`.

Which segment of the chunk is used for a particular type?

  1. By default, the separators above and below the segment are <!-- TYPE -->, where TYPE is the type of the field. For example, if &type=`text`, the separator (above and below the HTML field) is <!-- text -->.
  2. If the separators for the type are not found, the snippet looks for the default separators: <!-- default -->
  3. Finally, if the default separators are also not found, the entire chunk is used.

Here is a subset of the default &tpl chunk ( fieldTypesTpl):

<!-- default -->
<input type="[[+type]]" name="[[+name]]" id="[[+key]]" value="[[+current_value]]" class="[[+type]] [[+class]][[+error_class]]" />
<!-- default -->
<!-- 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 -->

Here is the default &outer_tpl chunk ( fieldWrapTpl):

<!-- default -->
<div class="[[+outer_class]]" 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 -->
The "note", "note_field", and "req" placeholders above are examples of custom placeholders.

Placeholders

All of the parameters you pass into the snippet are available as placeholders. This allows you to add custom placeholders such as "required", "class", etc.... simply by passing them into the snippet as parameters.

In addition, the following special placeholders are passed in:

Placeholder Description
inner_html Used in the outer_tpl to position the generated content, which will vary by field type. Simple example: <li>[[+inner_html]]</li>
options_html Used in the tpl to position the options html (only when using &options or an options override). Example: <select name="[[+name]]">[[+options_html]]</select>
current_value The value of the FormIt value for the field name. Exactly the same as writing [[!fi.fieldname]] for each fieldname (if the prefix is fi.). Never gets cached.
error The value of the FormIt error message for the field name, if one is found. Exactly the same as writing [[!fi.error.fieldname]] for each fieldname (if the prefix is fi.). Never gets cached.
error_class set to the value of the error_class parameter (default is " error") ONLY if a FormIt error for the field name is found. Exactly the same as using [[+error:notempty=` error`]].
key A unique but human-friendly identifier for each field or sub-field (useful for HTML id attributes). Generated from the key_prefix, prefix, field name, and (only if using an option field) value.

Using in PHP Scripts

You can write snippets to generate forms from a configuration by simply calling $modx->runSnippet('field', $field_properties_array); . For example:

$output = '';
$output .= $modx->runSnippet('field', array('name'=> 'name', 'type'=> 'text'));
$output .= $modx->runSnippet('field', array('name'=> 'email', 'type'=> 'email'));
return $output;

More Examples

Set the defaults for all field snippets lower down

[[!fieldSetDefaults? &prefix=`myprefix` &chunks_path=`/path/to/chunks/if/using/file/based/chunks/` &outer_class=`ui-widget` ]]

Type defaults to text:

[[!field? &name=`name`]]

Options use the same format as template variables: Label1==Value1||Another Label==another_value. To use the same value for both label and value, just use Value1||Value2||Value3

[[!field? &type=`radio` &req=`1` &name=`color` &label=`Your Favorite Color:` &default=`` 
&options=`Red==red||Blue==blue||Other==default`
]]
[[!field? &type=`radio` &label=` ` &options=`Publish==publish||Save as draft==save||Preview==preview` &name=`action` &default=``]]

Here, a different style of form fields is used by switching out of the default chunks. Use property sets to easily maintain various form styles around the site.

[[!field? &type=`text` &req=`1` &name=`email` &tpl=`aDifferentTemplate` &outer_tpl=`ADifferentOuterTpl`]]

You can disable the outer template:

[[!field? &type=`hidden` &outer_tpl=`` &name=`blank`]]

Here, there were too many options to list, so a chunk name is specified instead that contains the option HTML:

[[!field? &type=`select` &default=`1` &name=`country_id` &label=`Country:` &options_element=`optionsCountries`  &header=`Please select...`]]

A snippet can be used instead of a chunk:

[[!field? &type=`select` &name=`category` &req=`1` &multiple=`1` &title=`Choose some categories` &array=`1`
    &options_element=`mySnippetToListTopics` &options_element_class=`modSnippet` 
    &options_element_properties=`{"tpl":"fieldOptionTopic"}`
]]

&req=`1` is an example of a custom placeholder. In this case, it can be used to add an asterisk or something similar to the label using the notempty output filter

[[!field? &type=`textarea` &class=`elastic` &req=`1` &name=`message` &label=`Comment`]]

There is no need to specify a label if you have a naming convention for your form fields. For example, use [[+label:default=`[[+name:replace=`_== `:ucwords]]`]] to generate a label in your templates. This is already done in the default templates.

[[!field? &type=`select` &name=`favorite_things` &multiple=`1` &array=`1` &options=`MODx==modx||Money==money||Power==power||Other==default`]]

Here is a custom field with a custom type. If you use options with a custom type, you need to specify the type of the options fields with &option_type.

[[!field? &type=`customtype` &name=`custom_field_type` &_note=`Make sure you add this custom field to the &tpl chunk!` &custom_placeholder=`custom_value` &another_custom_placeholder=`And another custom value` &options=`One||Two||Three` &option_type=`radio`]]

You can even use field snippets for the submit field:

[[!field? &type=`submit` &name=`submitForm`]]

Comment Policy

Comments intended to help other users with this document are welcome! If you have a suggestion for this Extra document, please attempt to contact the author directly, possibly on GitHub or in the MODX Community Forums.

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab) or become an editor of the MODX Documentation.