Form Generator in PHP

[jovstudios]

Hello Guys, Iwant to create a form builder using php and jquery, it is possible or not? This is my code.

<div id="form_gen">

                <div class="">
                    <hr>
                    <h4>Create Database and Table</h4>
                    <table  class="bar form_evalution">
                        <tr>
                            <th>Database Name:</th>
                            <td><input type="text" class="form-control"  placeholder="Input Database Name"></td>
                        </tr>
                        <tr>
                            <th cols="auto">Table Name:</th>
                            <td><input type="text" class="form-control"  placeholder="Input Database Name"></td>
                        </tr>
                    </table>
                    <hr>
                </div>
                <p>
                    <table for="form_gen" class="form_evalution">
                        <tr>
                            <th>Field</th>
                            <th>Input Label</th>
                            <th>Input Type</th>
                            <th>Input Name</th>
                            <th>Database Column Name</th>
                        </tr>
                        <tr>
                            <td>Field</td>
                            <td><input type="text" class="form-control" name="input_label" placeholder="Input Label"></td>
                            <td>
                                <select name="input_type" class="form-control">
                                    <option value="text">Text</option>
                                    <option value="radio">Radio Button</option>
                                    <option value="checkbox">Check Box</option>
                                    <option value="password">Password</option>
                                    <option value="textarea">Textarea</option>
                                    <option value="submit">Submit</option>

                                </select>
                            </td>
                            <td><input type="text" class="form-control" name="input_name"  placeholder="Text input"></td>
                            <td><input type="text" class="form-control" name="input_tbl"  placeholder="Input Database Column"></td>
                        </tr>

                    </table>
                    </p>
            </div>


        <input type="submit" name="generate" class="btn btn-warning pull-right" value="Generate"/>
        </form>
        <button onclick="javascript:void(0);" class="btn btn-warning" id="addField">Add New Field</button>
            <hr>

            <!---End of FORm Html--->
        </div>
</div>


        <div class="clearfix"></div>
        <div class="clearfix"></div>
        <div class="clearfix"></div>
        <div class="clearfix"></div>  
    </div>
    <div class="clearfix"></div>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("button").click( function() {
            $("#form_gen").append('<table class="bar form_evalution"><tr><td>Field</td><td><input type="text" class="form-control" name="input_label"  placeholder="Input Label"></td><td><select name="input_type" class="form-control"><option value="text">Text</option><option value="radio">Radio Button</option><option value="checkbox">Check Box</option><option value="password">Password</option><option value="textarea">Textarea</option><option value="submit">Submit</option></select></td><td><input type="text" class="form-control" name="input_name"  placeholder="Text input"></td><td><input type="text" class="form-control" name="input_tbl"  placeholder="Input Database Column"></td><td><a href="javascript:void(0);" id="delete" class="remCF">Remove</a></td></tr></table>');
        });
      $("#form_gen").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
    });
</script>

And I dont know how to generate that by that code, can you help me to get that logic? or any tutorial? please guys, I need it to be done as my project. Thanks in Advance

[diafol]

This is not a trivial application. It may see so at the outset, but you can get bogged down quickly with assigning properties and attributes to certain types of input/select/button/image etc. Producing a simple version as a proof of concept is easy enough, but pretty useless.

You will need to have a way of saving the html form to file - file_put_contents() is a convenient function.

Input field 'types' have exploded since html5 - will you need to include them all?

Do you know properties and attributes you want your app to be able to provide for each field type?

How about option buttons? These are a little more complicated as they are grouped together by a common name.

Will you be considering aria- and data- attributes/properties?

[iamthwee]

Don't forget layouts as well.

A form isn't just a list of elements that go down the page, although in most cases it is.

You could build a layout builder as well but that isn't trivial either.

[diafol]

As iamthwee states, the layout and styling is what will make your form stand out and make it succeed or fail with regard to UX/UI. In addition remember to make them accessible. You'd probably be looking at a CSS builder of some description. However, these files can be pre-built and applied to generated forms - have a look at things like Bootstrap and Foundation for examples.

[iamthwee]

I just wanted to add to this as a while back I was considering a similar thing, mainly to aid development and being some sort of RAD designer for web.

http://www.layoutit.com/

Since everything these days is going 'Responsive' I think if you're building forms that are NOT then you're going wrong.

Out of all the bootstrap builders out there the one above is clearly the best. JetStrap is way too convoluted and bloated to be of use although they've marketed it well.

Layoutit does what it says on the tin. It's easy. I was thinking you could perhaps make your own using jquery's .append() allowing you to nest elements.

[iamthwee]

I also decided to dabble with a bit of jqueryui to build a simple layout builder. (Where you can drag and drop and decide how many columns your divs should span.

Now it is not to difficult to imagine with a bit of php you can quickly create dynamic layouts. If anyone wants to add to what I've done feel free.

http://jsfiddle.net/4x6S7/12/