formBuilder

A jQuery plugin for drag and drop form creation, formBuilder has many options and is translatable.

Example

jQuery($ => {
  $('#fb-editor').formBuilder()
})

Editor Demo

API Demo

Documentation

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Angular 2/4 Version

Changelog

Translators Needed!

As formBuilder usage grows so does it's need to be available in multiple languages. Additions and updates to existing languages are always welcome, see Contributing Languages for details.

3.4.2 (2020-03-04)

Bug Fixes

• clone id bug (82c29a9)

3.4.1 (2020-03-02)

Bug Fixes

• multiple attribute added to select (bb04cd4)

3.4.0 (2020-02-02)

Bug Fixes

• website generation and deployment (6ba8ce0)

Features

• editor: hidden field labels (f9b648c)

3.3.5 (2020-02-02)

Bug Fixes

• website generation and deployment (6ba8ce0)

3.3.4 (2020-02-01)

Bug Fixes

• update dependencies (2c81e41)

3.3.3 (2020-02-01)

Bug Fixes

• travis deploy (127909d)
• travis node version, include docs in dist package (78799a5)

3.3.2 (2020-01-31)

Bug Fixes

• build (55721ec)

3.3.1 (2020-01-28)

Bug Fixes

• field removed from stage but not formData (2c6d824), closes #1028

3.3.0 (2020-01-26)

Bug Fixes

• demo: clear current id when removed from stage (e0c0f2e)

Features

• getCurrentFieldId (c0148b3), closes #571

3.2.6 (2019-12-31)

Bug Fixes

• adblock because of fb- prefix (e091474)

3.2.5 (2019-06-26)

Bug Fixes

• browserslist config, build:vendor (32acf6b)

3.2.4 (2019-05-27)

Bug Fixes

• npm audit (d7d7535)
• numeric value preservation (9e4de4f), closes #945

3.2.3 (2019-05-02)

Bug Fixes

• development build, upgrade babel (a3e446c), closes #942
• use run-script instead of run (e8275e5)

3.2.2 (2019-04-23)

Bug Fixes

• update jquery dependency (5541494)

3.2.1 (2019-03-30)

Bug Fixes

• btn: button style classes not correctly applied (3278840)

3.2.0 (2019-03-29)

Features

• i18n: add support for translatable typeUserAttrs (158b278), closes #919

3.1.3 (2018-12-12)

Bug Fixes

• dependency: har-validator 5.1.2 was unpublished, causing ci builds to fail. Update dependencies to fix (051c0e0)
• langs: Update formBuilder-languages dependency (5b39cb1)

3.1.2 (2018-11-20)

Bug Fixes

• xml: fields are nesting (428ad4f)

3.1.1 (2018-11-19)

Bug Fixes

• formRender: error when destrtcuring null (0b958af)

3.1.0 (2018-11-15)

Features

• column: add bootstrap grid/column support (e9cc23a), closes #859

3.0.2 (2018-11-12)

Bug Fixes

