Suggestions for a JavaScript form builder? [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm looking to integrate a form builder into a site I'm using, but I'm hoping to find a library that has some or most of the functionality I'm looking for.
I'm looking for a library that will give me a nice GUI for building the form, and a JSON (or XML, or similar) output that I can play with in the django backend. I'm planning to use django to output the finished form.
I tried running this through Google, but that only yields companies who make a business out of creating and hosting the forms online. But nothing in the form of a library.
Any suggestions?

I have the same requirement,
I will update this answer over time but bootstrap form builder ( PHP ) seems nice
https://github.com/minikomi/Bootstrap-Form-Builder
demo : http://minikomi.github.io/Bootstrap-Form-Builder/

If you dont mind spending a bit of cash you can look at:
Machforms : http://www.appnitro.com/
The form builder itself is entirely client side JS, so you would just need to post the output (which is JSON) to django instead of their php script.

A new JS library that's just popped up might be what you are looking for: http://dobtco.github.io/formbuilder/
Project page: https://github.com/dobtco/formbuilder

Here are some:
http://code.google.com/p/jquery-form-builder-plugin/
https://github.com/stas/jquery.formbuilder
you could also look at:
http://wordpress.org/extend/plugins/visual-form-builder/
http://wordpress.org/extend/plugins/formbuilder/
http://wordpress.org/extend/plugins/form/

Not sure about the Django piece since I haven't worked with that yet, but you may want to look into AlpacaJS: http://www.alpacajs.org/

I would recommend the awesome ExtJS framework to build such kind of application.
Here's an example.
ext/formbuilder
Add a form panel, then drop a textbox and so on...dead simple.
Ext JS 2.2 and 3.0 (not yet ready) are LGPL and GPL licensed, you have also commercial subscriptions available, I think it worth to have a look at it.

SpiffForm is similar to Appnitro, but free (AGPL), perhaps it fits your needs.
Patches welcome :-). (I am the author.)

There was a google Summer Of Code project last year that built a drag and drop form editor using the Dojo JavaScript toolkit. It's not 100% complete in terms of the functionality I'm guessing you would want.
It does dump a javascript object representing the form which you can convert to JSON to send over the wire.
Depending on your JavaScript skill set it should give you a head start on the problem.
The demo is here:
http://jbalogh.dojotoolkit.org/dojo-svn/release/dojo/soc/test.html
Blog posts by the person working on it:
http://www.dojotoolkit.org/blog/jbalogh

