Creating an HTML popup form that is accessible on may websites

Question

I want to have a HTML form that has two input textboxes and a submit button that can be places on many websites that I have. I just want to have the reference to this form in the form of javascript code that takes some customizing arguments depending on which the form's shape, size or color should change.

I had already created a form ready with me that takes inputs and I want to make it as plug-in or some other kind of javascript code which when pasted on the other websites should pull out the form that I've created.

Answer 1

As you said, you must create a plugin. You can write it in a separated file like insertMyForm.js .

The plugin can be called with a specified div element that will be the parent of your form (for instance)

(function($) {
    $.fn.insertMyForm = function(params) { 
        //check that parent ( $(this) ) is a div, or something else...
        //create your html element  
        var myFirstInput = $("<input>");//... 
        var myForm = $("<form>");//...
        //do some stuff with with your elements (css, handlers...)
        //append you form to the parent 
        $(this).append(myForm);//...
        //return something like the jQuery object of your form (return myForm;)
    };
})(jQuery);

Now in you page, in the script section, include insertMyForm.js and create your form :

$("#myParentElement).insertMyForm(params);