kevinchappell / formbuilder Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin for drag and drop form creation
Home Page: https://formbuilder.online
License: MIT License
A jQuery plugin for drag and drop form creation
Home Page: https://formbuilder.online
License: MIT License
In formBuilder and formRender the max-length
attribute should be maxlength
.
1- Add a placeholder text option for text field input.
2 - Is this compatible with Bootstrap?
Great plugin by the way
Hello,
I am trying to add additional textareas to the page I am building (using Telerik RadEditors - but a standard HTML textarea exhibits the same behavior). When I add the textarea, the whole page is thrown off (e.g. form builder controls are repeated, etc...).
Is there anyway around this?
Thanks.
Daniel
Even though you have the bower file did you actually register it yet?
A common question is how to disable specific fields in formBuilder like Autocomplete. The simplest way to accomplish this is to hide it from the user with css like this:
.frmb-control .icon-autocomplete {
display: none;
}
There are use cases however where the field type should not exist in DOM at all. For this I propose changing the current disabledFields
option to accept an array of field types that should not be rendered. Initializing formBuilder with this option would look like this:
var fbTemplate = document.getElementById('fb-template'),
options = {
disabledFields: ['autocomplete']
};
$(fbTemplate).formBuilder(options);
The only catch is that disabledFields
is already an option used to prepend and append uneditable fields/html to the beginning and end of the form. For this reason the second part of this proposal is to reassign that functionality to new options called prepend
and append
respectively.
Please use the comments here to vote up or down and make suggestions related to this proposal.
Voting ends Feb, 26 2016
Bower keeps installing 1.6.4.
I'm assuming it's because that's the latest tag it can find... please push the 1.6.5 tag.
To reproduce:
Currently you have support to add a Class to the input control itself, would you consider allowing Classes to be added to a control's associated label and parent container div? This would pretty much give full control, via bootstrap, to supporting columns and label location (relative to the control).
For example:
<div class="form-group COL-MD-6 field-text-input-1458998906140">
<label class="COL-MD-2 COL-MD-PUSH-8" for="text-input-1458998906140">Text Field </label>
<input class="COL-MD-8 COL-MD-PULL-2 form-control" name="text-input-1458998906140" type="text" subtype="text" id="text-input-1458998906140">
</div>
My idea would be to put add "Parent Class" and "Label Class" fields alongside the current "Class" field. If that makes sense.
Hi Kevin,
Hope you are doing well. Thank you for your continued work on this especially correcting some issues with the last release.
However, there is an error in your generated XML when creating RadioGroups (CheckboxGroups appear to be okay).
The XML generated for a RadioGroup is as follows:
<field name="radio-group-1445351957780" label="Did you enjoy the presentation and will you attend another one?" description="" required="true" type="radio-group"/> <option label="I like it and would attend.">1</option> <option label="I like it but would not attend.">2</option> <option label="I am indifferent to it.">3</option> <option label="I don't really care for it.">4</option> </field>
Notice the starting field element is self-closing. You need to remove the / at the end of the tag otherwise it is breaking as non-valid XML.
Just a heads up.
Thanks,
-Daniel
Hi,
If a hidden input is used on the form, when it is rendered it will cause all other items underneath it to not render.
Cheers
It doesn't appear that the close button works (checkbox groups, selects). I'm not sure it's needed since it's not consistent between the different controls -- it doesn't appear when editing a textbox, for example.
Or maybe I'm misinterpreting the function?
Hi,
Thanks again for implementing the good plugin.
I was looking for documentation for following. Can you please let me know if following possible,
But once we start saving data into database, using the field name, and if user changing field name, it's making it tough to match the field name with data that was already saved with earlier form field name. Possible when re displaying fields (via defaultFields input element), can we can have option to not allow user to change field name.
Thanks
I am integrating this plug in rails application.
In HTML page i used the code given at http://kevinchappell.github.io/formBuilder/ . But it always give an error for fromBuilder.
I think the sequence of requiring the javascript files is somehow wrong.
The code in application.js is:
//= require jquery
//= require form-builder
//= require jqueryui-1.10.3.min
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require jquery.dataTables.min
//= require dataTables.bootstrap
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require_tree .
And
here is my HAML file code:
%link{:href => "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}
.demo-wrap
/ MAIN CONTENT
#main_content_wrap.outer
%section#main_content.inner
.build-form
%h2
%strong Build The Form
%form{:action => ""}
%textarea#form-builder-template{:cols => "30", :name => "form-builder-template", :rows => "10"}
%br{:style => "clear:both"}
.render-form
%h2
%strong Render The Form
%form#rendered-form
%p.cta Add some fields to the formBuilder above and render them here.
.render-description
%h3 Try it out
%button#render-form-button.btn.btn-primary Render form
%br{:style => "clear:both"}
-#%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"}
-#%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"}
:javascript
jQuery(document).ready(function($) {
'use strict';
var template = document.getElementById('form-builder-template'),
formContainer = document.getElementById('rendered-form'),
renderBtn = document.getElementById('render-form-button');
console.log(template)
$(template).formBuilder();
$(renderBtn).click(function() {
$(template).formRender({
container: $(formContainer)
});
});
});
:javascript
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-4784386-21', 'auto');
ga('send', 'pageview');
How do i fix this ?
Hi,
Thank you for the code to build forms online...
i am unable to write the code for saving the template..can u help me to do...
Hello,
First - thanks for your work on this utility.
Next set of questions for this:
Thank you.
Daniel
Hey.. I feel bad that i've opened so many issues on day-1 with the formBuilder.
But I think that proves it's an amazing plugin... and i'm already a dependent
So, when i finish sorting the elements on the form, the xml isn't re-rendered unless something else is done to trigger the render( like adding a new element, or editing an attribute of an existing one)..
Any way to trigger a re-render of the XML for the new sorted order.. after a sort?
In IE the logic in form-render.js for the radio group and select controls are generating labels with undefined as the label contents. This is happening due to an issue in IE when you try to access innerHTML on the dynamically generated elements. http://stackoverflow.com/questions/8999998/javascript-innerhtml-is-not-working-for-ie
Fix on my end was to change:
optionsMarkup += '<option ' + optionAttrsString + '>' + el.innerHTML + '</option>';
to
optionsMarkup += '<option ' + optionAttrsString + '>' + optionAttrs.value + '</option>';
And:
optionsMarkup += '<input ' + optionAttrsString + ' /> <label for="' + optionAttrs.id + '">' + el.innerHTML + '</label><br>';
to:
optionsMarkup += '<input ' + optionAttrsString + ' /> <label for="' + optionAttrs.id + '">' + fieldAttrs.value + '</label><br>';
Thanks for the library its been quite useful.
Brian
Hi,
I was wondering if it's possible to have something like a language setting. So that I only have to create a form once (and not for every language) and I am able to name e.g. the label attributs in the different languages.
Thanks in advance!
The formbuilder works fine locally. However when I tried to push it to prod, I encountered a Syntax issue in the form-builder.js
How do I solve this issue?
238 if (fieldClass.match(/(select|checkbox-group|radio-group)/)) {
239 previewData.values = [];
240
241 $('.sortable-options li', field).each(function() {
242 let option = {};
==============^
SyntaxError: missing ; before statement
243 option.selected = $('.select-option', $(this)).is(':checked');
244 option.value = $('.option-value', $(this)).val();
245 option.label = $('.option-label', $(this)).val();
246
247 previewData.values.push(option);
248 });
249 }
Form render fails on this XML
<form-template>
<fields>
<field label="Checkbox Group" name="checkbox-group-1458765767942" type="checkbox-group">
<option value="option-1">< Option 1</option>
<option value="option-2">< Option 2</option>
</field>
</fields>
</form-template>
So, the problem is character "<" in the option name.
IS there a way to maybe add headers, like h1, h2 and h3 to the menu and drag them onto the form?
Sorry if this was answered somewhere, I couldn't find if it was. Is there a way to append additional classes to the fields? I'd like to be able to wrap the form elements with some additional CSS classes that would be in addition to the classes that are autogenerated by formBuilder.
I try to set some defaultFields as below. I click the reander form button before I drop any form element into textarea ,it can't render any forms ,but after put an element then it works:
<script>
jQuery(document).ready(function ($) {
'use strict';
var template = document.getElementById('fb-template'),
formContainer = document.getElementById('rendered-form'),
renderBtn = document.getElementById('render-form-button');
var options = {
fieldRemoveWarn: true,
defaultFields: [{
label: 'Form Name',
name: 'fb_forname',
required: true,
description: 'Enter a Form Name !',
maxlength: 200,
className: "form-control",
type: 'text'
}, {
description: "",
className: "btn btn-primary",
label: "Submit",
name: "fb_formsubmit",
required: "false",
type: "button"
}]
};
$(template).formBuilder(options);
$(renderBtn).click(function (e) {
e.preventDefault();
$(template).formRender({
container: formContainer
});
});
});
</script>
I was able to change the language of form during initialization e.g as explain in this example provided by Kevin chappel . But what if i want to change the language in the middle of form creation or user want to save a form with English and a french version.
Do i have to re initialize the form with new language messages on language change event??
When opening Button modification panel in the stage, button type dropdown is set as "button" even when XML states subtype="submit"
.
Might be related: .fld-className
is missing set CSS classes, defaults to btn btn-default
when XML states class="btn btn-success"
.
If I initialize formBuilder based on following xml, it doesn't work properly
<form-template>
<fields>
<field label="Checkbox Group" name="checkbox-group-1458766047820" type="checkbox-group">
<option value="option-1">some text</option>
<option value="option-2">another text</option>
<option value="fsadfdas">some another text</option>
</field>
</fields>
</form-template>
It will produce the following result.
http://i.imgur.com/UrJcfFy.png
No matter what
The problem persist on radio buttons too.
The problem appeared in the latest versions.
In the Version: 1.7.5, it's working well.
Is there a defaultFields equivalent in formRender.. or something that can help me sink in the field data
Hi Kevin,
I was wondering if you could tell me a way to hide the following items (possibly using CSS display:none):
"Save Template" button
"View XML" link
For each form item:
Name field
"Access" field
I just don't want them to appear on screen.
Thank you.
Daniel
Hi Kevin,
I'm trying to make changes to some existing form elements. For example: instead of checkbox, I want to make it like a True & False toggle.
I am kinda lost when going thu your code. Wonder if you can shed some lights on how to either add new element or modify existing one.
Thanks,
Trong
I am trying to get json formate of formBuilder and want to store into mysql database. Is there any way to do? There is no enough information on your docs. Thanks a lot
The help text entered in formBuilder doesn't show up in formRender... that a given?
To reload fields in the formBuilder i have to enter their structure in the defaultFields option...
currently the only type whose template i found was 'text'..
I specifically want to know how to add the options for select list and checkbox group types...
Hi, I have some problems with groups (checkbox and radiobutton). All changes aren't showing on UI after editing and aren't saving to XML.
This problem even present on your demo.
Maybe I'm doing smth wrong?
Hello kevin,
I need to add form builder in my website in a week or two.
can you please inform me about the release date for Form Builder 2.0 as i am planning to use a from builder with html 5 elements.
By the way very nice plugin!
Hey Guys,
I am trying to update default fields through ajax. but not able to do that. When i tried to do that with new set of default fields, it did nothing...
Can you guys please suggest me, How to do it?
Thanks.
Hi,
I have had to rename some function names in the builder and render. I run automated tests using selenium web driver. When running it in htmlunit it throws the following error on a few lines. Renaming the functions to be different to the variable names seems to do the trick. I am currently using version 1.9.10 but will need to update soon. Could you please rename the functions to fix this so I do not have to do so for each update.
ReferenceError: Assignment to undefined "formBuilderHelpers" in strict mode (http://localhost:8000/javascript/formbuilder/form-builder.js#10)
Changes made:
form-builder.js
ln 10
var formBuilderHelpers = function formBuilderHelpersFn(opts, formBuilder) {
ln 721
var formBuilderEvents = function formBuilderEventsFn(opts, _helpers) {
from-render.js
ln 56
var FormRender = function FormRenderFn(options, element) {
Was trying to install the most recent version of this from GitHub through Bower. The only options I was getting was 1.2 and 1.3. Resorted to Downloading a zip version but may be useful to others.
Following XML breaks because of ä
, I imagine all other umlauts act same way.
<form-template>
<fields>
<field class="btn" label="Lähetä" name="button-1458140997967" type="submit" subtype="submit"/>
</fields>
</form-template>
Edit: jQuery.parseXML returns the error.
As pointed out by @BenjaminPiscart the required attribute is not rendered correctly.
Whats the right way to convert generated xml back to form again. Whats the rendering method
Hi Kevin,
Just a small thought & favor. Both form-builder & form-render are currently minified. Can you please provide an unminified version? I have tried to use some online tools but the form builder kept crashing somehow.
Thanks,
I'm trying implement an auto-update feature...
instead of having to run a setinterval()
to track the change, would it be possible to just trigger a change event when the text area is updated and i listen to that change?
for a quick fix.. just show me the area of the code to implement the change and I make a quick fork of the project.
Het Kevin,
I was trying to add some custom fields in one of my project, for doing so i have to edit form-builder.js
What i was expecting if can extend custom fields in a separate file,so that i can update library in the next release.
Is there any way to do so..?
Hey Kevin,
I wasn't sure the best way to ask the question, so posting it as an issue. Does formBuilder support multiple columns. Or, maybe I need a different to think about it, but the goal woud be to have the possibililty of fields being side-by-side on the form instead only one field per row. Sorry if you already answered a similar question.
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.