I don't think there is anything exactly like what you want out there; probably the closest would be a rich text editor such as FCKEditor or TinyMCE. These libraries are a bit like the UI you used to write your question in StackOverflow, except that they have toolbar buttons for the different FORM elements (or if they don't, you can easily add them yourselves).
A user faced with one of these editors (assuming you'd configured it to have buttons for FORM elements) would be able to lay out a form with basically no technical knowledge.
However, if a rich text editor doesn't work for you, then you're basically stuck with using something like the jQuery UI library (I'm thinking mainly of the Draggable sub-library) to build your own solution.

It depends on if you're ready to program it yourself. How dynamic do you want it? A simple form builder shouldn't be too hard to program using GWT, Dojo or your-favorite-js-library if you want to go that route. I'd recommend GWT because it's really fun, simple to use and takes care of the incompatibilities between browsers.
Here are some thoughts for possible inputs to each form/question:
Single line (for names etc)
RichTextArea (similar to FCKEditor)
Calendar date/time
Multiple choices (checkbox)
Single choices (list selector)
Each input needs a corresponding question, or a label. These need to be handled in your Model in Django, and represented as such in the forms view (and the editor).
I recommend you check out how to embed a GWT application into existing templates/html and how you can communicate between django and GWT using json
Hope this helps,

I you are using JSF you could use this formbuilder component:
http://code.google.com/p/jsf-form-builder/
A demo is available here:
http://www.reppe-itsolutions.at/jsf-form-builder/

Maybe this is not the right answer, but take a look anyway, it's awesome :
you put some very clear and simple to read code on a Java - server and you get a full AJAX /Javascript form.
Just take a look at the demo here.
I swear it's really, really awesome.
Olivier

Related

What language should I use to build a small Costing App? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Am trying to build a Small Cost Calculation and Quotation App. Since Its not so big App, I was planning to use plain Javascript rather than using frameworks like Angular JS because i am not much familiar with it. Am I doing it right.
This will precisely have following :
Front End (User Side)
User Input Interface where the User will Input the values in the required field. This will require to load different modules based on the kind of costing thats being calculated.
Quotation which will constantly update based on User Inputs and will have the options to Print, Save and Email the Quotation.
I would also need the ability to save the Quotation which can be edited anytime later on.
Admin Panel
To Set Preferences (with Preferences I mean the rates / Unit and other details. I do not know if 'preferences' is the proper term to use)
Backend
The Backend will comprise of Cost Calculation Based on the User Inputs and the Preferences Set. How do I do that.
For eg I select a component that requires 10kg of "A" Product where as the Rate / Kg should already be set using Admin Panel
Apart from that, The Costing Calculation workout should also be displayed on request if the admin is logged in.
Database
I prefer mysql as thats wot I am familiar with.
Would I really find help if I host the project on github. Why would someone help me code.
Is there anything like coding online without installing framework like WAMP.
Can anyone advise me if what I am doing is right or not .
Let's start by seeing the big picture. The basic architecture is like this:
Client -> Server -> Database
Frontend -> Backend -> Repository
Javascript -> ? -> MySql
And let's see what you know and are comfortable with - Javascript and MySql. To avoid learning a new language/framework, you should be quite OK with the above technologies.
You just have a missing piece ie. scritping at the server or backend. Php is a good free choice. However if you know other server side languages like Java, those will be fine too. If you can list the languages you know then more specific help can come. Have a look at Node.js since you are already familiar with javascript.
You don't need to host in github. There are many hosting servers available which makes it very easy to run php/mysql if you proceed with that.
You have asked lots of questions. i will try to answer them briefly
1) Yes you can use Angular JS for the costing app. You can also use plain Javascript / JQuery too.
2) I dont understand this preferences thing properly but if your first question and this is taken into account then i guess using php as a scripting language will solve many of these things (for example 'saving the quotations for future use etc)
3) The admin panel thing and display of the particular app after login can be totally done with any scripting languages for example PHP or anything else of your choice.
4) A database like mysql can be used, its good, pretty standard. I dont think you can 'host' a database driven website on Github. You can make a repo of the files there though.
5) Lastly you can code online without using WAMP, XAMPP etc. There are lots of cloud ide-s. For example Cloud9, Nitrous, Codeanywhere. Check those out.
If you find my answer as helpful check the tick beside my answer. Thanks.
Instead of considering the size you should consider its importance and should decide its impact in market..
Instead of using simple JavaScript you should probably go for AngularJs since its a framework..and frameworks since they have their own methods of implementation and their own designs they are likely to be used as they keep your code clean and handle most of the things themselves so you do not really waste your time writing unnecessary code..
I would recommend you to go for
Angular-for frontend
Spring-for backend
MySql-for database
Try to use frameworks as they will surely help you building low cost app

On Dom Change through JS functions, update URL

I tried searching for any questions on StackOverflow that fit this and I believe that I am probably not using the proper language (phrasing the question properly) to pull up those questions. So I apologize if this is a repeat.
I currently am building a site with a high level of DOM changing through JS. Not exactly the best thing to use but works based on my technical skills. I had thought about using AngularJS to build out my project but there is a steep learning curve that is preventing me from making the switch. I did notice that AngularJS has a built in function that generates fake urls based on the data being pulled. Even though the user is not leaving the viewer the url updates to highlight the new information. I was wondering if their was a JS library that could replicate that function until I can pick up AngularJS and rewrite my code in it.
Thank you
Found a few that do what I need. I can't also figure out how to make a comment the accepted answer.
http://millermedeiros.github.io/crossroads.js/
https://github.com/tildeio/router.js/