• package.json: remove preinstall (#865) (3ab0d35)

3.0.1 (2018-11-08)

Bug Fixes

• plugins: fix plugins build script (de388bd)

3.0.0 (2018-11-07)

Bug Fixes

• labels: html in xml labels breaks forms (#858) (ea29e79)

BREAKING CHANGES

• labels: Existing forms created using xml dataType that have html labels will have their labels converted to text

Note: the next major release will drop xml support completely

2.10.9 (2018-11-06)

Bug Fixes

• docs: use highlightjs 9.12.0 (2c61944)

2.10.8 (2018-11-06)

Bug Fixes

• cd: website auto deploy (8235f2b)

2.10.7 (2018-11-06)

Bug Fixes

• cd: update travis config and deploy script (ac03283)
• formData: formData getter not working (235b77e)

2.10.6 (2018-11-06)

Bug Fixes

• cd: update deploy script to not require babel-node (f161be5)
• cd: update readme, have deploy script return, run deploy script directly (1916870)

2.10.5 (2018-11-06)

Bug Fixes

• cd: semantic-release plugins, site deploy commands (57325bc)

2.10.4 (2018-11-06)

Bug Fixes

• cd: update encrypted access keys (d36cab9)
• ci: deploy (68e897a)
• ci: deploy script typo (2e3fbe1)
• ci: deploys (63aa874)
• docs: Add missing documentation (#855) (094573c), closes #678 #648

• package.json: update repository.url (a511e0d)

• v2.10.3 - Bugfix fbControlsLoaded #853

• v2.10.2 - Bugfix i18n lookups #852
• v2.10.1 - Bugfix typeUserAttrs #851
• v2.10.0 - Release 2.10.0 #842

  Fixed:

  • inline checkbox/radio
  • bug with clear() as reported in #750 and #828, control type check to clear() so that method doesn't reset the value for checkboxes and radio buttons, which caused the userData getter to work incorrectly.

  • 530, Modified helpers.js::xmlSave() to serialize field data so any XML in a field's attributes is properly escaped. (#804)

  • doubleclick event handler, resolves #535
  • new option name, resolves #687
  • name attribute for inputs with multiple, resolves #736
  • current formData not carried over to new formBuilder instance on language change, resolves #735
  • attrString util, resolves #739
  • Lock dev dependency versions, prevents breaking changes introduced by node_modules
  • Ensure custom attributes are included in exported data resolves #824 resolves #773
  • Other option should hide input value when deselected, resolves #808
  • do not disable className or name attributes- resolves #819
  • ensure html from label is correctly escaped, resolves #816
  • inputSet bug
  • label saving, add esc to close data modal, resolves #757
  • attribute placeholder typo, fix label added when it should be removed, resolves #763
  • bug where empty className is not applied
  • label overflow problem, resolves #779
  • duplicate custom controls

Added:

• Deploy script
• formbuilder-languages module
• disableSubtypes option
• onremove to typeUserEvents
• disableHTMLLabels option, resolves #747
• replaceFields option
• layout and layoutTemplates docs
• onOpenFieldEdit and scrollToFieldOnAdd options, closeAllFieldEdit action
• toggleAllFieldEdit action
• setData and render actions to formRender, resolves #770
• onFieldAdd option and toggleFieldEdit action, resolves #772
• Enable multiple select field for typeUserAttrs, resolves #776
• allowStageSort option, resolves #777

Removed:

• remove mi18n network dependency
• package-lock.json
• replace comma, resolves #740
• unused modules
• gulp

Improved:

• Documentation
• xmlSave performance and code style
• Demo, moved to src so can transpile, inline style, more api buttons for manual testing
• Switch to yarn
• Use existing formBuilder instance instead of creating a new one on setLang, fixes memory leak where reference was maintained to old instance
• typeUserAttrs docs, resolves #810
• code style and cleanup
• use spaces instead of tabs for data formatting
• use both instance methods and jQuery plugin calls ie. fbInstance.setData(formData) and $('.build-wrap').formBuilder('setData', formData)
• update mi18n, add support checkbox custom attributes
• reduce file churn
• improve stickyControls
• use onRender instead of setTimeout

• v2.9.8 - hotfix(inputSets): control icon #634
• v2.9.7 - Merge branch 'hotfix/2.9.7'
• v2.9.6 - Removed unused style, add get-data class to data button #605
• v2.9.5 - Improvements(options) disabledFieldButtons option #604
• v2.9.4 - Pull primary input outside of label for "other" option #598
• v2.9.3 - Fix Edge "Help Text" issue #560 #596
• v2.9.2 - Do not default select radio #603
• v2.9.1 - Move bootstrap stuff inside .formbuilder selector #602
• v2.9.0 - feature(option) replaceFields #593
• v2.8.0 - improvement(checkbox): markup change #585
• v2.7.0 - v2.6.0
• v2.6.0 - Add support for disabling form action buttons (copy, edit, remove) #550
• v2.5.3 - Hotfix: paragraph label overflow resolves #517 #525
• v2.5.2 - Fineuploader error handling & reporting #516
  • fixed autocomplete control behaviour #521
• v2.5.1 - copy in control config rather than reference it so any alterations arent global. support fineuploader handler having querystring args. fix bug in applying fineuploader config to defaults. #513
• v2.5.0 - upgraded fineuploader plugin to use cdnjs by default so it no longer … #509
• v2.4.1 - Hotfix: disableFields option #508
• v2.4.0 - New control plugin to replace the default file upload type #506
• v2.3.5 - Hotfix: Constraint API #505
• v2.3.4 - Hotfix: preload values to exisitng field types, fix fieldOrder #501
• v2.3.3 - Hotfix: actionButtons are submitting forms #498
• v2.3.2 - Hotfix: btn-undefined #496
• v2.3.1 - Hotfix: opts.messages, sourcemaps #495
• v2.3.0 - General cleanup, actionButtons option #494
• v2.2.8 - Bug/extend fields #493
• v2.2.7 - Make checkbox valid when at least one checkbox is checked #490
• v2.2.6 - Remove outdated unminified files #488
• v2.2.5 - Update package manager files to serve correct- updated version #487
• v2.2.4 - Fix Other input behavior #485
• v2.2.3 - Return unformatted JSON by default #481
• v2.2.2 - Hotfix: getData #464
• v2.2.1 - Hotfix: bootstrap addon style, Update documentation
• v2.2.0 - Feature: Controls API, see: https://formbuilder.online/docs/formBuilder/overview/

       Feature: Injected styles, no longer to need include css file.

• v2.1.2 - Update npm scripts
• v2.1.1 - Required checkbox fix, form-horizontal css alignment fix #422
• v2.1.0 - Update docs & Critical fixes #420
• v2.0.0 - ✨ Custom Controls, Automatic i18n, WYSIWYG Editor, HTML Labels ✨ #414
• v1.24.7 - Fix textarea value not saving when preview changed #408
• v1.24.6 - Bugfix: XMLParser children in ie #369, date form-control class #351 #373
• v1.24.5 - Code cleanup, alignment issues, check select required fix
• v1.24.4 - Bug fixes: bower.json, formRender children undefined
• v1.24.2 - Hotfix: typeUserEvents, attribute array converted to comma separated list #297
• v1.24.1 - Bugfix: defaultFields names are overwritten #295
• v1.24.0 - Hotfix and Feature bonanza #293
• v1.23.1 - Hotfix: deleteId undefined #291
• v1.23.0 - Feature: inputSets #285
• v1.22.1 - Bugfix: updateJSON does not set correct version #284
• v1.22.0 - Feature: Rows Attribute for TextArea #282
• v1.21.3 - Hotfix: addField index 0 without fields #279
• v1.21.2 - Add Build and commit to gulp tag task #278
• v1.21.1 - Chore: Add gulp tag task #277
• v1.21.0 - Feature: addField and removeField actions #276
• v1.20.3 - Bugfix: multi option name attribute #274
• v1.20.2 - Bugfix: gulp font-edit #263
• v1.20.1 - Bugfix: XML other option #262
• v1.20.0 - Feature: typeUserEvents #260
• v1.19.4 - Bugfix: typeUserAttrs repeated value from formData #258
• v1.19.3 - Feature: tel subtype #256
• v1.19.2 - Hotfix: Correctly escape attributes #255
• v1.19.1 - Hotfix: typeUserAttrs duplicate attributes #254
• v1.19.0 - Feature: Copy button #252
• v1.18.0 - Feature: typeUserAttrs #247
• v1.17.2 - Bugfix: Classes not saving in XML mode and option pre-select issues#250
• v1.17.1 - Bugfix: clearFields action will error if no fields on stage#245
• v1.17.0 - Feature: showActionButtons option and showData action#244
• v1.16.0 - Feature: JSON support#237
• v1.15.6 - Bugfix: Remove fields from disableFields option.#231
• v1.15.5 - Feature: save action #228
• v1.15.4 - Bugfix: formRender textarea value undefined #224
• v1.15.3 - Bugfix: Cannot run formRender on multiple elements #223
• v1.15.2 - Feature/Bugfix: Actions, formRender textarea value bugfix #219
• v1.15.0 - Feature/Bugfix: Allow multiple files, bugfixes #211
• v1.14.6 - Hotfix: set Sortable scroll to false #206
• v1.14.5 - Chore: Add composer.json #207
• v1.14.4 - Bugfix: Form not saving when fields added by click #203
• v1.14.3 - Bugfix/Chore: fix formRender missing bootstrap styling, updated demo #202
• v1.14.2 - Feature: Value attribute, improved mobile styling #199
• v1.14.1 - Bugfix: Option defaults not rendering #198
• v1.14.0 - Feature: Fast edit options. Click to add field, sticky controls, auto edit toggle #190
• v1.11.0 - Feature: Number input #188
• v1.10.6 - Bugfix: Limit scope of bootstrap helpers #187
• v1.10.5 - Bugfix: Other option for radio and checkbox xml attribute #186
• v1.10.4 - Bugfix: Object.assign #181
• v1.10.3 - Bugfix: defaultFields multiple select not applied #176
• v1.10.2 - Bugfix: Remove role limit #175
• v1.10.1 - Bugfix: Removing an option causes error #169
• v1.10.0 - Feature: Add "Other" option to checkbox and radio group fields #168
• v1.9.33 - Bugfix: field close tab callback fired twice on mobile #167
• v1.9.32 - Bugfix: Change validators to run on blur instead of keyup #164
• v1.9.31 - Bugfix: Firefox loses reference to textarea #161
• v1.9.30 - Bugfix: Block elements missing classNames #159
• v1.9.28 - Bugfix: Remove polyfills causing problems in some apps #151
• v1.9.27 - Bugfix: Header subtypes #136
• v1.9.26 - Bugfix: saved subtypes not rendering #134
• v1.9.25 - Bugfix: Standardizes how field variables are processed from xml, defaultfields and new field sources #129
• v1.9.24 - Bugfix: Update internal field id to better handle multiple editors #126
• v1.9.23 - Bugfix: editing class attribute is wonky #122
• v1.9.22 - Feature: controlOrder option. #118
• v1.9.21 - Bugfix: Add pull left and right to _bs.scss
• v1.9.20 - Feature: sortableFields #114
• v1.9.19
  • Feature: controlPosition option #114
  • Feature: sortableFields option #114
• v1.9.18 - Bugfix: Button variables not processed from XML #113
• v1.9.17 - Bugfix: Umlauts break XML #112
• v1.9.16 - Bugfix: XML parse issue #110
• v1.9.15 - Bugfix: Option character encoding problem #109
• v1.9.14 -
  • Feature: Header and Paragraph tags #108
  • Bugfix: button classes, special character encoding, renamed functions for Selenium
  • Chore: added/updated comments #106
• v1.9.13 - Bugfix: Add defaultFields to formData #103
• v1.9.12 - Feature: disableFields option, formRender jQuery fallback, formSaved Event #101
• v1.9.11 - Bugfix: formRender hidden field issue #100
• v1.9.10 - Bugfix: formRender not rendering with containers #98
• v1.9.9 - Bugfix: formRender reinit, take regular js object #97
• v1.9.8 - Bugfix: Enter toggles XML field #95
• v1.9.7 - Bugfix: Radio group and checkbox group not rendered correctly in IE #93
• v1.9.6 - Bugfix: Arrows functions don't work with arguments.callee #92
• v1.9.5 - Bugfix: IE Element.remove() polyfill #91
• v1.9.4 - Bugfix: IE compatibility issues #90
• v1.9.3 - Bugfix: Update .jshintrc #89
• v1.9.2 - Bugfix: remove CustomEvent, no IE support #88
• v1.9.1 - Bugfix: invalid package.json #86
• v1.9.0 - Feature: Style and data updates, Class attribute #85
• v1.8.2 - Bugfix: Radio group preview #82
• v1.8.1 - Feature: File upload element #80
• v1.8.0 - Feature: Button element #79
• v1.7.10 - Bugfix: stringify bug causing null to be 'null'
• v1.7.9 -
  • Add options to formRender
    • render : defaults to true, will not render the html fields if set false.
    • notify : Allows you to define your own handler for notifications. defaults to console.log, console.warn and console.error.
  • Set form field data to template element to be used by other modules.
• v1.7.8 - Add fontello fonts with config and Makefile for editing icons.
• v1.7.7
  • Bugfix: Close button doesn't close #71
  • Bugfix: max-length attribute should be maxlength #70
  • Chore: Add gulp plumber to build process to catch errors instead of fail build.
• v1.7.6 - Bugfix: radio and checkbox group options without values cause formRender error.
• v1.7.5
  • Bugfix: Multiple selection bug for checkbox group and radio group fields. #66
  • Chore: Refactor build process, Add linter and code style settings, formRender santized attributes #67
• v1.7.4 - Feature: Multiple selection. See: #65
• v1.7.3 - Feature: Mobile support for touch based drag and drop. See: #64
• v1.7.2 - Bugfix/Feature: Added placeholder attribute for text and textarea fields. See: #63
• v1.7.1 - Bugfix/Feature: Added reinitialization to formBuilder. See: #62
• v1.7.0 - Feature: Added sub-types to the text input for password, color, and email html5 inputs.
• v1.6.8 - Bugfix: Description and required not rendered in formRender
• v1.6.7 - Bugfix: fields are not sortable
• v1.6.6 - Bugfix: change should be triggered when hidden textarea updated
• v1.6.5 - Feature: Make rendered fields targetable
• v1.6.4 - Bugfix: User options should be deep copied with $.extend
• v1.6.3 - Bugfix: Remove max-length attribute for hidden fields, Update preview and label for textarea
• v1.6.2 - Bugfix: Option text not rendered in IE #39
• v1.6.1 - Bugfix: required attribute should not be rendered when false.
• v1.6.0 - Feature: Hidden input field type added
• v1.5.4 - update gulp to autopush tags
• v1.5.3 - Bugfix: multiple formBuilder on one page.
• v1.5.2 - Bugfix: formRender radio-group invalid name property
• v1.5.1 - Bugfix: Add minimal Bootstrap styling for formRender
• v1.5 - Feature: checkbox inputs can now be made into toggle switch. details here
• v1.4.0 - Feature: formRender is a companion plugin to render saved formData into a usable form. details here

• v1.3.5 - Bugfix: XML parse and save

  • This fix brings a slight update in XML markup for multiple value fields, specifically the <option> node. The changes is to move away from the proprietary XML parser formBuilder was made for.

  This:

  <field name="checkbox-group-1" label="Checkbox Group" style="multiple" required="false" type="checkbox-group" >
      <option label="Option 1">option-1</option>
      <option label="Option 2">option-2</option>
    </field>

  Becomes:

  <field name="checkbox-group-1" label="Checkbox Group" style="multiple" required="false" type="checkbox-group" >
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
    </field>

• v1.3.4 - Bugfix: fix self closing xml for radio-group field
• v1.3.3 - Bugfix: preview not toggling correctly
• v1.3.2 - Bugfix: preview for Multiple fields not updating
• v1.3.1 - Bugfix: multiple value fields not saving XML
• v1.3.0 - Live previews, icon font
• v1.2.0 - Add default fields, and call-to-action text