Laravel create dynamic forms via a drag and drop interface

What have you tried so far? We can't just build it for you ;)

i'm also interessed on this and i did not found any package.

@bobbybouwmann yes, you can! We will cheer for you while you code the package :D

most of the work is client side so it does not really make a lot of sense to be a laravel package

@Ruffles Will put it online when I'm done ;) You can expect it Sunday morning ;)

I think there is one approved for the State of Texas use. No drag/drop. Supports only CSS 1.0 beta release. But the CTRL and Arrow keys work. :) Sorry its Friday!!

@jimmck Can I access the code somewhere? I might be able to finish it tomorrow!

I was asking if there are libraries already that can help me achieve this.

Well I kind of found one https://github.com/minikomi/Bootstrap-Form-Builder, but its half the story, its just the client side.

Challenge for me is after the Form is built with this library I get HTML code, shall I save the html code in database? If I save the html code in DB I can retrieve it and render it in the page, but is this best way to save dynamic forms?

Now when users starts pushing data using this form, how do I store these form values in table, as some forms might have many form fields some have a few. Making a table with many-many columns half of which isn't used does not feel right to me, there has to be a better way.

@omniware I would recommend you to save the field types and a pivot (connection) between those fields and a form in the database. You can then have a generator class (like the html and form builders) and generate the fields based on their type

https://laravelcollective.com/docs/5.2/html

Once I've started to build a form builder using jQuery, and Vue.JS. Here are the steps I recommend to solve the problem of saving at backend:

1. You don't need a specific package to Laravel to solve this.
2. Build the Form Builder component normally as any other javascript library.
3. At your javascript component, use Events to realize when some part of your form has changed.
4. Since you know when something has changed, create a way to store a JSON field at your component, containing the form structure, serialized.
5. With the use of ajax, inform your server side application about the JSON and save it.

Do you not have a keyboard so as to type in a form?

And @jimmck funny, real funny. Where is @thefuzzy0ne I haven't seen (him or her) today.

Hey @jimmck is @thefuzzy0ne a girl or boy? Where can I get one.

@jlrdw

Do you not have a keyboard so as to type in a form?

The problem is not to fill the form, but to create the form. Offer users a means to create form by dragging and dropping controls from a list of available types on one part of the screen and arrange them in another part of the screen.

Once complete, the layout of the form should be persisted to the database along with some sort of form schema so that the form can then be filled in by visitors and the results saved.

One of the earliest and most successful examples of this type of form builder is wufoo.com https://www.wufoo.com/form-builder/

Actually, quite a technical challenge to do well.

Takes only a couple hours with vue. I set up vue components. User drags components to list area. Sets label and name text, default values and required or not. Save to file (blade partial) or database.

@ricardovigatti Why would you store the complete form structure in the database? What happens when you add or remove something in one of the components? You would need to go through all your json saved data and update that as well!

Wouldn't it be better to save only the kind of component and it's position in the form, so you can dynamically fetch it and update it when needed?

@ricardovigatti @jekinney , I am sure it would be really easy to do it via Vuejs, sadly I am in video lesson 5 yet :(, (I have very little hands on with front end frameworks, only basic jQuery).

@jekinney are you creating that thing for yourself or can we expect it available in open source?

@bobbybouwmann

Yes and no. I set it up to update the entire Json object when you save it. For a typical form not a huge deal.

@omniware

https://vuejsfeed.com/blog/vue-form-generator

Haven't played with it yet. Unfortunately I implemented mine only twice, and pretty opinionated and coupled.

@bobbybouwmann you got the idea, improvments will comming ni a natural way.. xD

@jekinney Thanks I am exploring it now

@RICARDOVIGATTI - I realize this post is about 2 years after the initial request but I was researching drag and drop form builders for laravel and had trouble finding a solution. I took ricardovigatti's basic concept and applied it to jQuery Form Builder. If you find yourself reading this thread and you want to give your site members the ability to create their own custom forms then check out this package:

https://github.com/jazmy/laravel-formbuilder

It will store the form itself in json and store the form submissions in json inside a mysql database.

Hello everyone and @jazmy

I'm working with laravel and this package https://github.com/kevinchappell/formBuilder I'm having problems transforming the content of html to json see capture here: https://ibb.co/XVRghLs

How can I convert that content (html) into the json to be stored in a MySQL database?

I was taking a look at this link and it generates the code in Json: https://formbuilder.readthedocs.io/en/latest/formRender/actions/userData/ However, it is generating the code in json of a form that is not the one I need. It always generates the code for the last form (form 2): https://codepen.io/chaw3x/pen/OYBdrb For example, I asked for form 1, and it generates json code for form 2.

How can I generate the code in json for the form I require?

I appreciate the help on this matter

Regards

Please don't hijack threads but rather create you own.

You can try it man, https://voyager.devdojo.com/