Alternatives to GWO (Google Website Optimizer)? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
We're using GWO (Google Website Optimizer) now. The multivariate and A/B testing is exactly what we need and works great from the perspective of showing the variations to the users. However, we have several issues that make me want to use a different tool:
Statistics are inaccurate compared to Google Analytics, so we now disregard them and have to manually check
Previews typically don't work
Cannot have dynamic content in variations (I know about variation_content, but I cannot get it to work and nobody in google's forums has been able to help.. I suspect google may have stopped supporting this)
Documentation is poor, there's a techie guide with well-known inaccuracies which haven't been fixed in well over a year.
The html/javascript code we modify our multivariate test sections with is ugly and makes our pages fail standards validation
Only 8 test sections per page, problem there is we want to allow our marketeers the ability to do everything they need from within GWO, but now they need to mark off which test sections they want/don't want in our custom tool
Different experiment key for every test, again it makes marketeers need to work with our code sometimes
Is there a good tool like GWO that works with Google Analytics (which I love)?
UPDATE: We went with Optimizely and have generally been happy. However, it can be difficult to work with because it does a little too much for you. You edit your webpage directly from their UI, but of course that isn't always easy or even possible. Particularly when Javascript is involved. Our UI often gets screwed up in the process. I liked GWO's approach to this in that the developer sections off the code and the marketer can then fill in those sections with variables the developer allows for. To me that's ideal, except that GWO, of course, doesn't actually work.
There's a very similar competitor to Optimizely called Visual Website Optimizer. Also looks very nice, but has the same issue I describe above.
Is there a GWO that works?
You should take a look at Optimizely.
Doesn't require creating invalid code.
Easy to create variations on the fly, though only A/B, not MVT.
Simple WYSIWYG test design, on the fly.
Real time data.
Retroactive goals
With regex/head matching for experiments, you can set the experiment to work on dynamic pages.
You can set a Google Analytics custom variable for the experiment that will pass the variation the end user sees as a custom variable. (It even allows you to set what slot you want it to use.)
The test variations are basically just jQuery manipulations of the DOM, so if you know a little jQuery, it's very easy to extend its capabilties even further than the very generous WYSIWYG GUI.
Installation is easy: You only need to include a single script tag, one time, on any experiment or goal page.
I have found Adobe Test&Target to have all the features you need. It is very easy to create experiments, add variations, and conversion goals. You can easily inject JQuery snippets to create new variations, click Save, and the test is running in production.
I have no idea how much it costs, but I'm guessing it is not cheap.
Now Google Website Optimizer killed multivariate testing in new version (Google Analytics Content Experiments) we launched Convert Experiments on Convert.com for people that look for a GWO alternative with MVT
Yes I am Founder of Convert Insights, the company behind this tool...
Dennis
Re your update: I have tried both GWO and Optimizely, and I'd go with Optimizely every time.
You say you wish it worked a little more like GWO - if you want, instead of manipulating the elements of the design using their GUI, you can just redirect each variant to a different URL:
https://help.optimizely.com/hc/en-us/articles/200040675
There are a few other tools which do A/B and MVT. Aren't free, but check them out for yourself: Omniture, Webtrends Optimize, SiteSpect.
Hope this helps!
You can also try VWO. It does MVT as well as A/B testing and is also a good tool. Optimizely is easier to use though so you might want to evaluate both for your scenario.

SharePoint Client JavaScript Documentation

I'm attempting to improve the usability of a client's SharePoint deployment via JQuery; and am hitting a brick wall when trying to find any sort of documentation of what's happening in core.js (aside from painfully digging through and trying to parse any sort of meaning out of it --all 250kb of it!!!!--) Anyone have any pointers, or documentation?
EDIT:
Sorry, to clarify my question, i'm familiar with using JQuery with SharePoint. My question involves hooking JQuery into SharePoint's own client API. My question is inspired by this post http://www.codefornuts.com/2009/09/forcing-sharepoint-into-asynchronous.html# ; where the author is overriding methods such as "SubmitFormPost" and "STSNavigate" in order to make the UI interaction more "AJAXy".
There's no documentation for core.js and it's really a black box. Any "messing" with it would make your installation unsupported. Because of its complexity and how important it is to SharePoint working correctly, I would be very careful before adding this sort of functionality. This is not a comment on your development ability, but IMHO there would need to be a serious business case along the lines of "we don't care if things break occasionally so things look cooler".
If you really want to continue this I think your best bet is to contact Einar! His is the only post I've ever seen that describes how to do AJAXify core.js.
I'm not entirely sure what you are trying to do, but you may want to take a look at Jan Tielen's work with jQuery and SharePoint. He has some interesting posts about calling the SharePoint web services with jQuery/Ajax to build much richer UIs. These are hosted within a SharePoint web part page using a Content Editor Web Part. I've used these techniques in a couple of applications with great results.
Check out this post for an example.

Is there a good in-browser code editor? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
We've all seen in-browser rich text editors, which allow you to edit colored/styled text in a WYSIWYG manner. But what about code editors, which automatically highlight code based on language rules as you type? Think Eclipse in a textarea (but without the refactoring support).
Do such things exist? I imagine scaling would be a problem - larger files would be difficult to edit efficiently.
CodeMirror comes with support for 60+ languages, and addons that implement more advanced editing functionality (autocompletion, code folding, configurable key bindings, search & replace, linter integration etc.). A rich programming API and a CSS theming system are available for customizing CodeMirror, and extending it with new functionality.
It has been developed since early 2007, has a Wikipedia page, and is being used in a wide number of popular open source projects (Joomla, Firebug etc.).
Ace. They don't use an iFrame.
The editArea javascript library does a pretty good job. It's used by the OpenCMS content management system as it's in-place JSP and JavaScript editor. The colorization gets a bit confused when the file is > 2000 lines or so.
The feature list from their page is:
Easy to integrate, only one script include and one function call
Tab support (allow to write well formated source code)
Search and replace (with regexp)
Customizable real-time syntax highlighting (currently: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, SQL, Pascal, Basic, Brainf*ck)
Auto-indenting new lines
Line numbering
Multilanguage support (currently: Croatian, Danish, English, French, German, Italian, Japanese, Polish, Portuguese)
Full screen mode
Can work in the same environment than "protype" and "mootools"'s like libraries.
Mozilla's Bespin looked very interesting, but the project was discontinued.
you can check out dockPHP StackHive for web development (based on codemirror). Right now it supports HTML/CSS development but I am working on live javascript-ing as well..
Disclaimer : I am the founder at dockPHP :)
Cloud9 looks interesting if you're a JavaScript developer.
Amy Editor is another browser-based editor I've come across today - it looks like it is trying to emulate TextMate in the browser - including Bundles and Snippets - although the project looks like it's likely dead... Homepage/Demo and source on GitHub
This is a sideways suggestion -- but I use the Firefox plugin "It's All Text!" to send my text-areas to for editing -- all good markups,searching, etc.
Of course, this is user-dependent, and can't be easily rolled-out to visitors, if that is your intent.
However, I tend to get irritated by the limitations of in-browser editors, anyway. (The way SO captures my C-k during edits STILL catches me off-guard... [which means I don't edit everything in Emacs...])
Javascript VI, has some bugs but is an interesting idea. VI FTW!
I use codiad. I used it with PHP, js and C. Features:
Support for 40+ languages
Plugin Library
Error checking & notifications
Mutliple user support
Editor screen splitting
LocalStorage redundancy
Advanced searching tools
Smart auto-complete
Real-Time Collaborative editing
Over 20 Syntax color themes
Completely Open-Source
Easily customized source
Runs on your own server
Quick-Download backups
Maximum editor screen space
i18n Language Support
http://codiad.com
Eclipse Orion provides a full-blown Code Edit and a minified Orion Editor. You can see its demo here.
codesandbox.com is an up coming choice for several frameworks.

Categories