minikomi / bootstrap-form-builder Goto Github PK
View Code? Open in Web Editor NEWWeb app for drag drop building bootstrap forms.
License: MIT License
Web app for drag drop building bootstrap forms.
License: MIT License
Hi, Thanks for this great app.
There is no captcha for forms to create free of spams while getting mails.
Is there any possibilities of captcha field for creating form fields in Bootstrap form builder.
Thank you very much for this nice piece of code you have there. I am trying to use your bootstrap form builder to create dynamic forms saved to db. I'm runnning into a small issue when i'm trying to reload the saved code into the form builder to edit my saved forms. The code is loading correctly into the right div and the fieldset is created but it seems that another fieldset is being created when you try to add any control to the existing form. Can you advise on this issue.
I believe it has something to do with how the form is loading. I'm doing most of the work on the client side. Simply loading my data into hidden fields and then setting the html value of the target div using javascript.
Another issue i'm facing is the offset or the placement of new controls into the form. When i'm placing a control i have to move it up so it can be displayed down the form!!! :-). i'm using the form builder in a dotnetnuke site so i already have a tag for the page which is what is causing the issue i believe. But i can put my finger on where i can set the top value correctly so the controls can be placed correctly into the form.
Thanks for any help you may offer
Hi,
I'm using "Bootstrap Form Builder" for an application & saving data (Source code ) in DB. Now I want to edit the "saved form" through "Form builder" interface. But not sure how to load "DB source" so that I can edit/update the form.
Could you please help me out?
Thanks,
According to: twbs/bootstrap#3413
input-xlarge, input-xxlarge, etc.
are only there for legacy reasons.
I tripped on this issue because with the form builder, select and input have different sizes.
Is there a reason for still using the legacy css tags?
Hey There,
First of all, thank you very much for a nice form builder. I love it. One more thanks for being so responsive on any issue doubt we ask you guys.
This time, I need help/direction/pointers as to following:
I have generated the form. Now, I keep track of the rendered form html as well as the form html being updated/added while adding the new form. i.e. with "components" and without "components" attributes.
now, I saved this form in my database and I need to reload the previously created page. See the screenshot i see. I get one form and its fieldset form the saved definition form the database. And another fieldset tag gets added to this existing form. So what happens is that when i try adding new controls on this form, it adds those to the new form's new fieldset tag and not to my existing, previously created, loaded form's fieldtag.
Hope this question explanation is clear to understand. Please see the screenshot below of what I see while loading this in Edit mode.
Thanks once again.
Thanks for the wonderful form Builder for Bootstrap, i would like to use it in my project as a Form Builder, i'm new to Backbone.js, what is the process for adding new form elemen (like for example a new GUI Element) into the Form Builder's existing list of GUI elements. Please let me know how to get started with that ? Thank you.
After major version up, I cannot drop components to form pallet.
Befor version I cound.
Hi,
in index.html describes belows,
<script data-main="assets/js/main-built.js" src="assets/js/lib/require.js" ></script>
In source path , main-build.js have not included.
to describe main.js is not currect ??
If a component is dragged while a popup window is still open, the HTML div
for the popup will not be removed, and will instead be hidden ($(".popover").hide();
in fb.js line 3).
Besides populating the page with new div
popup elements every time this happens, changes applied to the component by opening the properties popup afterwards will not take into effect, even if we remove and re-add the component.
Easiest way to reproduce:
<div>
for the popup will remain in the page.One possible solution would be to do a $(".popover").remove();
instead of .hide()
.
Hi,
i am not able to switch to development mode. One would simply assume that clone repository and switch script tag to this
<script data-main="assets/js/main.js" src="assets/js/lib/require.js" ></script>
would be enough but it doesn't work.
Is it wrong or is there something missing in the readme?
There is no option to add "name" & "id" attributes to the form fields? We can't use the form further without these. Could you please fix this? Think it would be minor amend for you.
Thanks
It's strange that I can't copy rendered source from textarea: it disappears from clipboard. I can reproduce this in Iceweasel 15.0.1 (Debian) and Firefox 19.0.2 (Ubuntu)
Thanks, the Form Builder saves me lot of time!!! :-)
Please, can you add the option to choose which class to add instead of the default "input-xlarge", even for textareas?
Many many thanks!
The whole point of this, at leased I thought is not having to retype everything, and therefore you could insert based on the Label Text also the for, name & id of each field. replacing spaces with underscore and making it all lower case.
And the form name you could take from the legend name.
<form name="{{legend.name}}" class="form-horizontal">
<fieldset>
<legend>
{{legend.name}}
</legend>
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input name="title" type="text" class="input-xlarge" id="title">
<p class="help-block"></p>
</div>
<label class="control-label" for="address">Address</label>
<div class="controls">
<textarea name="address" class="input-xlarge" id="address" rows="3"></textarea>
</div>
<label class="control-label" for="description">Description</label>
<div class="controls">
<textarea name="description" class="input-xlarge" id="description" rows="5"></textarea>
</div>
</div>
</fieldset>
</form>
Other components has it's name,
but radios ad check boxes has not name attribute.
Hi.
Me Need Help For Chang lange txt Persian.
sample :
Input
Radios / Checkboxes
in تست
برای
Thanks A lot.
Hey there! I LOVE this form builder. It's very flexible and a really fun application to build upon.
I was hoping you could help me with something. I would really like to re-output the JSON of the field object as attributes are changed. For instance:
The input.json file has the following object:
{
"title": "Text Input",
"fields": {
"id": {
"label": "ID / Name",
"type": "input",
"value": "textinput"
},
"label": {
"label": "Label Text",
"type": "input",
"value": "Text Input"
}....
But in the form builder, when I drop an Input into the left side and I changed the "Label" attribute to "First Name", I would really like to re-output a new JSON snippet that would look like this:
{
"title": "Text Input",
"fields": {
"id": {
"label": "ID / Name",
"type": "input",
"value": "textinput"
},
"label": {
"label": "Label Text",
"type": "input",
"value": "First Name" <------ the change would be reflected here
}....
Is there a quick and dirty way to do this? Thanks for any assistance you are able to provide.
This one is tough, not sure how to implement.
But it would be nice to hook up standard / unobtrusive / maintainable validators for each form element.
Not sure if the best solution would be to depend on a polyfill to support all browsers.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Just throwing ideas out there, but it would be useful to make this a more full-featured form designer.
Hello, I love this, but need to integrate to other platform. I believe I can do a postback via the AJAX to make this work.
Can explain the layout and templating a little more for a noob, I have been reading underscore, the code, and backbone, and getting lost.
Will you be updating this great piece of work to work with Bootstrap 3?
Classes changed.
i.e.:
.input-large -> .input-lg
If people want to include things like CAPTCHAs in their form it can be difficult to work out the formatting, so I think you should come up with some kind of generic placeholder, It would have label text and help text and in the code it would say something like 'Insert your content here'. This would also cover a range of other uses, not just captchas
Hi, I found other problem.
This case is IE only.
After putting component from pallet to the canvas,
Reorderring components in canvas, by drag and drop operation.
All the component change to selectable state.
The service is great! But I often work with two columns form. It would be great if you implemented this function.
Can't quite pinpoint the source of the problem but when using new jquery the form builder stops working - more specifically cannot edit a single field - the popover displays the actual HTML instead of browser parsed HTML.
hello can i have regions in the form?
For example a 1º region available to user requesting a leave
2º region for the boss to write comments.
3º region for the human resources to leave more comments
It'd be nice if there was an option for a password field. Normally I just create two text place holders and then change the generated code but it would be a small time-saver if there was a ready made password field.
I have written another handler refresh:function(), in the app.js, just like initialize: function()...But I see that app object, that is initialized in the Main.js can't be accessible on the index.html file. Is there anyway i can use app object in the index.html so that i can call app.refresh() from there?
There is no Required option on Radio input types, but I would need it to ask for Gender in my form. Am I missing something?
Bulider output wrapping form Name with control-group class.
Is it not nessesary ?
Bootstrap document says.
•Wrap labels and controls in .control-group
Hello, can you add the ability to have a 2 or 3 column form?
Hey, I'd really looking for such plugin. Is there any plan to add features that allow us to customize the form elements's properties too? So we can add, for example, the name attribute for the element.
Nice work, thanks.
Please, can you add the "for" attribute (tied to relative input field) for "control-label"s?
Many thanks :-)
IE only,
After drop Radios or checkboxes, and singble button and double button, all the text will be a selectable state.
Other Components are going well.
Image file added please show detail.
I don't understand how to make my own edits by what is said in the Notes and adding new form elements sections.
This project is well done !
Currently, the form builder only supports horizontal forms via form-horizontal
. It would be nice to also support Bootstrap's default form-vertical
.
Cheers!
Drag & drop feature for the form builder is not workin on touch devices unfortunately :( especially iPad. Will you plan to add this feature? Thanks for this great piece of art by the way :)
I see your script is working very good. But how about Captcha for form? it is important thing too.
Changing the values for the text/values for radio buttons fails to apply using google chrome browser.
Sometimes, the first attempt will succeed, and then successive attempts will fail.
Hello,
I've a problem when I try to do :
ruby parse.rb
--> parse.rb:3:in `require': no such file to load -- json (LoadError)
from parse.rb:3
Line 3 is : require "json"
So i've tried to install :
sudo gem install json
--> Building native extensions. This could take a while...
ERROR: Error installing json:
ERROR: Failed to build gem native extension.
/usr/bin/ruby1.9.1 extconf.rb
/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in require': cannot load such file -- mkmf (LoadError) from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in
require'
from extconf.rb:1:in `
Gem files will remain installed in /var/lib/gems/1.9.1/gems/json-1.8.0 for inspection.
Trying to re-install ruby by :
sudo apt-get install ruby1.9.1-dev
--> no problem
retry install json : It's work ! but when I retry :
ruby parse.rb
--> always the same error.
I don't find any solutions, if you can help me.
Best regards.
Dragging / Dropping of an element seems to be happening behind the modal window. Is there a workaround to make this work on a modal window? thanks!
Would be nice to have fieldsets so that you could insert an element inside another sub-fieldset.
I copied the rendered code into seperate html but i didn't get the required bootstrap form,instead i got normal form.What is the problem..Do i need to include any css or js files...
please help
Hello,
First of all thanks for creating such a nice form builder. I want to use this in my project. I am having requirement of having elements in 3 to 4 columns in a form. So can you please suggest me if is is possible in your project or if any modifications are required then where is it required?
Thanks.
I copied the rendered code into seperate html but i didn't get the required bootstrap form,instead i got normal form.What is the problem..Do i need to include any css or js files...
please help
If a form has these two elements they're conflicting, one resets the other.
I was just gone write something like it as cli script, when I thought hmm maybe some has done that.
This is even better, thank you.
Nice would be if we could download and upload let's say a json file rather then having to rebuild the whole thing if we need to modify something.
It would be really nice if there were a way to turn on / off HTML5 validation attributes.
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.