minikomi / bootstrap-form-builder Goto Github PK

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:inrequire'
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.

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.

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:

1. Add a checkbox
2. Open the component's properties popup by clicking on it
3. Without closing the popup, drag the component. The HTML <div> for the popup will remain in the page.
4. Open the component's properties popup again. Changes will no longer be applied, even if we remove it and re-added.

One possible solution would be to do a $(".popover").remove(); instead of .hide().

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!

I don't understand how to make my own edits by what is said in the Notes and adding new form elements sections.

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?

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!

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

The service is great! But I often work with two columns form. It would be great if you implemented this function.

I'm having problem when I use a new tab on the page where I have Form Builder code added. Basically, I'm trying to add a parent tab and show the form builder in one of the tab options of the parent tab. But if you see the screenshot, you will see both the tabs are showing tabs from form builder.

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)

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!

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.

Would be nice to have fieldsets so that you could insert an element inside another sub-fieldset.

Bulider output wrapping form Name with control-group class.

Is it not nessesary ?

Bootstrap document says.
•Wrap labels and controls in .control-group

It would be really nice if there were a way to turn on / off HTML5 validation attributes.

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?

Hi.
Me Need Help For Chang lange txt Persian.
sample :
Input
Radios / Checkboxes

in تست
برای
Thanks A lot.

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

Other components has it's name,
but radios ad check boxes has not name attribute.

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.

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.

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.

If a form has these two elements they're conflicting, one resets the other.

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

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.

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.

After major version up, I cannot drop components to form pallet.
Befor version I cound.

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>

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.

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

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 :)

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, 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.

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.

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.

Classes changed.
i.e.:
.input-large -> .input-lg

I see your script is working very good. But how about Captcha for form? it is important thing too.

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:

1. 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.

2. 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.

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?

Hello, can you add the ability to have a 2 or 3 column form?

Please, can you add the "for" attribute (tied to relative input field) for "control-label"s?
Many thanks :-)

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.

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.

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?

Will you be updating this great piece of work to work with Bootstrap 3?

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

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 ??

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,