Form in a Popup

It is a frequent task to open a form inside a popup. I have seen many examples from the community when it was not done correctly. The demo below demonstrates how to do this right. The form take entire available space of the popup.




function openPopup () { $().w2form({ name: 'foo', style: 'border: 0px; background-color: transparent;', formHTML: '
'+ '
First Name:
'+ '
'+ ' '+ '
'+ '
Last Name:
'+ '
'+ ' '+ '
'+ '
Email:
'+ '
'+ ' '+ '
'+ '
'+ '
'+ ' '+ ' '+ '
', fields: [ { name: 'first_name', type: 'text', required: true }, { name: 'last_name', type: 'text', required: true }, { name: 'email', type: 'email' }, ], record: { first_name : 'John', last_name : 'Doe', email : 'jdoe@email.com' }, actions: { "save": function () { this.validate(); }, "reset": function () { this.clear(); }, } }); $().w2popup('open', { title : 'Form in a Popup', body : '
', style : 'padding: 15px 0px 0px 0px', width : 500, height : 300, showMax : true, onMin : function (event) { $(w2ui.foo.box).hide(); event.onComplete = function () { $(w2ui.foo.box).show(); w2ui.foo.resize(); } }, onMax : function (event) { $(w2ui.foo.box).hide(); event.onComplete = function () { $(w2ui.foo.box).show(); w2ui.foo.resize(); } }, onOpen : function (event) { event.onComplete = function () { $('#w2ui-popup #form').w2render('foo'); } } }); }