Got a few queries from people wanting to grab the code for the form builder, so thought I’d share it around. Its crudely stripped out of the admin system I’m working on, but its a good stepping stone to make it better.
This needs an update, will work on it over the weekend. Fixed some issues with dragging and the wysiwyg editor, also cleaned up the styles.
UPDATED 9 June 2009.
- Fixed Stylesheet
- Fixed TinyMCE issues.
- Cleaned up DOM Objects.
DEMO
DOWNLOAD
As all the things I share, this comes with limited support, as is, and might require you to fix things yourself with your own mental abilities. This is a stripped Controller from a custom admin system I’m working on. To put it back into a controller, just edit formbuilder.php and wrap in a CodeIgniter controller extend.
Tags: builder, codeigniter, form, html, jquery, Opensource, php
G’day mate,
Great work! any updates on the status – can I expect a stable release of your awsome script?
oh, yeahs
i’ll get it done over the week
just need to take the latest build and strip it out of the admin system again.
done.
Wow! Thanks for sharing this!
That is a beautiful form builder. But I do have a question about it, and this is coming from someone who has never used CodeIgniter before (perhaps I should!). Once a form is created using the form builder, how is it’s definition saved so that it can be retrieved and viewed and manipulated later?
I’ve seen lots of source code for building forms, but the end result is (usually unclean) XHTML output that must be saved into a file on it’s own. What I’m trying to find is a solution where the form definition, as built by the user, can be saved into a database somehow – serialized or something – so that it can be dynamically pulled later. I would like a solution that doesn’t require any writing of files to the filesystem – such as saving the info as an XML file, or even just another PHP/XHTML file.
Do you have any thoughts on this?
Thanks for sharing your code!
you can mess around with serialize($_POST), or use jquery to serialize the form ID and ajax save it, and then use the build function in the preview to rebuild the form on unserialize()
One of the nicest UI’s I’ve seen so far. How easy is it to plug my own UI controls into the designer?
It’s very usufull, only one thing I wanna try to add to your form builder, and it’s the option to let me change the name (name param of the html element) of the element, maybe the id too.
great work!!
modifications added:
file: admin.formbuilder.js
line: 40
/* INI modification introduced by me ~ norman784 */
var id = prompt(“Please fill the element name/id. Leave blank to set it automatically”,”");
/* END modification introduced by me ~ norman784 */
file: admin.formbuilder.js
line: 46
/* INI modification introduced by me ~ norman784 */
$.get(Admin.formbuilder.BASEURL+’?action=element&type=’+type+’&id=’+id,function(result){
/* END modification introduced by me ~ norman784 */
file: formbuilder.php
line: 126
/* INI modification introduced by me ~ norman784 */
$id = !empty($_GET['id']) ? $_GET['id'] : ‘element_’.uniqid();
/* END modification introduced by me ~ norman784 */
I hope this features little added will be usefull for someone. Only added a promt to ask the name/id for the element, if leaves blank it will be set automatically (as always do) otherwise it take the entered value.
this is the best of the open source community
Required does not work at all. Even in your demo. Add a text box and make it required. Add another textbox. Go back to your original textbox. Required is no longer checked.
awesome plugin!
suggestion: add an option for a fieldset element and a class attribute for each element.
Great work! So kind of you to publish such wonderful code. Great job!
Wow, really nice script! Also recognized the bug with the required checkbox that doesn’t work…
wanted to ask if you can be hired =)…just to make some adjustments, I’m really no php-coder (working on it but my skills are noobish^^)…please contact me.
thx 4 your answer!
I’m going through a job transition at the moment, so i have some spare time to fix up the required stuff I guess
Yeah, read it…I’m very sorry for you!! But I think with your skills you find something soon! If you want I can recommend you the envato network, specially themeforest.net…your admin system would be a killer there…(haven’t seen it yet…but when it’s only half that impressive as your formbuilder then it will, I would be the first purchase =)!!)
regarding the formbuilder: I think the most important fix would be the required thing =)…I also wanted to ask you if there is a way to store the forms (as xml or something like that) and manage them directly in the formbuilder interface. Something like a “save”-button –> Input box “how would you like to name your form” –> “OK” and then in the interface there would be a box (below the “edit” box where you set required etc.) “Manage forms” and when you click on it you get on another site where the saved forms are listed with the usual buttons (edit / delete). When edit is clicked, the form is loaded again in the formbuilder interface and can be changed and again be saved…that would be crazy!!
I would also pay you for that feature, I’m not really rich but I would appreciate it really and therefore also be willing to pay something for it…maybe you could make an offer btw. let me know the estimated costs.
regards,
LuK
I got a problem with IE7 when i tried to move (Sorting) an element. The element will dissapear when I place to a new position.
Please advise me about that
Hi,
didn’t read anything from you and wanted to ask if you are too busy or if you just don’t work anymore on the formbuilder/admininterface? I still need a form management system and looked further around but your concept/UI is the best so far =)…so just to be sure I ask again.
thx for your reply!
as far as the required fields in textboxes, which are not propagated to the preview process, one must begin with the following :
open js/admin.formbuilder.js and find the following line :
$(‘#form_builder_properties li *:input’).keyup(function(){
Admin.formbuilder.attr.update(this);
});
then add the following line just below to take into account the Change event triggered when one set the Yes or Type field in the properties form
$(‘#form_builder_properties li *:input’).change(function(){
Admin.formbuilder.attr.update(this);
});
That’s only a start. I’ll give you below some other hints. Please save your js/admin.formbuilder.js before any change. You must understand how the original author passed the parameters between the main “form to be built” and the form where one change the properties : it is done via hidden inputs, in our case, a hidden input with the class “required”, and another one with the class “required_vars”. All that is below is to create or remove theses hidden inputs on the fly.
In the same js file, within the function “attr:get:”, replace :
$(‘#form_builder_properties input[name='+id+']‘).val(val);
by sthg like that :
switch ($(‘#form_builder_properties input[name='+id+']‘).attr(‘type’))
{
case ‘text’:
$(‘#form_builder_properties input[name='+id+']‘).val(val);
break;
case ‘checkbox’:
if (val) {
$(‘#form_builder_properties input[name=required]‘).attr(‘checked’,true);
$(‘#form_builder_properties select[name=required_vars]‘).val($(‘div.’+parent_id+’ input.required_vars’).val());
}
break;
default:
break;
}
with parent_id being copie from the parameter passed to get:
get: function(id)
{
var parent_id = id;
major updates have then to be written in the update: function:
after the “found = true;” statement, put sthg like that (that’s the case where one uncheck the “required” checkbox ; we have to delete boths required & required_vars hidden inputs) :
if (name==’required’ && !$(‘li.’+id+’ input[name=required]:checked’).length) {
$(‘div.attrs.’+id+’ input.required’).remove();
$(‘div.attrs.’+id+’ input.required_vars’).remove();
$(‘label[for='+id+'] a’).removeClass(‘required_field’);
}
(about the “removeClass(‘required_field’);”, see below)
in the “if (!found) {” statement, add (because the hidden input “required_vars” must be created once) :
if (name==’required’ && !$(‘div.attrs.’+id+’ input.required_vars’).length) {
$(‘div.attrs.’+id).append(“”);
}
After this statement, i also added :
if (name==’required’ && $(‘li.’+id+’ input[name=required]:checked’).length) {
$(‘label[for='+id+'] a’).addClass(‘required_field’);
}
so when i check a required field, i can show it in the “built form” via a css rule “a.required_field {border: 1px solid red;}” for instance (to be written yourself in the main CSS file).
Thanks! I will recommend this to all my friends.
Great job! thanks for sharing
Sweeeeet
Great job! thanks for sharing.
Question:
How can i load forms into the formbuilder? (jep, form was made with formbuilder before).
Is it possible?
Thx Chris
It would probably work better if the fields were added to the bottom, instead of the top, since most people will be building from top to bottom
Some other things that could improve UI performance:
- Again, add fields to bottom instead of top.
- Be able to directly edit labels (as text fields), instead of through properties.
- Delete field option next to move.
- Select field when the item is clicked, not just the label.
I love the simplicity of it though. Very nice work!
I used this to build a form in code igniter. It works like a champ.
We have had to modify for editing and saving. Of course we added few more features.
Great work – and gave us momentum to complete the form builder.
thanks
sudhi
Love the work! I am sure that this is probably not a big deal however, if I wanted to use this in a production site, how can I prove the licensing is open source?
Substantially, the article is actually the greatest on this worthw hile topic. I agree with your conclusions and will eagerly look forward to your incoming updates. Saying thanks will not just be sufficient, for the extraordinary lucidity in your writing. I will right away grab your rss feed to stay abreast of any updates. Good work and much success in your business enterprize!
“Love the work! I am sure that this is probably not a big deal however, if I wanted to use this in a production site, how can I prove the licensing is open source?”
Yep, its opensource
use it however you want.
If its commercial, maybe put a credit in source, thats about it
Very nice form builder. Is it a big effort to add the number of colums for the form?
Best regards
Ji,
Really like it. However there are a few bugs you may look into.
Validation part on the property is not working. On jquery combination of :input and keyup is not a good one. A quick fix would be to change to:
$(‘#form_builder_properties li *:input’).change(function(){ …
however is not that fancy but it works.
I had a need to be able to :
preload a presaved form for add/edit. For this I added :
preload:function(){
$.get(Admin.formbuilder.BASEURL+’?action=edit&type=0′,function(result){
var into = $(“#form_builder_panel ol”);
var type = $(this).attr(‘id’);
var e = this;
$(into).prepend(result);
var $newrow = $(into).find(‘li:first’);
$newrow.hide().slideDown(‘slow’);
$(into).sortable(“refresh”);
delete result;
});
},
This will generate an ajax request and can preload a saved form..
On php you need to add after case ‘element’:
case ‘edit’: echo “here u put whatever html to echo”; break
Select options lack of Value=>Description of value option.
here I added a possibility to write it as :
val::dec of val;val1::dec of val2 and so on…
for this I added 2 functions:
function serialize_options($arr){
if (!$arr) return “”;
foreach ($arr as $key => $val){
if (is_string($val)) $my_opt.= “$key::$val;\n”;
else foreach ($val as $subkey => $subval){
$my_opt.= “$key::$subkey::$subval;\n”;
}
}
return substr($my_opt,0,-3);
}
function unserialize_options($my_opt){
$arr= explode(‘;’,$my_opt);
foreach ($arr as $key => $val){
//
$val=trim($val);
// print “$key => $val\n”;
if (strpos($val,”::”)!==FALSE){
list($Country,$Prov)=explode(“::”,$val,2);
// echo “$Country-$Prov\n”;
if (strpos($Prov,”::”)!==FALSE){
list ($sprov,$lgprov)=explode(“::”,$Prov);
$my_res[$Country][$sprov]=$lgprov;
}else{
$my_res[$Country]=$Prov;
}
}else{
$my_res[$val]=$val;
}
}
return $my_res;
}
this support val::Descr of value as well as optgroups like
USA::State 2 letter::Name of state;
Canada::BC:British Columbia (value selected BC, otpgroup Canada)
I added as well a few custom made fields like Select Country and Select State , however they were embedded in the code and not by a template how it should.
This is a very good project!!
@JulianB how you implement the preload/edit function?
I’ve made the “reload” issue with no problem, but what about the possibility to modify an object that is reloaded?
I can simply print and move it, but i can’t reopen an object in edit mode… any advice?
Ok, i try to reload an object, and i do it by call the fb->element($attr), where $attr is like this $attr['type'] = “checkbox”. But even if the object is print great, i can’t edit it. So the problem is still here. Someone can help me?
Thanks!
Done. Sorry, i made a little mistake. The edit function now works!
But if you have any advice… I’m here to hear!
Can someone share to us work source code with fix editing(Required) fields